p标签不能嵌套块级元素，这是HTML解析器在构建DOM前强制修正的结构规则；你写的xxx实际生成xxx，导致JS查询失败、CSS失效、SSR hydration异常及可访问性断裂。
直接结论：p标签不能嵌套块级元素，这不是浏览器“兼容性问题”，而是HTML解析器在构建DOM前就强制修正的结构规则；你写的 <p></p>
<div>xxx</div>
为什么p里放div或h2会失效
浏览器解析HTML时根本不看CSS，只按HTML规范判定内容模型：p只允许 phrasing content（内联内容），比如文本、<strong></strong>、<img alt="如何让HTML页面的p标签嵌套符合语义化要求" >、<kbd></kbd>。一旦遇到<div>、<code><h2></h2>、<ul></ul>或另一个<p></p>，解析器立刻在非法子节点前闭合当前p，不报错、不警告、不延迟——只默默输出修正后的DOM。
常见后果包括：
-
document.querySelector('p > div')永远返回null - CSS 的
p > .alert规则完全不生效 - 服务端渲染（SSR）后客户端 hydration 失败，因为服务端和浏览器看到的 DOM 结构不一致
- 屏幕阅读器跳过被挤到
p外的内容，可访问性断裂
哪些标签能合法放在p里
只放语义上属于“段落内成分”的内联元素。合法组合不是靠经验猜，而是看规范是否明确将其归类为 phrasing content：
立即学习“前端免费学习笔记（深入）”；
- 纯文本（含空格与换行，会被折叠为单个空格）
-
<strong></strong>、<em></em>、<span></span>、<a></a> -
<img alt="如何让HTML页面的p标签嵌套符合语义化要求" >（必须带alt属性） <code>、<br>、<small></small>、<sub></sub>、<sup></sup>-
<time></time>、<mark></mark>、<kbd></kbd>（注意：<kbd></kbd>必须并列写，不能嵌套）
自定义组件若要塞进p，必须声明 display: inline 且行为上不引入块级语义（比如不能渲染出 div 或触发换行）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
该用什么替代p来包裹图文卡片或按钮组
当发现想往p里塞标题、图片、列表、按钮时，说明语义已经越界——这不是段落，是独立内容区块。此时应放弃p，改用真正支持块级嵌套的容器：
-
<section></section>：适合有主题、可被单独引用的内容块（如“产品特性”“用户评价”），必须配<h2></h2>–<h6></h6> -
<article></article>：适合自成一体、可被分发复用的内容（如博客条目、新闻卡片） -
<figure></figure>+<figcaption></figcaption>：专用于图文/图表示例，语义精准，无需额外类名 <div>：无语义但最自由，适用于纯布局场景（比如 Grid/Flex 容器） <li> <code>display: contents：仅当需逻辑分组但不想影响渲染流时使用（Safari 15.4+ 支持，旧版需降级方案）- 打开浏览器开发者工具 → Elements 面板 → 手动点开每个
p节点，确认其children中没有HTMLDivElement或HTMLHeadingElement - 运行
document.querySelector('p').children，检查返回集合中是否混入块级节点类型 - 粘贴代码到 W3C Markup Validation Service（validator.w3.org）做静态校验
- VS Code 安装 “Auto Close Tag” 和 “Prettier”，预防交叉嵌套（如
<div><p></p></div>）
别用<div>包<code><p></p>再给div加样式——这等于把语义责任推给无语义容器，反而让p失去存在价值。
怎么验证嵌套是否真合法
别信肉眼缩进或渲染效果，它们全是“修复后”的假象。真实结构得看解析器产出：
最容易被忽略的是：重构后若移除了原p里的 aria-live 或 role，这些可访问性属性必须显式迁移到新容器上，否则读屏软件会丢失上下文。
