p标签合法子元素仅限phrasing content，如span、img、a；div、h1、ul等块级元素非法，浏览器会自动闭合p并将其置为平级节点。
怎么查 p 标签合法子元素有哪些
直接看 HTML 规范定义比背列表更可靠：p 的 content model 明确只允许 phrasing content，不包括任何块级容器。浏览器不会报错，但一遇到非法子元素（如 div、h1、p、ul）就立刻闭合当前 p，再把非法元素插到外面。
验证方法很简单：
- 打开 Chrome DevTools → Elements 面板，观察实际 DOM 结构：如果写了
<p><div>xxx</div></p>，你会看到两个平级节点<p></p>和<div></div>，中间无嵌套关系 - 在控制台运行
document.querySelector('p div')，返回null就说明已被拆开 - 用 W3C Validator 提交片段，错误提示会明确写：
Element “div” not allowed as child of element “p” in this context
p 里能放 span、img、a 吗
可以，这些都属于 phrasing content，是 p 的合法子元素。但要注意几个边界情况：
-
img是替换元素，默认 inline，能设宽高，但若加了display: block，它就不再是“纯 phrasing”，不过仍被允许——规范看的是标签语义，不是最终 display 值 -
a里面再包div？不行。a自身也是 phrasing content 容器，但它内部同样禁止块级元素；<a><div>xxx</div></a>会导致a被提前闭合 -
span可以无限嵌套，但别为了样式硬塞div进去——<p><span><div>xxx</div></span></p>一样触发强制闭合
为什么 p 里放 br 没问题，放 hr 就不行
因为 br 是 phrasing content，而 hr 是 flow content —— 浏览器按 content model 分类，不是按“看起来像不像换行符”。hr 和 div、section 属于同一层级，天然不能出现在 p 中。
立即学习“前端免费学习笔记（深入）”；
常见误判点：
-
br是唯一被广泛接受的“换行控制符”，但它只是插入一个换行机会，不产生新块容器 -
hr表示主题分隔，语义上就是段落级结构，必须和p平级，不能做其子元素 - 想在段落中模拟分隔线？用 CSS 边框：
<p class="with-divider">文字</p>+.with-divider::after
替代方案：当真需要“段落内容器”时怎么办
别强行在 p 里塞 div，这不是样式问题，是结构违规。真实需求通常有更干净的解法：
- 需要包裹部分文字做样式或 JS 绑定？用
span，配合class或data-*属性 - 需要视觉分组（比如图标+文字）？把整个结构换成
div+class="paragraph"，再用 CSS 模拟段落间距（margin-block） - 要保留语义又需嵌套容器？改用
section或article包裹多个p，而不是让单个p承担布局职责 - SSR 或 hydration 场景下尤其注意：服务端渲染的
<p><div>...</div></p>和客户端解析出的实际 DOM 必然不一致，React/Vue 都会报 hydration mismatch
最易被忽略的一点：即使你用 display: inline-block 把 div 压成“看起来像行内”，HTML 解析器仍按原始标签类型判定嵌套合法性——它根本不读 CSS。
