仅允许嵌套短语级内容（phrasing content），禁止块级或流式容器元素；等均非法，浏览器会自动拆解为...，导致样式、js失效。

看 W3C 规范定义的内容模型（content model）

判断一个标签能否嵌套进 <p></p>，最根本的方法是查它在 HTML 标准中被归类为什么类型的内容。W3C 明确规定：<p></p> 只允许包含 phrasing content（短语级内容），不接受任何 flow content（流式内容）中的块级元素。

这意味着：只要目标标签在规范中被定义为“块级”或“流式容器”，哪怕它视觉上很小、甚至加了 display: inline，也不能合法出现在 <p></p> 内部。

• <div>、<code><section></section>、<ul></ul>、<ol></ol>、<h2></h2>、<table>、<code><form></form> —— 全部禁止
• <span></span>、<strong></strong>、<em></em>、@#@#@#@#@#@#@#@#@#@0 → 这个合法，因为 <a></a> 是唯一被规范允许包裹块级元素的行内标签

真正需要混合布局时该用什么替代

想在一个逻辑段落单元里组织标题 + 列表 + 图文？<p></p> 不是为此设计的。它的语义就是“一段连续文本”，不是“内容区块容器”。

正确做法是换用语义匹配的容器：


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
• 用 <section></section> 或 <article></article> 包裹完整内容单元
• 用 <div class="paragraph-block">（无语义，但结构可控） <li>多个 <code><p></p> 并列 + 后续 <ul></ul>、<div>，靠 CSS 控制间距和视觉分组 <li>标题用 <code><h3></h3>，后面紧跟 <p></p>，再跟 <ul></ul>，全部平级放在 <section></section> 下

最容易被忽略的一点是：这种结构断裂往往在 SSR 或 hydration 阶段才暴露——服务端渲染出的 DOM 和客户端 JS 拼出来的不一致，导致 React/Vue 应用报 hydration mismatch 错误。

<p></p>
<div>hello</div>
<p></p>