非标准嵌套不会报错但导致DOM解析不一致：浏览器解析时遇<div>会立即隐式闭合<p>，生成<p></p><div>；而SSR直接输出<p><div>，hydration时节点树不匹配，触发React/Vue hydration失败。
非标准嵌套不会报错，但会导致 DOM 结构在不同环境（服务端渲染、客户端 hydration、不同浏览器）中解析不一致——这不是“看起来差不多”，而是真实节点树被浏览器强制重排，后续 JS 操作和 CSS 选择器都可能失效。
为什么 <p><div></div></p> 在 Chrome 里结构对，但在 React hydrate 时出问题</H3>
<p>浏览器解析时，<code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a>
<p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 遇到 <code><div> 会立刻隐式闭合自己，生成 <code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div></div>；但服务端模板（如 SSR）若直接输出该字符串，React hydrate 时对比 DOM 树会发现首节点是 <code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>，而预期是 <code><p><div></div></p>，从而放弃 hydration 或触发全量重绘。</p>
<ul>
<li><code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> 是格式化元素，规范禁止它包含块级标签，所有主流解析器（Chrome/Firefox/Safari/IE）都按同一规则处理：先闭合 <code><p></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>，再开 <code><div></div></li>
<li>React/Vue 的 SSR 输出若未经过 HTML 验证，就直接拼接字符串，hydration 时的 DOM 必然与 VDOM 不匹配</li>
<li>Vue 的 <code>v-html、React 的 dangerouslySetInnerHTML 同样走原生解析流程，框架不干预容错逻辑
如何用 DevTools 快速定位非法嵌套位置
靠肉眼扫 HTML 几乎无效，真正有效的是观察浏览器实际构建的 DOM 树：
- 在 Chrome Elements 面板右键任意节点 → “Edit as HTML”，随便改一个字符再回车：如果节点层级突然跳变（比如某个
<div> 被移到外面），说明原始嵌套不合法</li> <li>运行 <code>document.querySelectorAll('*').forEach(el => { if (!el.parentElement) console.log('孤立元素:', el) })，输出的节点就是被浏览器“踢出来”的非法子元素 - VSC 安装
HTMLHint插件，并启用attr-validate和doctype-first规则，保存时实时标红（例如<ul><div></div></ul>会被标记为错误）
<table><tr><td></td></tr></table> 漏 <code><tbody> 为什么有时正常、有时错位</H3>
<p>浏览器必须补 <code><tbody>，但补的位置固定在 <code><table> 下第一层；一旦你混入 <code><thead> 或 <code><tfoot>，顺序就决定补的位置是否符合预期：</p>
<ul>
<li><code><table><tr><td></td></tr></table>
→ 补为 <table><tbody><tr><td></td></tr></tbody></table>
<table>
<thead><tr><th></th></tr></thead>
<tr><td></td></tr>
</table> → 第二个 <tr> 会被塞进自动生成的 <code><tbody>，哪怕你没写，且 <code><tbody> 必定在 <code><thead> 之后
<li>Firefox 和 Safari 对 <code><colgroup> 处理更严格，漏写或位置错会导致整列样式丢失；Chrome 则可能容忍但布局偏移</colgroup>
最隐蔽的问题不是标签没闭合，而是闭合顺序和父/子关系违反了 HTML Living Standard 的内容模型——比如把 <button> 放进 <code><a>，或者用 <code><span> 包 <code><h2>。这些错误在开发机上看不出异样，一上生产环境，尤其配合 SSR 或 SEO 抓取，DOM 就会分裂成两套结构。</h2>
