<p>仅允许嵌套短语级内容（phrasing content），禁止块级或流式容器元素；<div><section><ul>等均非法，浏览器会自动拆解为<p></p><div>...</div><p></p>，导致样式、JS失效。
看 W3C 规范定义的内容模型（content model）
判断一个标签能否嵌套进 <p>，最根本的方法是查它在 HTML 标准中被归类为什么类型的内容。W3C 明确规定：<p> 只允许包含 phrasing content（短语级内容），不接受任何 flow content（流式内容）中的块级元素。
这意味着：只要目标标签在规范中被定义为“块级”或“流式容器”，哪怕它视觉上很小、甚至加了 display: inline，也不能合法出现在 <p> 内部。
-
<div>、<section>、<ul>、<ol>、<h2>、<table>、<form>—— 全部禁止 -
<span>、<strong>、<em>、<a>、<img>、<time>、<button>—— 允许（它们属于 phrasing content） -
<svg>和<canvas>默认是 replaced inline elements，可放，但若设display: block或宽高，仍可能触发解析器干预
用浏览器开发者工具验证 DOM 实际结构
肉眼看到“渲染正常”，不代表嵌套合法。浏览器会自动修复非法嵌套，但结果不可控。
打开 DevTools 的 Elements 面板，**不要看源码视图，要看实时 DOM 树**。如果写的是 <p><div>hello</div></p>，你大概率会看到：
立即学习“前端免费学习笔记（深入）”；
<p></p> <div>hello</div> <p></p>
这说明 <p> 已被拆开，<div> 成了兄弟节点。此时：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
document.querySelector('p > div')返回null -
p { padding: 1em; }对<div>完全无效 -
querySelectorAll('p')会多出一个空段落
别信 display: inline 能“绕过”解析限制
CSS 是解析完成之后才应用的。HTML 解析器根本不读 style 或 class，它只按规范识别标签语义。
哪怕你给 <div> 加了 style="display: inline;"，解析器照样把它当块级元素处理，依然会在遇到它时立刻闭合当前 <p>。
常见误判场景：
-
<p><div style="display:inline">文本</div></p>→ 仍被拆 -
<p><span><div>嵌套</div></span></p>→<div>仍被踢出，因为<span>不能包块级 -
<p><a href="#"><div>整块链接</div></a></p>→ 这个合法，因为<a>是唯一被规范允许包裹块级元素的行内标签
真正需要混合布局时该用什么替代
想在一个逻辑段落单元里组织标题 + 列表 + 图文？<p> 不是为此设计的。它的语义就是“一段连续文本”，不是“内容区块容器”。
正确做法是换用语义匹配的容器：
- 用
<section>或<article>包裹完整内容单元 - 用
<div class="paragraph-block">（无语义，但结构可控） - 多个
<p>并列 + 后续<ul>、<div>，靠 CSS 控制间距和视觉分组 - 标题用
<h3>，后面紧跟<p>，再跟<ul>，全部平级放在<section>下
最容易被忽略的一点是：这种结构断裂往往在 SSR 或 hydration 阶段才暴露——服务端渲染出的 DOM 和客户端 JS 拼出来的不一致，导致 React/Vue 应用报 hydration mismatch 错误。
