p标签内不能嵌套div、ul、ol、h1–h6、section、table、form等块级元素，因HTML解析器强制按语义规则闭合p，导致DOM结构异常、样式和JS失效；仅允许嵌套文本及strong、em、a、img等短语内容元素。
标签内不能嵌套 div、ul、ol、h1–h6、section、table、form 等任何块级元素——这不是浏览器兼容性问题，而是 HTML 解析器在构建 DOM 时强制执行的语义规则。你写的结构和最终生效的 DOM 几乎必然不一致。
为什么 p 里放 div 后样式和 JS 都失效了
浏览器解析到 <p></p>
<div>内容</div>
<div> 的瞬间就闭合当前 <code><p></p>，然后把 <div> 插入到刚闭合的 <code><p></p> 后面。实际生成的 DOM 是：<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>
<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>。
这导致几个直接后果：
-
document.querySelector('p > div')永远返回null -
p > div这类 CSS 选择器完全不匹配 -
p上设置的padding或background对div无效（它已不在p内） - W3C 验证器明确报错：
Element div not allowed as child of element p
p 标签允许嵌套哪些元素
p 只接受 phrasing content（短语内容），即语义上属于“文本流中的一部分”的元素。合法子元素包括：
- 纯文本节点（如
"注册成功，您现在可以登录。"） -
strong、em、small、mark -
a（即使里面含img或span，HTML5 允许） -
img（注意：是行内替换元素，但默认可出现在p中） -
button（规范允许，但需注意表单上下文） -
time、code、span
哪怕给 span 加了 display: block，只要它语义仍是行内，就不会触发解析错误；但反过来，div 即使设成 display: inline，也拦不住解析器提前闭合 p。
常见误用场景与替代写法
很多“看起来合理”的写法，其实踩了语义红线：
- 想在段落下方加一个带样式的卡片？别写
<p>文字</p> <div class="card">…</div>，改用：<p>文字</p> <div class="card">…</div> - 需要标题+段落+列表组合？不要
<p></p> <h3>标题</h3> <ul><li>项</li></ul>，应拆开：<h3>标题</h3> <p>说明文字</p> <ul><li>项</li></ul> - 表单提示写成
<p><input type="text"></p>？违反p和form双重规范，正确是：<div> <label>用户名</label><input type="text"> </div> - 富文本编辑器导出连续空行？检查是否生成了多个
<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>，它们会渲染为带 margin 的空白块，破坏布局节奏
怎么验证嵌套是否真的合法
别信源码或渲染效果——DOM 已被浏览器悄悄重排。最可靠的方式只有两个：
- 打开浏览器 DevTools → Elements 面板，看左侧树状结构，确认
div是否真的在p内部（几乎不会） - 用 W3C Markup Validation Service（validator.w3.org）在线校验，或本地跑
html-validate工具
真正容易被忽略的一点是：JS 动态插入同样受此限制。el.innerHTML = '<p></p>
<div>x</div>
