htmlhint能精准检测未闭合和嵌套错位标签，因其严格按html5语法树校验开闭数量与顺序；vscode中需开启html.format.indentinnerhtml才能使正确缩进于之下，避免层级扁平化。
HTMLHint 能直接定位未闭合、嵌套错位的标签，但默认配置下容易在 Vue/JSX 项目里误报；VSCode 自动格式化能解决缩进混乱，但 html.format.indentInnerHtml 开关不设对， 和 就会和 对齐——结构看起来扁平，实际层级丢失。
怎么用 HTMLHint 精准抓出漏闭合和嵌套错位
tag-pair 规则是 HTMLHint 默认启用的核心检查项，它不依赖浏览器渲染逻辑，而是严格按 HTML5 语法树比对开闭标签数量与嵌套顺序。遇到 <div><p>text</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="overflowclass">html-ppt-to-pdf</a>
<p class="overflowclass">将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a rel="nofollow" href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div> 这类错位，会明确报出 index.html:12:5: Tag must be paired.。
- 自闭合标签如
<img>、<input>不参与tag-pair校验，哪怕写成<img>或<img>都合法 - Vue 单文件组件中
<template></template>内的片段不是完整 HTML，必须在.htmlhintrc中显式关闭："tag-pair": false - 若只校验部分文件，命令行需加引号避免 shell 展开失败：
npx htmlhint "src/pages/*.html"
VSCode 缩进配置为什么总“看起来对、实际错”
很多人开了 editor.formatOnSave 却发现 没缩进，问题出在 html.format.indentInnerHtml 默认是 false。这个开关控制的是根元素内部是否额外缩进一层，设为 true 后， 下的 和 才会比 多缩进一个层级。
-
editor.tabSize设为2或4，统一空格数，禁用 Tab 键（防止不同编辑器显示错乱） - 如果项目混用 Pug 模板，VSCode 的 HTML 格式化会失效，应改用 Prettier +
prettier-plugin-pug - 复制粘贴的第三方代码常带混合缩进，建议保存前手动选中代码块，右键选 “Format Selection” 避免全局污染
属性值不加引号、大小写混用，为什么验证器报错而页面还能显示
浏览器有容错解析机制，<div class="header"> 或 <code><div class="header"> 都能渲染，但它们违反 HTML5 语法定义：属性名必须小写，属性值必须用引号包裹（单双皆可，但团队需统一）。
<ul><li>
<code>attr-lowercase 规则会把 <div> 当错误，哪怕只是调试临时写法
<li>
<code>attr-value-double-quotes 在 Vue 模板里极易冲突，比如 v-bind:class="{'active': isActive}" 中的单引号会被当成违规，此时应改用 "attr-value-quote-style": "double"（需 HTMLHint v1.0+）
data-config='{"key":"val"}'，双引号嵌套易出错，建议直接关闭该规则或改用 data-config='{"key":"val"}' 写法真正难的不是知道规则，而是判断什么时候该坚持、什么时候该绕开——比如在 JSX 文件里硬推 tag-pair，不如关掉它，把精力留给 ESLint 对 React 组件结构的检查。
