tidy-html5可修复HTML非法嵌套与闭合问题，htmlhint用于批量扫描规则类缺陷，vnu则按W3C标准验证合规性；三者串联实现检测→修复→验证闭环，但语义权衡仍需人工判断。
用 tidy-html5 修复标签嵌套与闭合问题
大多数历史 HTML 文件的硬伤是非法嵌套和漏闭合，比如
content
tidy-html5 能在不改语义的前提下重写 DOM 树，把这类问题“悄悄修好”。实操建议：
- 先用
tidy -f errors.txt -e index.html只做诊断，不修改文件，把错误输出到errors.txt快速摸清问题分布 - 真正修复时加
-m（modify in-place）和-w（wrap lines）：tidy -m -w -indent -wrap 120 index.html - 注意
-indent会重排缩进，若团队已有统一缩进风格，建议搭配--indent-spaces 2显式指定空格数 - 对含内联 JS 或 CSS 的 HTML，加
--keep-blank-lines yes避免压缩掉空行导致逻辑错位
用 htmlhint 批量扫描并定位规则类缺陷
htmlhint 不修代码，但能精准告诉你哪一行违反了哪条规则，适合在修复前做“问题测绘”。它比在线校验器快，且支持 glob 匹配，一次扫整个 src/pages/ 目录。
实操建议：
- 初始化配置：运行
htmlhint --init生成默认.htmlhintrc，再手动打开删掉你不关心的规则（比如attr-no-duplication在老项目里可能误报） - 批量检查：
htmlhint "**/*.html" --reporter=unix输出格式适配 CI 日志，每行带文件名+行号+错误描述 - 关键陷阱：默认配置里
head-valid-content-model会拒绝放在 - 若项目混用 Vue/JSX 模板，加
--ext .html,.vue扩展扫描范围，否则只认.html
用 vnu（Nu Html Checker）验证修复后是否真合规
tidy 和 htmlhint 是“尽力而为”，但只有 vnu 能按 W3C 官方解析器标准判定是否合法。它不修复，但能告诉你：你自以为修好的文件，其实还在被 Chrome 静默降级处理。
实操建议：
- 本地验证单文件：
npx vnu --format json index.html，JSON 输出方便脚本解析失败项 - 验证整个目录：
npx vnu --format json src/**/*.html，注意 shell 通配符展开限制，大项目建议用--filterfile列白名单 - 常见漏网之鱼：
tidy留着不修，但vnu会报Attribute “alt” is missing a required value；必须补成 - 若页面含服务端模板语法（如
），vnu会当真实标签报错，需提前用--skip-non-html或预处理移除
自动化串联三工具的最小可行脚本
别手动跑三次命令。一个 shell 脚本就能串起检测→修复→验证闭环，尤其适合 nightly job 或 pre-commit。
实操建议：
- 先装依赖：
npm install -g htmlhint vnu-jar，tidy-html5单独从官网下载二进制或brew install tidy-html5 - 写脚本核心逻辑：先
htmlhint扫出高危项（如tag-pair、id-unique），再用tidy -m批量修，最后vnu断言无 ERROR 级错误 - 关键细节：
vnu返回非零码表示有错误，但 WARNING 不影响 exit code——若你要严格卡死所有 warning，得加--Werror - 历史项目常有 GBK 编码文件，
tidy默认 UTF-8，得显式加--input-encoding gbk --output-encoding utf8，否则乱码变新 bug
真正难的不是工具调用，而是判断哪些“错误”其实是业务必需的妥协——比如某些老页面依赖 标签渲染，强行转成 CSS 会破 UI。工具只能修语法，语义权衡还得人来拍板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
