前端发布红线：构建阶段实现HTML代码质量静态审查阻断-html教程-PHP中文网

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

html-validate 必须在构建阶段前置执行以拦截 html 结构性错误，否则浏览器静默修正将导致 dom 行为异常且运行时无法修复；webpack 和 vite 均需在生产构建前集成校验，ci 中严禁忽略退出码，且须自定义 element-permitted-content 规则。

前端发布红线：构建阶段实现html代码质量静态审查阻断

构建阶段必须拦截 HTML 结构性错误，否则上线后 DOM 行为不可控——document.querySelector('p').children 返回空数组、table 渲染缺 tbody、img 闭合失败导致后续节点错位，全是浏览器静默修正惹的祸，运行时 JS 无法修复。

它不是 CI 后期“扫尾工具”，而是防止结构污染的第一道闸门。一旦错误 HTML 进入 dist 目录或仓库，修复成本指数级上升。

Webpack：在 webpack --mode production 前加 npx html-validate src/**/*.html --config .htmlvalidate.json，失败则中断构建
Vite：在 npm run build 脚本中前置执行 npx html-validate src/index.html src/pages/**/*.html
CI 中禁止用 || true 忽略 html-validate 退出码，否则等于没开

默认规则对 p、li、td 等容器过于宽松，放行 <p></p> <div>xxx</div>

这类非法嵌套，而浏览器会把它拆成三个同级节点：

<p></p>
<div>xxx</div>
<p></p>

。

在 .htmlvalidate.json 中显式声明："element-permitted-content": {"p": ["#text", "br", "span", "em", "strong"]}
对 li 禁止直接子元素为 div，只允许 ol/ul/div（需确认是否语义合理）
检查 table 是否强制要求 thead/tbody，避免仅靠 CSS 隐藏却未声明结构

插件自动注入 <script></script> 或变量时，若位置非法（比如插到里紧挨着 <main></main> 开头），会触发浏览器重排并破坏父子关系。

Vite 中模板变量写法必须是，写成 %VITE_API_BASE% 会导致字符串残留，被当作文本节点插入
Webpack 下若用 html-loader 处理含 <script type="module"></script> 的片段，import 会被当普通字符串，引发 ReferenceError: require is not defined
多页应用必须为每个页面配独立 HtmlWebpackPlugin 实例，并显式指定 chunks，否则 login 页面可能加载 dashboard 的 JS，触发非预期 DOM 操作

最易被忽略的是：VS Code 缩进视觉正常 ≠ 结构合法。<p></p> <div>xxx</div>

在编辑器里看着是嵌套，Elements 面板里实际是断裂的同级节点——这个差异只有在构建前用 html-validate + 自定义规则才能捕获。