-
HTML实体字符是防止页面崩坏、内容错乱和XSS攻击的关键防线，必须对<、>、&、"、'等有语法意义的字符转义，而UTF-8可支持中文、emoji直输但不替代语法转义。
-
通过CSS的margin、padding及flexbox或grid的gap属性可有效调整元素间距。首先使用margin控制元素外部距离，如设置统一或方向性外边距；其次利用padding增加内容与边框间的内部空间，提升视觉舒适度；在弹性布局中推荐使用gap属性（如display:flex;gap:16px）实现子元素间均匀间隔，避免外边距合并问题；同理在Grid布局中通过gap设定网格项之间的间距，代码更简洁且响应式表现更优。综合来看，简单场景用margin/padding即可，复杂布局建议采用flex+g
-
dfn标签仅在术语首次出现且紧邻完整定义语句时使用，必须嵌套于语义化块级元素中，优先取title属性值作为定义内容，错误用法会导致语义断裂与辅助技术失效。
-
q标签不自动显示中文引号，因浏览器默认不查中文引号表，需显式设置quotes四元组（如"“""”""‘""’"）、正确声明lang="zh"，并确保q::before/after生效；嵌套最多可靠两层，cite属性仅影响SEO与无障碍，不渲染内容。
-
JavaScript数据可视化核心是用成熟图表库（如ECharts、Chart.js、D3.js、ApexCharts）将结构化数据渲染为图表，关键在选库、规范数据、配置与挂载；轻量场景可用CSS/SVG/Canvas手绘。
-
background-size:cover失效主因是容器无明确尺寸，需设html,body{height:100%;margin:0;}，区块用min-height:100vh，配center定位与no-repeat，慎用fixed及注意iOSSafari偏移。
-
daisyUI的glass类最省事，它开箱即用、自动处理backdrop-filter和-webkit-backdrop-filter；不用则需手动配置backdropBlur映射、清缓存重构建，并确保半透明背景、无overflow:hidden、背后有内容，同时兼容Safari需加WebKit前缀。
-
移动端分栏堆叠失效的根本原因是viewport缺失、父容器未设flex-wrap:wrap、子项使用固定宽或百分比硬编码；应改用flex:1或grid配媒体查询，配合max-width和响应式gap、line-height等。
-
加border-top:1pxsolidtransparent能打断margin塌陷，因其在父子间创建非空边界，满足CSS规范中“存在border/padding/content即阻断合并”的条件，且视觉无影响、兼容性好。
-
column-count仅能实现视觉近似瀑布流，非真正Masonry布局；因按文档流“切片分栏”，DOM与视觉顺序错位，仅适用于纯展示、无交互、卡片高度相近场景。
-
CSS中max-height:0与max-height:auto无法过渡，因auto不可计算；应改用足够大的固定值（如500px）并配合overflow:hidden实现动画，避免height、display:none及transition:all。
-
id属性必须全局唯一，否则getElementById只返回首个匹配元素，锚点跳转错位、屏幕阅读器误读；表单提交依赖name而非id，混淆二者将导致后端收不到数据。
-
font-size:0能消除inline-block间隙，因其使HTML解析生成的空白文本节点失去字号而不可见；但子元素需显式重设font-size、line-height等继承属性，否则文字消失或布局错乱。
-
通过JavaScript操作video元素的play()和pause()方法可控制视频播放与暂停，需先用document.getElementById获取元素，结合按钮点击事件切换状态并更新按钮文本，注意浏览器可能阻止无用户交互的自动播放。
-
内存屏障在WebWorkers中虽不直接暴露，却是保障主线程与Worker间数据可见性的底层机制；它通过CPU缓存同步、postMessage隐式屏障及Transferable的release/acquire语义起作用，带来真实同步开销。
