-
console.log不够用，应优先使用console.table()、console.group()、console.time()、console.assert()等结构化调试方法，并结合断点调试、全局错误监听、console.dir和$0等DOM调试技巧。
-
箭头函数的this指向固定且不可修改，它捕获定义时外层普通函数的this值；不能用作构造函数、无prototype、无arguments、不支持yield，特定场景下完全不可用。
-
:nth-child根据父元素下所有子元素的总顺序选择，不区分类型；:nth-of-type仅按同类型标签的顺序选择。例如p:nth-child(3)选第3个子元素中的p标签，而p:nth-of-type(2)选第2个p标签，忽略其他类型元素。
-
HTML5无原生幻灯片功能，需用Swiper等JS库或CSS动画实现；Swiper推荐用于响应式轮播，需严格HTML结构和DOM加载后初始化；纯CSS方案功能受限且无自动播放；禁用iframe嵌PPT。
-
:nth-child(odd)匹配父元素下第奇数个同类型子元素，但受所有子元素序号影响；:nth-of-type(odd)则仅按同标签元素计数，更适应含干扰节点的结构。
-
HTML页面图标最直接方式是用<linkrel="icon">声明于<head>，需绝对或根相对路径、推荐.ico格式及image/x-icon类型；第三方图标库如FontAwesome需引入CSS并用<i>标签调用；SVG内联更可控；多尺寸适配需多次声明不同sizes的link标签。
-
要精准选择多类元素并结合伪类实现动态样式，需掌握类选择器的“与”逻辑及伪类的应用规则。使用连续书写类名（如.btn.danger:hover）可选中同时具备多个类且处于特定状态的元素，适用于悬停、焦点、激活等交互场景。类名顺序不影响匹配，伪类应置于类选择器之后以提升可读性，避免空格误用导致后代选择器错误。典型应用包括按钮状态、表单验证和导航高亮，合理组合可减少HTML冗余，增强样式灵活性。
-
直接修改video的src属性并调用load()方法可动态切换视频源，推荐使用source标签灵活控制多格式兼容，需注意自动播放限制与跨域问题。
-
后代选择器通过空格选中任意层级的嵌套元素，如.containerp{}会影响所有后代p元素；而子选择器用>仅作用于直接子元素，需注意作用范围避免样式冲突。
-
应优先使用transform:translate()实现位移过渡，因其是合成属性，支持硬件加速且无需position声明；left/top过渡需显式position及明确初始值，但易触发重排、卡顿，仅限特定场景谨慎使用。
-
在Handlebars模板中，无法直接在{{#if}}辅助器中使用&&运算符（如{{#ifitem_link&&item_value}}），需通过预处理数据或使用自定义辅助器实现双变量联合判断与安全渲染。
-
最稳妥获取元素的方式是通过ID使用document.getElementById('myId')；无ID时用document.querySelector()或querySelectorAll()；改样式优先操作classList或预设CSS类，避免硬编码style。
-
返回顶部按钮需用position:fixed以锚定视口，避免滚动消失；scroll事件应节流并结合opacity/visibility控制显隐；scrollTo平滑滚动需检测兼容性；移动端须保证点击区域≥44×44px并添加touch-action和:active反馈。
-
WebView中XMLHttpRequest默认无超时导致白屏，须显式设timeout（8000–12000ms）并监听ontimeout；fetch在iOSWKWebView不支持timeout，需用Promise.race或AbortController封装；跨域和HTTPS混合内容也会伪超时，需分别配置WebView策略、改用本地HTTP服务及统一HTTPS请求。
-
提升卡片视觉质感的关键在于层次感与细节：合理运用border-radius（如顶部12px、底部6px）和双层box-shadow（内层02px4pxrgba(0,0,0,0.06)，外层04px12pxrgba(0,0,0,0.08)），搭配浅色背景、统一内边距1.25rem、行高1.5及透明黑阴影。
