<p>标签不能嵌套其他块级标签——这是W3C规范明确禁止的，因其被定义为“短语级块容器”，仅允许内联内容（如文本、<strong>、<a>、<br>等），一旦嵌套<div>或<p>自身，浏览器会强制闭合外层<p>并提升子元素至同级，导致DOM结构错乱、CSS样式失效、JS查询失败；正确分组应使用<section>或<div>等语义化容器。
标签不能嵌套其他
标签——这是 W3C 规范明确禁止的，浏览器会自动“修复”这种结构，导致 DOM 行为不可控，比如意外闭合、样式错位或 JS 获取元素失败。
为什么
里面不能再写
W3C 把
定义为“**短语级块容器**”，它只允许包含内联内容（如文本、、、、），不允许嵌套另一个块级元素（包括自身）。一旦出现
xxx 立即学习“前端免费学习笔记（深入）”；
，实际生成的是
xxx
立即学习“前端免费学习笔记（深入）”；
——你写的结构被重写了。常见错误现象包括：
- CSS 的 margin 或 padding 看似“失效”，其实是外层
被提前截断，样式作用在了两个独立段落上
- 用
document.querySelector('p').innerHTML拿到的内容比预期少，因为中间的被提升到同级
- 在 DevTools 中看到 DOM 树里多出空
元素，或结构和源码明显不一致
想分组段落该用什么替代
如果目标是视觉/逻辑上的“段落分组”（比如一篇文章的引言+正文+结语），应该用语义化容器，而不是强行嵌套
：
- 用
<section>：语义清晰，适合内容主题划分，支持 aria-label 和 SEO - 用
<div>：无语义，但兼容性最好，适合纯布局隔离 - 避免用
<article>或<aside>套多个时混用不当——它们有各自的内容边界含义，不是通用分组筐
示例正确写法：
<section><br> <p>第一段。</p><br> <p>第二段。</p><br></section>
哪些内联元素能合法放在
里
W3C 允许以下类型直接作为
的子节点（即可以安全嵌套）：
- 文本节点（含空格、换行）
-
<strong>、<em>、<small>、<mark> -
<a>、<span>、<time>、<abbr> -
<br>（注意是自闭合标签，不是<br></br>） - 但
<div>、<h2>、<ul>、<table>、甚至<p>自身——全部非法，会触发自动纠正
检查和修复的小技巧
开发中快速验证是否合规：
- 用浏览器 DevTools 查看 Elements 面板里的实际 DOM 结构，别信源码缩进
- 运行
document.querySelectorAll('p p')，结果非空说明存在非法嵌套（虽然语法上不会报错，但已违规） - 在 HTML 验证工具（如 validator.w3.org）粘贴代码，它会明确标出 “Element p not allowed as child of element p”
- VS Code 安装插件 “Auto Rename Tag” + “HTMLHint”，可实时提示嵌套问题
最常被忽略的一点：服务端模板或 CMS 输出内容时，可能把用户输入的富文本（含自动插入的
）再包一层
，这种动态场景比手写 HTML 更容易踩坑。
