<p>里不能嵌套<div>，因浏览器解析时会自动闭合<p>并将<div>移至外部，导致DOM结构变为<p></p><div>内容</div>，使CSS选择器p > div失效、JS查询失败、样式错乱。
为什么 <p> 里放 <div> 会失效
浏览器根本不会按你写的结构解析——它会在遇到 <div> 时立刻闭合 <p>，再把 <div> 移到外面。结果是源码写的是 <p><div>内容</div></p>，实际 DOM 变成 <p></p><div>内容</div>。
常见连锁反应包括：
-
document.querySelector('p > div')返回null - CSS 的
p > div选择器完全不匹配 -
<p>上设的padding、margin看不见效果（因为它是空标签） - W3C 验证器明确报错：
Element div not allowed as child of element p
<h1>～<h6> 和 <dt> 同样不能嵌套块级元素
这些标签在 HTML 规范中被定义为“短语内容容器”，只接受行内级内容。你写 <h2><ul><li>项</li></ul></h2>，浏览器会解析为 <h2></h2><ul><li>项</li></ul>，<h2> 变成空标签。
JS 动态插入时同样受此限制：el.innerHTML = '<h4><div>x</div></h4>' 也会被自动修正。
立即学习“前端免费学习笔记（深入）”；
正确替代方式：
- 用
<h3 class="title">主标题</h3><div class="meta">副标题</div> - 或用语义化容器包裹：
<header><h3>主标题</h3><div>副标题</div></header>
<img>、<input> 等自闭合标签加 </img> 是 DOM 灾难
<img>、<input>、<br> 是 void 元素，HTML5 中禁止闭合。写成 <img src="x"></img>，浏览器会当作两个标签处理：第一个 <img> 因无结束符被忽略，第二个 </img> 被当成未知开始标签，后续所有内容整体右移一级。
典型症状：
- 页面右侧莫名出现空白
- 表单控件错位
-
<label for="x">找不到对应<input id="x"> - VS Code 中光标停在
<img>上，editor.matchBrackets不高亮匹配项（这是个信号）
模板字符串拼接时尤其危险，比如 `<div>${item.imgTag}</div>`，确保 item.imgTag 是纯 <img src="x">，不含闭合标签。
display: inline 并不能绕过嵌套限制
很多人以为只要给 <div> 加了 display: inline，就能塞进 <p> 里。不行。HTML 解析阶段就完成了结构修正，CSS 是在 DOM 树建好之后才介入的，它改变不了已被浏览器重排的层级。
验证方法：
- 打开 DevTools → Elements 面板，看真实 DOM 结构，别信源码
- 检查器里看到的结构，才是 JS 查询和 CSS 匹配所依据的真实树
- 哪怕样式让某个元素视觉上“变行内”，它的父容器仍按原始 HTML 规则解析
真正需要包裹多段内容（含标题、列表、段落），该用 <section>、<article> 或 <div> 这类通用容器——它们才是设计来嵌套块级元素的。
