HTML质量差是线上事故预警信号，因innerHTML绕过验证导致可访问性、SEO、测试及JS功能失效；需用insertAdjacentHTML、DOMParser预检、禁用危险API，并通过ESLint插件、html-validate和自动化脚本协同治理。
HTML 代码质量差，不是“看着不爽”的问题，而是直接导致可访问性失败、SEO 掉量、自动化测试 flaky、甚至部分 JS 功能在特定浏览器下静默失效——这不是重构冲动，是线上事故预警信号。
为什么 innerHTML 赋值会绕过 HTML 验证规则
很多团队把 HTML 质量问题归咎于“前端太随意”，但真实瓶颈常藏在动态渲染环节：innerHTML 直接插入字符串，跳过浏览器的 HTML 解析校验流程，连缺失闭合标签、非法嵌套（如 <div><p><span><div></div></span></p></div>）都不会报错，只默默修复成 DOM 树。结果是：开发时看不出问题，但 screen reader 读错结构、document.querySelector('main article') 匹配不到预期节点、Lighthouse 的 aria-* 检查直接挂零。
- 用
insertAdjacentHTML()替代innerHTML，它同样接受字符串，但行为更可控，且便于统一拦截做 lint - 所有模板字符串拼接必须走
DOMParser().parseFromString(htmlStr, 'text/html')做预检，捕获parsererror节点并抛出明确错误 - 禁用
v-html（Vue）、dangerouslySetInnerHTML（React）等直插 API，改用组件化封装 +textContent/setAttribute组合
如何让 ESLint 真正管住 HTML 结构问题
ESLint 默认不看 HTML，靠 eslint-plugin-html 或 eslint-plugin-vue 插件解析模板，但默认配置几乎不检查结构性缺陷。比如 <button><div>点击</div></button> 在 Vue SFC 中完全通过，实际违反了 W3C 对 <button> 的内容模型约束（不允许块级元素），会导致部分 Android WebView 点击区域异常。
- 启用
vue/valid-v-html（Vue）或react/no-danger（React），并配合自定义 rule：用正则或 AST 分析检测非法嵌套（例如匹配<button>.*<div>类模式） - 在
.eslintrc.js中加入settings: { 'html/elements': { 'button': ['phrasing-content'] } }，联动插件做语义校验 - CI 流程中加一道
npx html-validate --config .htmlvalidate.json src/**/*.vue，用独立工具补漏，比 ESLint 插件覆盖更全
自动化修复脚本该处理哪些典型坏味道
人工修千行 HTML 不现实，但 80% 的低级问题有固定模式：自闭合标签写成 <br>（缺斜杠）、属性值不加引号、<img> 缺 alt、<a> 缺 href。这些不能靠 prettier，得用专用工具链。
立即学习“前端免费学习笔记（深入）”；
- 用
htmlnano（非压缩向）开启removeOptionalTags: false+collapseWhitespace: false，只启用minifyAttributes和removeEmptyAttributes，避免误伤可读性 - 写一个
fix-missing-alt.js脚本：用cheerio加载 HTML，查找所有img:not([alt])，自动注入alt=""并标记 TODO 注释（<!-- TODO: add meaningful alt -->） - 禁止全局替换
<div class=header>→<div class="header">，先用grep -r "class=[^\"']" src/定位，再人工确认是否含空格或特殊字符，否则可能破坏 CSS 选择器
最麻烦的不是发现 <table> 里塞了 <section>，而是这个 table 同时被三处 JS 直接操作 DOM、两套后端模板引擎生成、还有一段老式 jQuery 插件依赖它的结构——HTML 质量从来不是单点问题，修复动作必须同步更新对应 JS 选择器、CSS 作用域和测试用例断言。没这层协同，修完一行，破三处。
