html代码质量需三重自动化监控：静态用html-validate做ci/cd检查，运行时用puppeteer+cheerio校验真实dom，合规性用封装w3c验证器；统一问题定义比工具堆砌更重要。
HTML代码质量网格不是靠堆工具实现的，而是靠三类校验在不同阶段精准卡点：静态扫描管源码、运行时校验管终态、W3C封装管合规底线。自动纠错仅限语法补全（如闭合标签、引号），语义错误（如alt内容空泛、lang值错配）必须人工介入。
html-validate 为什么比 HTMLHint 更适合作为 CI 主力校验器
html-validate 支持 JSON Schema 级别规则配置，能按业务场景动态开关，比如只对 src/ 下模板启用 img-req-alt，对 dist/ 下产物禁用 document-title-missing；HTMLHint 的 .htmlhintrc 是扁平结构，无法做路径级条件覆盖。
- CI 中执行
npx html-validate --config .htmlvalidate.json --max-warnings 0 src/**/*.html，失败时退出码非 0，天然阻断流程 - 默认规则太松，必须手动收紧：
"no-inline-style": true防止 class 与 style 混写，"head-valid-content-model": true拦截<script></script>错放外 - 遇到框架指令（如
v-if、x-data）报 unknown attribute，不是 bug，要在rules里加"attr-unknown": ["error", { "ignore": ["v-if", "x-data"] }] - 别用
**/*.html全局匹配——它会扫node_modules和dist，内存溢出或超时常见；明确写src/templates/**/*.html或public/*.html
pre-commit 钩子里怎么只校验暂存区 HTML 文件
pre-commit 不该跑全量扫描，否则每次 git add 都卡顿。核心是只取当前暂存区里被修改的 HTML 路径，再喂给校验器。
- 用
git diff --cached --name-only --diff-filter=ACM -- '*.html' '*.htm'提取变更文件列表 - 配合
html-validate --format json --quiet输出机器可读结果，成功时不打印任何内容，失败才吐错误 - 禁止在钩子里调
prettier --write自动改 HTML：它会重排属性顺序、缩进层级，引发无意义 diff，只用--check做阻断 - 若提取不到 HTML 文件（比如这次 commit 只改了 JS），命令应静默通过，不报错也不中断提交
Puppeteer + cheerio 怎么验证上线后真实 DOM 结构
静态扫描看不到 SSR 渲染后、JS 水合（hydration）完成的真实 HTML，必须启动浏览器拿到 page.content() 再解析。
- 关键不是截图，是
await page.goto(url, { timeout: 15000 })后执行const html = await page.content()，再用cheerio.load(html) - 检查前先设视口：
await page.setViewport({ width: 1920, height: 1080 })，否则媒体查询不触发，<meta name="viewport">校验会误报 - 含登录态页面必须注入 cookie：
await page.setCookie(...cookies)，否则拿到的是 403 页面源码，所有校验失效 - 资源路径校验要小心：
img[src]属性值可能是相对路径，但page.content()返回的是纯 HTML 字符串，需结合页面 base URL 手动拼接请求验证
W3C 验证器为什么不能裸用，该怎么封装
直连 https://validator.w3.org/nu/ 在 CI 中不可靠：有频率限制、响应慢、JSON 结构嵌套深，且不支持本地缓存和重试策略。
- 推荐用
w3c-validator-cli封装层，它内置 3 次重试、5 秒超时、本地缓存机制，命令形如npx w3c-validator-cli --file dist/index.html --output json - 校验前预处理 HTML：移除注释、压缩空白、过滤
data-testid等测试属性（它们合法但 W3C 会标 warning） - 别把 W3C 当“最终判决”：它对现代框架输出容忍度低，比如 Vue 的
<template></template>块会被标 error，实际不影响运行——应只将 W3C 结果作为兜底告警项，而非阻断项 - CI 中建议加
--max-errors 0 --max-warnings 5，允许少量 warning（如 obsolete-doctype），但零 error 是硬线
真正难的不是让工具跑起来，而是定义哪些规则必须失败、哪些可以忽略、哪些只告警不阻断——这些边界得贴着业务走，比如微前端子应用的入口 HTML 不需要 <title></title>，但主应用首页必须有且唯一；同一套 .htmlvalidate.json 很难通吃所有场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
