-
最直接的写法是用background-image:linear-gradient()给body或容器设渐变背景；需配background-color降级，避免用background简写覆盖，并注意浏览器兼容性与移动端渲染问题。
-
CSSGrid实现复杂页头需在header容器设display:grid和grid-template-areas（带引号多行声明），子元素grid-area值须严格匹配；响应式需重写entireareas；吸顶用position:sticky于子行而非整个header；box-sizing:border-box必须统一。
-
HTML表单无法直接获取视线轨迹，需用mousemove、focus/blur、scroll等代理信号推测注意力；应避免误用IntersectionObserver，聚焦字段级行为链聚合与合理埋点。
-
HTML无法直接扫码，需用JavaScript调用摄像头：通过navigator.mediaDevices.getUserMedia获取视频流，用jsQR等库逐帧解码二维码；须控制帧率、适配分辨率、及时关闭媒体轨道，并确保HTTPS环境与权限处理。
-
auto-fit只创建有内容的轨道并拉伸填满容器，auto-fill则无论内容多少都按minmax()尽可能预留全部轨道，导致空列和布局错位。
-
正确引用外部CSS需根据HTML与CSS文件的相对位置使用路径。同一目录用href="style.css"，子目录用href="css/style.css"，上级目录用href="../style.css"，多级跳转如href="../../assets/css/main.css"；注意大小写敏感、使用正斜杠/、避免以/开头导致根路径误用，并通过开发者工具Network面板验证加载情况。
-
shortcuts字段必须是顶层非空数组，每项须含name和url（相对路径），且url需符合scope范围；Android要求显式配置icons，否则显示空白。
-
根本原因是移动端浏览器地址栏收放导致vh动态变化，应改用min-height:100vh+height:100%、JS同步--vh变量、监听resize/orientationchange事件并防抖处理，确保全屏体验稳定。
-
JIT优化不是“一劳永逸”因为其依赖的运行时推测信息可能失效，一旦假设被违反（如类型变化、类加载、虚方法目标变更等），必须执行去优化（deoptimization）回退到解释执行。
-
font-display:swap需配合preload、font-size-adjust和min-height容器兜底才能缓解移动端CLS，单独使用反而加剧布局跳动。
-
优先用grid-column和grid-row手动控制每个格子的起止线；grid-template-areas仅适用于语义固定、命名稳定的布局场景。
-
画中画标题样式受限，只能通过video::picture-in-picture-title伪类调整color和font-family等极少数属性；1.浏览器限制样式是为了安全，防止伪造系统界面进行钓鱼等恶意行为；2.保持用户体验一致性，确保PiP窗口在不同网站间外观统一、易于识别和操作；3.技术上因PiP窗口由浏览器原生UI层渲染，网页CSS控制能力本就有限；4.标题内容应通过<video>标签的title属性设置，以确保清晰传达视频信息；5.优化PiP体验可从提升视频质量、优化title文案
-
构建高性能业务流模块系统应以ES6模块静态导出为核心：用命名导出封装细粒度异步单元，export*聚合领域能力，default导出组合流程模板，配合dynamicimport实现按需加载。
-
正确使用HTML标签和属性实现图片语义化布局，可提升可访问性、SEO与代码维护性。1.内容型图片用<img>配alt描述，如产品图；2.装饰性图片通过CSSbackground-image实现；3.复杂图表结合aria-describedby或figure与figcaption提供详细说明；4.响应式中利用srcset、sizes优化加载，配合loading="lazy"提升性能；5.优先使用WebP等现代格式并通过<picture>回退；6.alt文本需具体简
-
不能用opacity设置背景透明，因为它会作用于整个元素及所有子元素，导致文字、边框、图标等同步变淡甚至叠加衰减；应使用background-color:rgba()仅控制背景色透明度，保持内容清晰可读。
