-
可使用innerHTML、textContent或模板字符串动态更新HTML中JavaScript变量值：innerHTML支持HTML解析但有XSS风险；textContent仅输出纯文本更安全；模板字符串适合多变量嵌入且结构清晰。
-
最常见的原因是未设置content属性或其值为空；必须显式声明content（如""或Unicode字符），并确保字体加载、display和定位正确。
-
play()和pause()需在用户手势（如点击）后调用，否则因浏览器自动播放策略抛出NotAllowedError；应通过paused属性判断状态，监听play/pause事件而非轮询，并注意iOS/Safari的playsinline等限制。
-
style标签天然具有页面级作用域，仅影响当前HTML文件，无需scoped等额外属性；其优先级与外部CSS相同，取决于选择器特异性和声明顺序。
-
var、let、const是变量声明方式，非数据类型；string、number等才是JavaScript数据类型；三者区别在于作用域和赋值规则：var函数作用域且提升，let/const块级作用域，const需初始化且不可重赋值。
-
直接用color即可控制图标字体颜色，因其本质是特殊字符；需确保字体加载、类名正确及CSS优先级合理，推荐使用currentColor实现颜色同步，状态样式应结合伪类或属性选择器控制。
-
将字符串转为布尔值时，不能依赖隐式转换，因为非空字符串始终为true。应通过比较或函数处理实现：如str==="true"或封装函数判断"true"、"1"、"yes"等值，确保正确转换语义上的布尔值。
-
WebGL是浏览器中基于OpenGLES的GPU加速JavaScript图形接口，需手动管理顶点、着色器、缓冲区等底层资源，区别于CPU渲染的Canvas2D，适用于高性能3D应用；Three.js等库是其高级封装，但调试优化仍需理解WebGL原理。
-
Proxy与Reflect必须协同工作，因Reflect提供带receiver的标准操作以正确处理访问器、原型链和私有字段；Object.defineProperty无法监听动态属性或数组索引，而Proxy可拦截13种操作；Reflect方法返回布尔值而非抛错，更利于防御性编程。
-
属性值完全匹配需用引号包裹，如[data-status="active"]；忽略大小写加i标志，如[lang="en"i]；布尔属性仅用[attr]形式；动态更新须用setAttribute而非dataset。
-
浮动元素会自动变为块级元素，无论原display值如何；浏览器将其内部计算为display:block，导致inline、inline-block、flex等特性失效，现代布局应优先使用flex或grid。
-
容器默认无内边距，需按断点设置padding（如px-4sm:px-6lg:px-8），避免嵌套叠加，并为Header/Footer统一添加响应式内边距以保障视觉一致性。
-
flex-wrap:wrap用于允许flex子元素自动换行；设置display:flex和flex-wrap:wrap后，子元素在一行放不下时会折行排列，结合flex宽度与calc()可控制每行数量，适用于卡片网格、标签组等多行布局场景。
-
flex-wrap:wrap实现换行需配合flex-basis（或width+flex:01auto）和容器明确宽度，否则子项可能不折行；推荐用gap而非margin，并注意white-space和溢出处理。
-
通过禁用子元素（如按钮内图片）的pointer-events，或移除addEventListener的capture阶段参数，可确保mouseenter仅在真正悬停按钮本身时触发一次，避免因内部img元素冒泡或捕获导致重复触发。
