-
JavaScript中对象需实现迭代器协议（即拥有返回{value,done}对象的[Symbol.iterator]方法）才支持for...of等操作；普通对象默认不满足，可通过生成器函数简洁实现，自动处理状态与惰性求值。
-
基础轮播需用HTML结构+CSSflex布局与overflow:hidden+JS手动管理currentIndex和transform位移；自动轮播用setInterval，手动切换后需clearInterval并重置；移动端滑动须记录touchstart/end的clientX判断方向，差值超50px才触发切换并preventDefault；动画必须用transform+opacity配合transition，禁用left/margin-left；无缝循环靠DOM克隆首尾项并逻辑索引映射实现。
-
优先用aria-label于纯图标按钮，aria-labelledby于引用隐藏标签；role="button"仅用于非原生按钮的模拟；aria-hidden="true"禁止包裹交互元素；aria-live="polite"用于非紧急更新，“assertive”仅限关键中断。
-
HTML倒计时精度取决于JavaScript定时机制与系统时钟同步策略；应以服务端时间戳为基准，用Date.now()实时计算剩余时间，避免setInterval累加误差，并通过requestAnimationFrame优化渲染流畅度。
-
::selection仅支持color、background-color等5个属性，因浏览器为保障可访问性强制限制；Safari需15.4+且禁用prefers-reduced-motion/forced-colors才生效；iOS/Android移动端基本不可靠，推荐JS模拟或交互反馈替代。
-
:first-of-type和:last-of-type用于选择父元素内同类标签的第一个和最后一个元素，可精准设置首尾元素样式。例如去除首段上边距、末段下边距，为列表首项添加图标、末项加粗，或为导航首个链接设左圆角、末个设右圆角。二者基于元素类型匹配，非整体子元素顺序，若某类型仅一个元素，则两者均匹配该元素，兼容性良好，IE9+及现代浏览器支持。
-
em单位按父元素“计算后”的font-size值计算，而非CSS声明值；例如父元素font-size:1.2rem且html为16px，则1em=19.2px，需查DevTools的Computed面板确认。
-
访问父路由页面空白是因为未配置默认子路由，应在children中添加path:''的子路由并redirect至首个子页面，如{path:'',redirect:'overview'}，同时确保父组件含<router-view>。
-
contain:paint不防止视觉溢出，仅隔离绘制；需配合layout且容器必须有明确尺寸（如min-height）才生效，单独使用无效。
-
关键在于用带透明度的linear-gradient叠加半透色而非纯色，如rgba(0,0,0,0.4)，透明度宜选0.2–0.6；可依图文位置设方向渐变，配合background-blend-mode（如multiply）及background-size:cover等确保融合自然。
-
<p>左滑删除需用touchstart、touchmove、touchend三阶段手动计算水平位移：touchstart记录startX，touchmove实时算deltaX=currentX-startX并限定deltaX<-阈值，touchend判定触发删除。</p>
-
纯CSS无法实现点击位置波纹效果，因:active伪元素无法获取鼠标坐标；必须用JS计算点击偏移并设CSS变量，配合transform:translate(-50%,-50%)定位，再用overflow:hidden或clip-path裁剪。
-
浮动元素的margin常“失效”是因为其脱离普通文档流，垂直方向margin被忽略或合并；水平margin通常有效，垂直间距宜用padding或BFC解决；现代布局应优先使用flex或grid。
-
itemtype属性用于声明itemscope元素所描述的事物类型，必须是可验证的HTTPSURL，如https://schema.org/Person；写错协议、路径或类型会导致结构化数据失效。
-
viewport-fit=cover是env()生效的硬性前提，不加则iOS上env(safe-area-inset-bottom)恒为0px；必须在meta中完整声明width=device-width、initial-scale=1.0和viewport-fit=cover，缺一不可。
