W3C Validator 适合上线前最后一道HTML合规性把关，严格按HTML5规范校验语法和结构，如嵌套错误、缺失alt、charset大小写等，报错带行号和规范引用，但不检查资源有效性、不解析JS、不兼容模板语法。
W3C Validator 适合什么场景
它只做一件事：严格按 HTML5 规范校验语法和结构。如果你需要确认代码是否“合法”，比如 <div> 是否被错误地放在 <p> 里、<img> 缺少 alt 值、meta 的 charset 写成 utf8 而不是 UTF-8，W3C 是唯一能给出明确标准依据的工具。
但注意：validator.w3.org/nu/ 不检查路径是否存在、不验证图片是否真能加载、不关心你用的是 Vue 还是 React 模板语法——它只看原始 HTML 字符串。所以它适合上线前最后一道合规性把关，不适合日常开发中的快速反馈。
- 上传文件或粘贴代码即可运行，无需安装
- 报错带行号和规范引用（如 “The element div must not appear as a descendant of p”）
- 遇到
<%= title %>或<slot>这类非原生标签会直接报错，需用<!-- htmlhint disable -->注释包裹或改用其他工具
HTMLHint 怎么配才不踩坑
HTMLHint 是为工程化流程设计的，核心价值在于可配置、可集成、可禁用局部规则。但默认配置容易误伤——比如 tag-pair 规则会把 <img> 当作未闭合标签报错（在 HTML5 中它是合法自闭合标签），而 id-unique 在 SSR 场景下可能因服务端与客户端重复渲染 ID 导致误报。
推荐从最小可用配置起步：
立即学习“前端免费学习笔记（深入）”；
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"attr-no-duplication": true,
"html-lang-require": true,
"title-require": true
}-
attr-value-double-quotes强制双引号，避免src=logo.png被 W3C 报错 - 禁用
tag-pair或仅对非自闭合标签启用（HTMLHint 不支持细粒度控制，只能整体开关） - 若项目含 Vue/React 组件，务必在
.htmlhintrc中加"files": ["**/*.html", "!**/*.vue"]，否则会扫描 SFC 文件并大量报错 - VS Code 中装了插件但没效果？检查设置里是否启用了
html.validate.scripts和html.validate.styles
HTMLProofer 用来查什么
它不看语法，只看资源有效性。适合静态站构建后、CI 流程中跑一次：所有 href 链接是否 404、src 图片是否真实存在、script 和 link 的路径是否拼错、甚至 Markdown 渲染出的 HTML 是否含坏链。
典型命令：
htmlproofer ./public --check-html --disable-external --only-4xx
-
--check-html是开关，必须加，否则只查链接不校验 HTML 结构 -
--disable-external跳过外链检测，避免因第三方服务临时不可用导致 CI 失败 - 它不会告诉你
<div>没闭合，但会告诉你<img src="missing.jpg">加载失败 - 对本地
file://协议无效，必须先生成真实文件目录再运行
本地开发时怎么选工具组合
单靠一个工具解决不了全部问题。W3C 太重，HTMLHint 规则太泛，HTMLProofer 又太晚——真正高效的组合是分层使用：
- 编码时：VS Code +
html-validate插件（比 HTMLHint 更现代，支持 ESLint 风格配置，且对模板语法更友好） - 提交前：
htmlhint跑一遍src/**/*.html，配合.htmlhintrc控制团队基础规范 - 构建后：
htmlproofer扫./dist目录，拦截资源路径错误 - 上线前：手动丢进
validator.w3.org/nu/过一遍，尤其关注 SEO 和无障碍相关项（lang、alt、title）
最容易被忽略的一点：所有工具都依赖原始 HTML 字符串。如果构建流程里用了模板引擎、服务端注入或动态生成，那校验结果可能和最终浏览器看到的 DOM 完全不同——得先确认你校验的是哪一层输出。
