浏览器Elements面板可一眼识别未闭合标签：一看footer误入header等异常嵌套，二看节点边缘红色/灰色提示，三看Edit as HTML后结构跳变，四查table/ul/ol内非法子元素导致DOM失真。

浏览器 Elements 面板里怎么一眼看出标签没闭合

别翻源码，直接看渲染后的 DOM 树——那是浏览器真正执行的结构。打开 DevTools（F12），切到 Elements 面板，盯住三类信号：

• 某个 div 展开后，内部突然多出一个本不该在那里的父级（比如 footer 出现在 header 里）
• 节点边缘出现红色高亮或灰色半透明提示（Chrome/Edge 对非法嵌套的视觉标记）
• 右键 → Edit as HTML 改一行，整个结构“跳变”（说明原始结构已被浏览器强行修复过）

特别注意：table、ul、ol 内部只接受特定子标签（如 tr、li），塞进 div 或 p 会直接触发重排，DOM 树立刻失真。

HTMLHint 怎么精准报出未闭合位置

tag-pair 规则是 HTMLHint 默认启用的核心检查项，它不依赖浏览器“猜补”，而是按标准解析源码，直接定位漏写 的行号和列号。错误示例输出：index.html:12:5: Tag must be paired.

• 默认开启，无需额外配置；但文件必须有合法 声明，否则插件可能静默失效
• 对自闭合标签（如 <img alt="HTML网页编辑中标签闭合错误的检查方法" >、<input>）不校验斜杠，只关心“有开无闭”或“闭多于开”
• 若项目混用 Pug 或 JSX 模板，建议在 .htmlhintrc 中临时禁用："tag-pair": false，否则会误报

VS Code 编辑器里如何实时拦截漏闭合

靠肉眼盯 <div> <code><p></p> 容易漏，编辑器得配对用。关键不是装一堆插件，而是开对三项：

立即学习“前端免费学习笔记（深入）”；

• 装 Auto Close Tag（不是 Auto Rename Tag），它会在你敲 <div> 回车时自动补 <code>