-
ServiceWorker实现离线访问需满足注册激活、缓存策略与请求URL及Request.mode严格匹配；scope决定拦截范围，install阶段用cache.addAll()预缓存完整路径资源，fetch中按destination/mode分类响应，并注意credentials等匹配细节。
-
利用CSS自定义属性可高效实现主题切换，通过:root定义变量（如--color-bg）、var()调用、JavaScript切换类名（如theme-dark）重写变量值，并结合prefers-color-scheme适配系统偏好，提升用户体验。
-
使用伪元素和background-clip可模拟渐变边框并实现过渡动画，通过::before创建渐变层并用transform控制动效；2.单色边框过渡可直接使用border-color配合transition；3.box-shadow能模拟双色或发光边框并支持颜色过渡，适合轻量交互反馈。核心是借助伪元素或阴影弥补border-color不支持渐变的限制，根据设计需求选择合适方案。
-
crypto.randomUUID()是最简洁安全的UUID生成方案，符合RFC4122v4规范，仅限安全上下文且需现代浏览器或Node.js≥14.17.0；不支持时应分层降级，优先使用加密API。
-
加target="_blank"不安全，必须同时加rel="noopener"才能防止window.opener劫持；否则新页面可篡改原页面地址栏、DOM或拖慢性能，即Tabnabbing攻击。
-
掌握HTML5动画制作技能可通过五种路径变现：一、承接商业广告动画项目；二、销售可商用模板；三、嵌入激励视频广告的互动应用；四、提供技术培训服务；五、为SaaS工具开发动画插件。
-
使用两个inputtype="date"并结合JavaScript动态设置min属性，可确保结束日期不早于开始日期，同时推荐使用Flatpickr等库提升体验，并在后端校验数据；时区处理建议前端用ISO格式传参，后端统一用UTC存储，展示时再按用户时区转换。
-
浮动元素本身不直接导致文本选择困难，真正原因是其引发的层叠上下文错乱或意外覆盖，使鼠标事件落在非预期元素上；修复需创建BFC、合理设置z-index及避免干扰属性。
-
用Less变量定义全局box-shadow最稳妥，需加引号并用~@var插值；CSS自定义属性适用于运行时动态场景，二者定位不同，可共存但不自动同步；扩散范围宜用mixin封装，避免硬编码；Less变量无法被JS访问，导出需构建时处理。
-
display:none使width/height完全失效，元素从渲染树移除，尺寸不可读取；inline元素默认忽略宽高；flex/grid容器对齐方式会压制子项尺寸；box-sizing变更影响宽高计算基准。
-
<time>标签必须带符合ISO8601规范的datetime属性才具语义有效性，仅文本内容无法被解析；支持日期型、日期时间型、周/年/月型三类格式，且需确保机器可读、逻辑一致、不嵌套。
-
<p>backdrop-filter直接写死易失效，因Safari等需-webkit-前缀、半透背景及will-change触发GPU加速；Less混合器可统一注入前缀、rgba透明底色和will-change，确保兼容性与性能。</p>
-
应避免滥用<hr>，它仅适用于主题段落间的语义分隔；多数视觉分隔需求应使用<divclass="divider">配合CSS实现，兼顾样式可控性、可访问性与暗色模式支持。
-
用CSStransform:scale()配合:hover可实现无JS图片放大，但需设transform-origin:center防偏移，加image-rendering提升清晰度，用cubic-bezier优化缓动，并注意响应式与高DPR适配。
-
移动端垂直布局应使用flex容器+column方向+flex-grow实现弹性拉伸，而非height:100vh；因100vh在iOSSafari等浏览器中会包含地址栏高度且软键盘弹出时不重算，导致截断或错位。
