浏览器解析HTML时会自动补全缺失标签（如tbody、head、body等）并修复非法嵌套（如div在p内），该行为遵循HTML规范、发生在解析阶段、不可禁用，影响DOM结构与JS/CSS逻辑。
浏览器解析 HTML 时会自动补全缺失标签
源码里写 <table><tr><td>1</td></tr></table>，但开发者工具里看到的 DOM 树里多出了 <tbody>——这不是你代码错了，是浏览器在解析阶段主动插入的。HTML 规范允许省略 <tbody>，但浏览器必须把它补上才能构建合法表格结构。
常见被自动补全的还有：<head>、<body>、<colgroup>（表格列）、<optgroup>（下拉分组）等。补全逻辑由 HTML 解析器按规范执行，不同浏览器基本一致，但细节可能略有差异。
- 补全发生在 HTML 解析阶段，不是 JS 运行时，所以
document.innerHTML返回的已是修复后的结果 - 用
document.documentElement.outerHTML看到的也是修复后版本，无法还原原始输入 - 服务端渲染或 SSR 框架若依赖“原始字符串一致性”，需注意这个行为不可绕过
嵌套错误标签会被重排甚至丢弃
写 <div><p><div>content</div></p></div>，浏览器不会保留你写的嵌套结构。因为 <p> 是“短语级”元素，规范禁止它包含块级元素，解析器会把内部 <div> 提升到 <p> 外面，最终 DOM 可能变成：<div><p>content</p><div>content</div></div>。
这类修复常导致样式错乱、JS 查询不到预期节点、或者事件委托失效。
-
<div>不能直接放在<p>、<h1>~<h6>、<span>内部 -
<li>必须是<ul>或<ol>的直接子元素，否则会被移到列表外 - 使用
innerHTML = '...'赋值时也会触发同样修复，不是只发生在初始加载
自定义标签或未注册的 Web Component 不会被修复，但可能被忽略
写 <my-button>click me</my-button>，如果没调用 customElements.define()，浏览器不会报错，也不会自动补任何父容器——它就当普通未知元素处理，仅保留为一个空的 HTMLUnknownElement 实例，样式和布局行为取决于 CSS 是否匹配 my-button 选择器。
但如果误写成 <my-button><div>xxx</div></my-button>，而该组件模板要求只接受文本节点，那问题就出在 JS 层逻辑，浏览器本身不会干预。
- 浏览器只对标准 HTML 元素执行修复；对自定义标签完全“放任”
-
is="..."语法（如<button is="my-button">）同样不触发修复，且需提前定义 - Shadow DOM 内部的 HTML 同样受解析修复影响，不是隔离区
想对比源码和渲染结果？别信 innerHTML，用 responseText 或 fetch 原始响应
document.body.innerHTML 显示的是已修复、已标准化的 DOM 序列化结果，和原始 HTML 字符串几乎必然不一致。要真比对，得从网络层面抓原始响应体。
- Chrome DevTools 的 “Network → Response” 标签页里能看到服务器返回的原始字节
- 用
fetch()拿到response.text()，和你本地文件内容做字符串比对才可靠 -
document.doctype和document.documentURI也受解析影响，不能用于溯源
修复机制本身不可禁用，也不该试图绕过——它是浏览器保障基础兼容性的必要环节。真正该警惕的，是把“渲染后结构”当“源码结构”来写 CSS 选择器或 JS 查询逻辑。
