-
够用，但易误删关键交互节点；需确认元素是否参与可访问性流或被脚本依赖，且必须用@media限定范围，避免全局隐藏、高DPR误判及嵌套过深。
-
气泡提示框尖角不必非用::before/::after，但这是最稳妥方案；SVG/Canvas虽灵活却影响可访问性与缩放，纯CSS伪元素零额外HTML、兼容IE9+、响应式友好。
-
lang属性必须正确设置在<html>标签上，如lang="zh-CN"，否则屏幕阅读器会按默认语种错误发音；服务端需在首屏输出正确值，运行时修改无效。
-
本文详解FirebaseStorage中调用getDownloadURL()后使用fetch()下载JSON文件时出现“NetworkError”的根本原因，并提供符合Promise链式规范的修复代码、CORS注意事项及最佳实践。
-
for-of循环通过迭代协议遍历可迭代对象：先调用[Symbol.iterator]获取迭代器，再循环调用next()方法解构{value,done}，依done控制终止，不依赖索引或长度，专用于值序列而非属性键。
-
<fieldset>用于语义化表单分组，<legend>为其唯一合法直接子元素且须置于最前；禁用整组用<fieldsetdisabled>；仅含表单控件，避免混入非交互内容。
-
mix-blend-mode:difference通过颜色差值运算强制实现文字与背景的高对比反色效果，并非检测背景深浅；其生效依赖相邻图层或isolation:isolate隔离，且在复杂背景、错误DOM结构及旧版Safari中易失效。
-
left/top动画卡顿因触发重排重绘，而transform:translate()仅合成且GPU加速；应预先声明transition、用will-change或translateZ(0)提升图层，并避免动态添加transition。
-
迭代器与生成器通过按需加载和延迟计算，实现了高效的数据分页。利用异步生成器函数封装分页逻辑，每次调用next()才请求下一页数据，避免一次性加载大量数据，降低内存占用与网络开销。相比传统分页需维护页码、总数等状态，生成器将数据获取与消费解耦，天然支持“拉取”模式，便于实现无限滚动等场景。同时，结合延迟计算，复杂处理仅在需要时执行，优化CPU与内存使用，提升性能与用户体验。
-
JavaScript滚动动画核心是“检测时机+触发样式变化”，推荐用IntersectionObserver监听元素可见性，CSS定义动画类，JS仅开关class，配合requestAnimationFrame实现数字滚动等特殊效果。
-
HTML注释用<!--和-->包裹，不可嵌套；多行注释需每行内容独立书写；注释须与对应代码缩进对齐；特殊用途需加DEBUG:/TODO:/TEMPDISABLED:等前缀。
-
使用Flexbox可轻松实现自适应顶部导航栏。通过display:flex设置容器，justify-content控制间距，推荐space-evenly实现等距分布；结合flex:1使导航项均匀填充，提升布局美观性；在小屏下通过媒体查询切换为flex-direction:column和gap实现垂直堆叠，确保响应式可用性。
-
HTML无法直接调用生物识别，必须通过JavaScript调用WebAuthnAPI（如navigator.credentials.get()）在HTTPS或localhost环境下触发系统验证，且需服务端参与challenge校验。
-
移动端点击蓝色高亮框源于系统级taphighlight，由-webkit-tap-highlight-color控制，独立于:focus；应按需禁用（如纯图标按钮），保留可访问性焦点样式，不可全盘透明化。
-
flex-wrap:wrap是触发换行的唯一开关；仅设display:flex不会换行，因默认flex-wrap:nowrap，必须显式声明wrap或wrap-reverse才启动换行逻辑。
