动态HTML结构性错误（如p嵌div、table缺tbody、img闭合错误）必须在构建阶段用html-validate拦截，因其本质是浏览器静默修正导致DOM与源码不一致的根源，而非运行时JS可补救的问题。
动态 HTML 代码质量缺陷（比如 p 里嵌 div、table 缺 tbody、img 标签闭合错误）不是运行时能靠 JS 补救的问题，而是构建阶段就该拦截的结构性错误。模板引擎不校验嵌套规则，浏览器会静默修正 DOM，但 JS 拿到的结构和你写的完全对不上——document.querySelector('p').children 返回空，就是最典型的信号。
html-validate 必须跑在打包前，而不是 CI 后期
它不是“锦上添花”的 lint 工具，而是防止 DOM 结构被浏览器篡改的第一道防线。很多团队把它放在 PR 后或部署前，结果问题已进仓库，修复成本翻倍。
- 必须集成进本地开发流程：VS Code 安装
HTMLHint插件并启用tag-pair、element-permitted-content规则，保存即报错 - CI 中执行顺序不能晚于构建：Webpack/Vite 构建命令前加
npx html-validate src/**/*.html，失败直接中断 -
element-permitted-content规则要自定义：比如"p": ["#text", "br", "span", "em"]，否则默认宽松策略形同虚设 - 别依赖 VS Code 缩进视觉判断——
<p><div>xxx</div></p>在编辑器里看着正常，Elements 面板里实际是三个同级节点
Vite/Webpack 打包 HTML 时路径与注入逻辑极易污染结构
html-webpack-plugin 或 vite-plugin-html 的配置偏差，会导致 <script> 被插到非法位置（比如 <head> 里塞了 <main> 开头的模块），或者 innerHTML 替换破坏已有事件绑定，间接引发结构断裂。
- 动态插入模块优先用
insertAdjacentHTML('beforeend', htmlStr)，禁用innerHTML—— 后者重置所有子节点，包括已绑定的addEventListener - Vite 中若用
vite-plugin-html注入变量，确保模板中写法是<%= VITE_API_BASE %>，而非错误地写成%VITE_API_BASE%导致字符串残留 - Webpack 下
html-loader处理含<script type="module">的片段时，会把import当普通字符串，造成运行时ReferenceError: require is not defined - 多页应用必须为每个页面配独立
HtmlWebpackPlugin实例，并显式指定chunks，否则 login 页面加载 dashboard 的 JS，可能触发非预期的 DOM 操作
首屏 HTML 模块化拆分必须服从文档流，不能靠 CSS 伪装
所谓“模块化”不是给 <section> 套一层 <div class="module"> 就完事。一旦用 position: absolute 或 display: contents 包裹，语义就丢了——屏幕阅读器跳过、:focus-within 失效、tabindex 顺序错乱。
立即学习“前端免费学习笔记（深入）”；
- 模块边界必须用原生语义标签：
<header>、<nav>、<main>、<aside>、<footer>，它们天然具备文档流行为和可访问性支持 - 禁止在模块根节点设
float或position: absolute—— 这会让它脱离流，后续模块布局上下文全乱 - SSR 场景下
<table><tr><td>A</td></tr></table>服务端没补<tbody>，但浏览器会自动加，导致document.querySelector('table').tBodies[0]在客户端为undefined - Critical CSS 必须内联到
<style>，否则即使<link rel="stylesheet">放在<body>底部，CSSOM 构建仍阻塞首屏渲染
真正难的不是发现错误，而是让错误在代码写下的那一刻就被拦住。html-validate 的规则配置、构建插件的注入时机、语义标签的强制使用——这三件事必须咬死在编码和构建链条最前端，任何延迟都会让问题沉淀为线上 DOM 偏移或 JS 逻辑失效。
