标签不能嵌套其他块级标签——这是w3c规范明确禁止的，因其被定义为“短语级块容器”，仅允许内联内容（如文本、、、等），一旦嵌套或自身，浏览器会强制闭合外层并提升子元素至同级，导致dom结构错乱、css样式失效、js查询失败；正确分组应使用或等语义化容器。
标签不能嵌套其他
标签——这是 W3C 规范明确禁止的，浏览器会自动“修复”这种结构，导致 DOM 行为不可控，比如意外闭合、样式错位或 JS 获取元素失败。
为什么
里面不能再写
W3C 把
定义为“**短语级块容器**”，它只允许包含内联内容（如文本、、、、），不允许嵌套另一个块级元素（包括自身）。一旦出现
xxx
，实际生成的是
xxx
——你写的结构被重写了。常见错误现象包括：
- CSS 的 margin 或 padding 看似“失效”，其实是外层
被提前截断，样式作用在了两个独立段落上
- 用
document.querySelector('p').innerHTML拿到的内容比预期少，因为中间的被提升到同级
- 在 DevTools 中看到 DOM 树里多出空
元素，或结构和源码明显不一致
想分组段落该用什么替代
如果目标是视觉/逻辑上的“段落分组”（比如一篇文章的引言+正文+结语），应该用语义化容器，而不是强行嵌套
：
- 用
<section></section>：语义清晰，适合内容主题划分，支持 aria-label 和 SEO - 用
<div>：无语义，但兼容性最好，适合纯布局隔离 <li>避免用 <code><article></article>或<aside></aside>套多个时混用不当——它们有各自的内容边界含义，不是通用分组筐
示例正确写法：
<section><br><p>第一段。</p> <br><p>第二段。</p> <br></section>
哪些内联元素能合法放在
里
W3C 允许以下类型直接作为
的子节点（即可以安全嵌套）：
- 文本节点（含空格、换行）
-
<strong></strong>、<em></em>、<small></small>、<mark></mark> -
<a></a>、<span></span>、<time></time>、<abbr></abbr> -
<br>（注意是自闭合标签，不是<br>） - 但
<div>、<code><h2></h2>、<ul></ul>、<table>、甚至 <code><p></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 更容易踩坑。
