HTML嵌套出错主因是违反内容模型：内禁嵌块级元素，void标签不可闭合，需等中间层；浏览器会静默修复导致结构异常。
HTML 嵌套出错，90% 是因为没遵循元素的 content model（内容模型）——不是“能写进去就合法”，而是浏览器按规范校验后会自动修复、甚至打断结构，导致样式错乱或 JS 选不到元素。
哪些标签绝对不能嵌套在
里面
文字 实际被解析为： 立即学习“前端免费学习笔记（深入）”； 文字 像 是合法的（XML 风格），但写成： 会导致浏览器把 稳妥做法：显式写出 人工检查容易漏，尤其模板拼接或 CMS 输出的 HTML。两个低成本验证方式： 真正麻烦的不是嵌套本身，而是浏览器静默修正后留下的“看起来正常、实则结构已变”的情况。查问题时先看 Elements 面板里的实际 DOM 树，而不是你写的源码。 是“短语级容器”，W3C 明确禁止在其内部嵌套块级元素（如 、 等）。浏览器遇到时会自动闭合前面的 ，再开新标签：
document.querySelector('p') 可能取到空段落p > div 选择器完全不生效 的 padding/margin，布局直接崩
自闭合标签后面加
会怎样、@@##@@
@@##@@
当作未知标签处理，后续所有内容可能被塞进一个隐式 或意外创建的父节点里。常见现象：
document.body.children 数量变多，且类型混乱Hydration failed（服务端 HTML 和客户端 DOM 不一致）使用
时最容易漏掉的中间层
不允许直接子元素是
，必须包裹在 、
或
中。虽然浏览器会自动补
，但问题在于：
table tr:first-child 可能命中不到预期行（因为 :first-child 是指 下的第一个
，而非整个 ）
querySelectorAll('tr') 拿到的列表顺序和 DOM 树中真实层级可能不一致（尤其跨多个 时）
，哪怕只有一组数据。
嵌套验证别只靠肉眼 —— 推荐两个轻量手段
）
