-
HTML中没有section_标签，下划线非法，浏览器将其视为无语义的自定义元素；应使用标准section标签配合class（如user_profile）实现语义化与命名自由。
-
<embed>标签没有object属性，该属性不存在于HTML标准中，浏览器会直接忽略；正确传参应使用<object>标签配合data属性和<param>子元素。
-
display:inline-flex使容器为行内级元素且子项按Flex布局排列；它不因HTML空白产生间隙，支持justify-content/align-items精确控制，而inline-block会受空白节点影响且仅能靠text-align或margin模拟对齐。
-
事件监听器应优先使用addEventListener绑定，及时清理防止内存泄漏，集中管理避免重复注册，并按场景选择委托、节流等优化策略。
-
负margin是最直接兼容的“移出父容器”手段，但不脱离文档流；transform:translate()视觉位移且占位不变；position:absolute+负值才真正脱离流；overflow:visible对负定位元素无效。
-
应选用TinyMCE、Quill或CKEditor5等富文本编辑器直接替换textarea，初始化时绑定DOM节点，通过getData()获取HTML并同步至hiddeninput，确保表单提交含格式数据。
-
脚本不生效通常因加载顺序、执行时机或路径问题。应确保脚本在DOM构建后执行，如置于body底部或使用DOMContentLoaded事件；检查外部脚本路径正确性及网络加载情况，排除404或CORS问题；合理使用async与defer避免执行错序；通过console.log、开发者工具和错误提示验证脚本是否加载运行，逐步排查定位问题。
-
用多个语义中立的<span>分隔文本实现分页范围显示，JS动态更新各部分textContent，CSS用white-space:nowrap等确保对齐与断行，避免ARIA干扰。
-
text-decoration-line无效多因浏览器不支持或被text-decoration简写覆盖；二者不可混用，需统一用Level3或Level4属性体系；局部下划线需注意继承与行框绘制特性。
-
应使用JS监听matchMedia的change事件并用setProperty动态设置CSS变量：先获取media对象，定义更新函数写入--theme-mode或--reduce-motion，绑定change事件，并立即执行一次确保初始值正确。
-
Playwright截取带HTML图片对齐效果的页面需等待图片加载完成、布局稳定及渲染就绪，推荐组合使用waitForSelector('img.complete')、document.fonts.ready和waitForFunction检测偏移稳定，并用boundingBox()量化验证对齐精度。
-
dragstart事件必须调用setData()才能触发后续拖放，dragover必须preventDefault()否则drop不会触发，drop中需手动处理DOM更新并clearData()。
-
最稳妥写法是repeat(auto-fill,minmax(300px,1fr)))，确保卡片最小300px、超出均分空间且自动换行；需配合align-items:start防错位，gap推荐clamp(0.5rem,2vw,1rem)兼顾响应式。
-
文字淡入效果通过CSS的opacity与transition实现，初始设opacity为0，再通过状态变化使opacity变为1。具体方式包括：①hover触发，鼠标移入时透明度由0升至1；②页面加载后自动淡入，结合JavaScript在DOMContentLoaded后添加类名触发；③滚动至指定位置时由JS控制显隐。注意事项：opacity为0仍占布局空间，子元素会继承透明度，transition需定义在默认状态以确保动画平滑，可配合transform或visibility实现复合效果。该方法简单高效，
-
必须用JavaScript监听input事件配合正则与字符集检测实现分级提示，纯pattern无法动态反馈；提示需紧贴input下方用display:none控制显隐，前后端校验策略须一致且可配置。
