-
clip-path加在grid容器上仅裁剪视觉，不改变子项布局位置；子项仍按原始网格线排列，超出部分被隐藏，hover和点击区域照常响应。
-
确保组件卸载时内存彻底回收，关键在于使用同一函数引用配对添加和移除事件监听器，并在useEffect清理函数中及时执行removeEventListener；避免闭包滞留和setState泄漏。
-
视频课程页面需同时解决播放控制、目录跳转、响应式布局、移动端静音拦截四件事；video必须加muted+autoplay+playsinline（含webkit前缀），双source兜底，preload="metadata"，目录跳转须currentTime+play()显式触发并捕获错误，卡片用grid+aspect-ratio，禁用页面滚动改用容器滚动，错误时回退poster图，跳转逻辑与播放状态须解耦。
-
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，混淆二者将导致后端收不到数据。
