<p>标签只能嵌套短语内容（phrasing content），如<em>、<strong>、<a>、<img>、<time>、<button>、<input>、<select>、<code>、<span>等；禁止嵌套<div>、<h4>、<ul>、<section>、<p>自身及无连字符自定义标签，浏览器会静默拆解DOM。

标签不能嵌套块级元素，这是硬性限制，不是浏览器兼容问题，也不是 CSS 能绕过的——解析器在构建 DOM 时就按规范强制拆解。

哪些标签能直接放在 <p> 里面

<p> 只接受 phrasing content（短语内容），也就是语义上属于“行内片段”的元素。合法子元素包括：<em>、<strong>、<a>、<img>、<time>、<button>、<input>、<select>、<code>、<span> 等。

常见误判点：

• <div> 即使设了 display: inline-block，依然非法——解析器不看样式，只认语义定义
• <h4>、<ul>、<section>、<p> 自身，一律禁止
• 自定义标签如 <spoiler> 无连字符，也不被识别为合法 phrasing 元素

浏览器遇到非法嵌套时怎么“修复”

它不会报错，但会静默重排 DOM。例如这段代码：

立即学习“前端免费学习笔记（深入）”；

<p><h4>标题</h4>这是段落内容。</p>

实际被解析成：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

<p></p>
<h4>标题</h4>
这是段落内容。<p></p>

后果很具体：

• CSS 选择器 p > h4 永远选不到东西
• document.querySelector('p').children 返回的集合里可能含 HTMLDivElement，说明已被修正过
• 读屏软件无法把 <h4> 当作该段落的子结构处理，大纲断裂
• 末尾孤立的 </p> 会被 W3C 验证器标记为 “No p element in scope but a p end tag seen”

想实现“段落+区块”效果，该用什么结构

别在 <p> 里硬塞，换语义正确的容器组合：

• 逻辑单元是“标题 + 多段说明 + 列表”？用 <section> 或 <article> 包裹，内部放 <h4> + 若干 <p> + <ul>
• 视觉上要“段落下方紧贴一个卡片”？写成 <p>文字</p><div class="card">…</div>，再用 CSS 控制 margin-top 对齐
• 图文混排需紧凑语义？用 <figure> + <figcaption>，它们天然支持内联与块级混合

真实需求几乎从来不是“把标题塞进段落”，而是“某段文字后跟着一个结构化区块”——这个意识比记住规则更重要。

验证嵌套是否合法的最快方式

别信源码缩进，也别信渲染结果（那是修复后的假象）：

• 打开浏览器开发者工具 → Elements 面板 → 展开节点，看真实 DOM 是否出现意外截断、匿名文本节点或块级元素跑到 <p> 外面
• 粘贴 HTML 到 W3C Markup Validation Service，它会明确标出嵌套违规位置
• VS Code 中装 “Auto Close Tag” 插件，可预防 <div><p></div></p> 这类交叉嵌套

最常被忽略的一点：哪怕你只改了一处 <p> 嵌套，也可能导致整块区域的 DOM 结构偏移，JS 获取 textContent 或遍历子节点时结果完全不对——调试时得从 Elements 面板一层层确认节点归属，而不是猜。