Elements面板能实时显示浏览器解析后的DOM结构，灰色斜体节点、缩进断裂或孤立元素即暴露漏闭合、错嵌套等语法错误；其修复结果与源码不一致，需以DOM实际结构为准。
直接看 Elements 面板里的灰色节点
浏览器解析 HTML 时会自动修复语法错误，但修复结果会暴露在 Elements 面板里——灰色斜体的标签就是被“补全”或“截断”的证据。比如漏写 ，DOM 树末尾会出现一个字体发灰、无子节点的 div；又比如写了 <p></p>
<div>xxx</div>，浏览器会拆成 <p></p>
<div>xxx</div>，你在面板里能看到突兀断开的父子关系。
别信源码缩进，信 DOM 实际结构：右键父容器 → “Edit as HTML”，删一个字符再回车，如果整个子树重排，说明原始 HTML 已被修正过。此时 document.body.innerHTML 输出的内容，和你本地文件很可能不一致——多出来的
<section></section> 都是线索。
用 *{outline:1px solid red!important} 暴露错位元素
布局异常（如横向滚动、内容跑出容器、定位漂移）八成源于结构错误导致的 DOM 解析偏移，不是 CSS 写错了。先执行这行代码让所有元素带红边框：document.head.innerHTML += '<style>*{outline:1px solid red!important;background:rgba(255,0,0,0.05)!important;}</style>'
立即学习“前端免费学习笔记（深入）”；
outline 不影响盒模型，比 border 安全；它能立刻显形撑破父容器的 div、错嵌在 p 里的 div、或被浏览器自动包裹的孤立文本块。查完执行 document.querySelector('style').remove() 清除即可。
注意：如果页面太乱，缩小范围更有效，比如只标记 div { outline: 2px solid #0088ff !important; }。
htmlhint 命令行检查别跳过配置陷阱
htmlhint 能塞进 CI，但默认规则几乎不报错。必须手动开关键规则，否则像 href=https://a.b（缺引号）、<div></div>（大小写混用）这种问题全放过。
配置文件 .htmlhintrc 至少要包含："tagname-lowercase": true"attr-lowercase": true"attr-value-double-quotes": true
运行时注意路径问题：
• htmlhint *.html 不递归子目录，得用 htmlhint "**/*.html"（Shell 支持 glob）
• 遇到 End tag for element 'section' seen, but there were open elements. 这类提示，别急着补闭合标签——先去 Elements 面板确认是不是浏览器已帮你“修好”，真实问题可能在前面几十行。
VS Code 插件不能代替语义校验
Auto Close Tag 和 Highlight Matching Tag 只管配对，不管对不对。它会帮你补 ，但不会拦住你在 <p></p> 里放 <div>——这是 HTML5 明确禁止的嵌套，属于语义错误。
<p>确保右下角状态栏显示的是 <code>HTML 语言模式，否则高亮和提示全失效；如果文件后缀是 .tpl 或 .ftl，需在设置里加 "files.associations": {"*.tpl": "html"}。
拼写错误如 clas="btn" 插件通常不报，得靠 htmlhint 的 attr-name-lowercase 规则或人工扫——真正卡住人的，往往是多个小错误叠加后，浏览器把整个 DOM 树重排了，而你还在调单个 class。
