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