如何通过HTML的htmlhint工具检查HTML文件的标签闭合和属性规范
htmlhint 是一个可集成到编辑器或命令行的静态 html 检查工具，主要检测标签闭合、属性拼写、引号缺失、嵌套错误、doctype 缺失等低级语法问题，但不校验语义、可访问性，也不模拟 dom 修复。
htmlhint 是什么，它能查哪些问题
htmlhint 不是浏览器内置工具，也不是 W3C 验证器的替代品，而是一个可集成进编辑器或命令行的静态检查器。它主要检查标签闭合、属性拼写、引号缺失、嵌套错误、DOCTYPE 缺失等——但不校验语义或可访问性，也不做 DOM 修复模拟。
它默认不启用所有规则，比如 attr-lowercase（属性名小写）、attr-validate（属性值是否合法）、tag-pair（标签是否成对）这些关键项都得手动打开，否则等于没开检查。
VS Code 中启用 htmlhint 并配置 tag-pair 和 attr-lowercase
装完 HTMLHint 插件后，仅靠默认设置几乎不报错。必须在工作区根目录加 .htmlhintrc 文件，并显式开启核心规则：
{
"tag-pair": true,
"attr-lowercase": true,
"attr-validate": true,
"attr-no-duplication": true,
"id-unique": true,
"src-not-empty": true
}
几个关键点：
-
tag-pair 能捕获 <div>
<p> 没闭合 <code> 或
的情况，但对自闭合标签如
<img> 不强制要求斜杠（HTML5 允许）
attr-lowercase 会标红 CLASS="foo" 或 HREF="#" —— 浏览器虽兼容，但 W3C 标准和 Lighthouse 审计都要求小写
别依赖插件自带的“自动修复”：它只改小写、补引号，不会帮你补漏掉的 命令行批量检查整个项目里的 HTML 文件
用 npx htmlhint 可以扫本地所有 *.html，比手动点开每个文件快得多：
Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
npx htmlhint src/**/*.html --config .htmlhintrc
常见陷阱：
<div>
<p>hello</p>
<div>world</div>
<p>htmlhint 可能只报一个 <code>tag-pair</code> 错误，而 W3C Validator 会明确指出 <code>End tag div does not match the start tag p</code>，并定位嵌套断裂点。</p>
<p>真正容易被忽略的是：htmlhint 不检查 <code>lang</code>、<code>alt</code>、<code>title</code> 是否缺失，也不提醒 DOCTYPE 错误或字符编码声明位置不对——这些必须交由 W3C 工具或 Lighthouse 补全。</p>
</div>
