html质量须强制卡在ci中：用html-validate拦截结构问题，eslint-plugin-jsx-a11y统一校验aria，axe-core扫描构建产物，并绑定失败责任人。
HTML 代码质量不能靠人工抽检，必须卡在 CI 流水线里——否则每次 PR 合并都在悄悄埋雷。
用 html-validate 在 CI 中拦截基础结构问题
它比 tidy 或浏览器 DevTools 的 Linter 更适合工程化：支持自定义规则、可输出 JSON/CI 友好格式、能和 jest 或 prettier 共存。不推荐用 W3C Validator API，响应慢、不稳定、无本地缓存。
- 在
package.json里加脚本："validate:html": "html-validate --config .htmlvalidate.json src/**/*.html" -
.htmlvalidate.json至少启用："no-duplicate-attributes"、"no-obsolete-element"、"require-sri"（对<script></script>和<link>） - CI 脚本中确保安装了
html-validate@7+（v6 不支持 ESM，v7+ 默认启用eslint-plugin-html兼容模式）
把 ARIA 属性校验塞进 eslint 流程，而不是单独跑一遍
单独维护一套 ARIA 检查工具会掉队——新组件、新 Hook、JSX 动态属性都容易漏检。直接用 eslint-plugin-jsx-a11y，它能在 eslint --ext .jsx,.tsx 时一并扫到 HTML 片段。
- 启用关键规则：
jsx-a11y/alt-text（<img>缺alt）、jsx-a11y/heading-has-content、jsx-a11y/no-noninteractive-tabindex - 对
next/head或react-helmet等动态注入的<title></title>、<meta>，需配合eslint-plugin-react-hooks检查依赖数组是否遗漏 - 禁用
jsx-a11y/anchor-is-valid（它误报率高），改用html-validate的require-valid-alt补位
构建产物 HTML 必须过 axe-core 自动扫描，不是只测开发环境
开发时看到的 DOM 和构建后的真实 HTML 常有差异：服务端渲染脱敏、CDN 注入脚本、html-webpack-plugin 插件模板变量展开失败……这些只有在 dist/ 目录下运行 axe 才能暴露。
- CI 中增加步骤：
npx axe-cli dist/index.html --rules 'region,landmark-one-main,heading-order' --exit-on-error - 避免用
axe-playwright或axe-puppeteer：它们依赖浏览器启动，慢且易因资源加载超时误报；静态 HTML 扫描足够覆盖语义结构类问题 - 若项目含多语言
index.html（如dist/en/index.html、dist/zh/index.html），需遍历所有路径，不能只扫根目录
别让「通过」变成幻觉：HTML 校验必须绑定具体修复人 + 失败不可跳过
很多团队把校验设成 warning 级别，或允许 --skip-html-check 参数，等于没卡。真正生效的前提是：失败即阻断，且错误信息能定位到人。
- 在
html-validate配置中开启"output": "json"，再用简单脚本提取error.message和error.source，按文件名匹配 Git Blame 结果，自动 @ 最近修改者 - 禁止在 CI 配置中使用
|| true或set +e掩盖失败 - 对历史遗留问题，用
"ignore": ["src/legacy/**/*.html"]显式排除，而非全局降级规则等级
最常被绕过的其实是构建产物扫描——因为要先 npm run build 再扫，很多人嫌慢就删了这步。但 SSR 页面的 aria-hidden 错位、data-testid 残留、dangerouslySetInnerHTML 引发的未转义文本，全藏在 dist/ 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
