HTML文档结构闭合异常引发网页布局错乱全场景排查
浏览器elements面板可直接识别未闭合标签：一看footer误入header等异常嵌套，二看节点边缘红色/灰色提示，三看edit as html后结构跳变，四查table/ul/ol内非法子元素导致的dom失真。
浏览器 Elements 面板一眼识别未闭合标签
别翻源码，直接看渲染后的 DOM 树——这才是浏览器真正执行的结构。打开 DevTools（F12），切到 Elements 面板，重点盯三类信号：
- 某个
<div> 展开后，内部突然多出一个本不该在那里的父级（比如 <code><footer></footer> 出现在 <header></header> 里）
- 节点边缘出现红色高亮或灰色半透明提示（Chrome/Edge 对非法嵌套的实时标记）
- 右键 →
Edit as HTML 改一行，整个结构“跳变”（说明原始 HTML 已被浏览器强行修复过）
特别注意：<table>、<code><ul></ul>、<ol></ol> 内部只接受特定子标签（如 <tr>、<code><li>），塞进 <div> 或 <code><p></p> 会立刻触发重排，DOM 树失真。
VS Code 中防漏闭合的关键配置
靠肉眼扫 <div>
<p>… 极易漏，编辑器得配对用。关键不是装一堆插件，而是开对三项：</p>
<ul>
<li>装 <code>Auto Close Tag（不是 Auto Rename Tag），它会在你敲 <div> 回车时自动补 <code>
，漏了立刻可见
开启 html.suggest.html5，确保补全建议符合 HTML5 规范
配合 emeraldwalk.runonsave + tidy-html5 命令，保存时自动格式化并报错未闭合节点
Prettier 默认不报未闭合错误；即使加了 htmlWhitespaceSensitivity: 'strict'，也只管空格，不管结构。
W3C Validator 和 jsdom 验证逻辑差异
本地开发用 W3C 在线校验器最快，但生产环境或 CI 流程中必须用程序化校验。两者逻辑不同：
-
W3C Markup Validation Service 是规范级检查：标出所有 start tag not closed、end tag for element X omitted 等明确违反标准的问题
-
jsdom（Node.js 环境）或 Jsoup（Java）是解析级检查：它们构建真实 DOM 树，能发现浏览器实际如何“纠错”，比如 <div><p>text</p></div> 被重排成两个独立块
Java 示例中用 Jsoup.parse(html) 后遍历 doc.getAllElements() 并检查 outerHtml().endsWith("/>")，只能捕获自闭合标签写法问题，对普通块级标签遗漏闭合无能为力——得靠 doc.body().html() 对比原始字符串长度突变来间接判断。
修复后页面仍错位？问题常不在你改的那一行
一个未闭合的 <div> 可能导致后续几百行 HTML 全部被错误包裹。修复时容易陷入局部思维：
<ul>
<li>看到 <code><footer></footer> 跑进 <header></header>，第一反应是去修 <header></header> 末尾，其实问题可能出在前面第 3 个 <section></section> 漏了
用 document.querySelectorAll('*').length 查 DOM 节点数，如果远高于预期（比如源码只有 200 行，却生成了 800+ 节点），大概率是闭合链断裂
修改前先 console.log(document.body.innerHTML)，和源码逐段比对，多出来的 
