推荐W3C Nu Validator（在线）和html-validate（Node.js）；常见错误包括属性值未加引号、布尔属性重复赋值、脚本内容未转义、多余空格等；VS Code需启用相关验证设置并配置语言服务器；校验器不检测路径有效性、CSP策略或服务端模板语法。
HTML 语法校验该用什么工具
浏览器开发者工具的 Elements 面板只显示渲染后的 DOM，不报原始 HTML 语法错误；真正能发现 <div> 没闭合、<img> 多了等号、属性值没引号这类问题的，得靠专门的校验器。
推荐两个轻量可靠的方案：
-
validator.w3.org/nu/（W3C Nu Validator）：在线免费，支持上传文件、粘贴代码、输入 URL，校验严格，会明确指出Bad value “” for attribute “src”这类细节 -
html-validate（Node.js 工具）：适合集成进项目，支持配置规则（比如强制双引号、禁止内联样式），CI 中可自动拦截不合规 HTML
常见 HTML 校验失败原因与修复方式
校验器报错往往不是“写错了”，而是写法模糊或过时。下面这些是高频触发点：
-
<img src=logo.png>→ 缺少引号，应改为<img src="logo.png">（即使浏览器能渲染，校验器仍报Attribute value must be quoted） -
<input type="text" required="required">→ 布尔属性重复赋值，应简化为<input type="text" required> -
<script>console.log('x')</script>→ 若脚本内容含<或&，可能被误解析，建议外链或用<script type="application/javascript">显式声明 -
<div class="a b " >→ 末尾多余空格在某些校验模式下触发警告，删掉即可
VS Code 中实时校验 HTML 的配置要点
装了插件不等于自动生效，几个关键设置容易被忽略：
立即学习“前端免费学习笔记（深入）”；
- 启用
HTML › Validate: Scripts和HTML › Validate: Styles（默认关闭），否则<script>内 JS 错误不会提示 - 若项目用 Pug / JSX / Vue SFC，需额外安装对应语言服务器（如
volar或pug-lsp），否则校验只作用于纯.html文件 - 自定义 DOCTYPE（如
<!DOCTYPE html SYSTEM "custom.dtd">）会导致校验器退回到宽松模式，建议统一用标准<!DOCTYPE html>
为什么本地校验通过，线上却出问题
校验器只检查语法结构，不模拟运行环境。以下情况校验器完全不报错，但实际会失效：
-
<img src="/assets/logo.png">在本地file://协议下 404，校验器不管路径是否存在 -
<a href="javascript:void(0)" onclick="doSomething()">——javascript:伪协议和内联事件在现代安全策略（CSP）下可能被拦截，校验器不检测执行逻辑 - 服务端模板语法混在 HTML 中（如
<%= title %>或{% if user %}），校验器会当作非法标签报错，必须用注释包裹或禁用对应行校验
校验只是第一道防线，真实路径、CSP 策略、服务端输出逻辑，都得单独验证。
