p标签仅允许嵌套短语型内容，非法嵌套（如div、h4、ul）会被浏览器在解析阶段自动修正DOM，导致样式、JS和可访问性异常；需用DevTools或脚本定位并按语义替换为section、figure等合适容器。
直接替换非法嵌套结构，别试图用 CSS 强行“塞进去”——p 的内容模型是硬性规范，浏览器解析阶段就已修正 DOM，后续所有样式、JS、可访问性都基于这个被改过的结构工作。
怎么快速定位哪些 p 被浏览器悄悄拆开了
别信源码缩进或渲染效果，真实 DOM 才是唯一依据：
• 打开 Chrome DevTools → Elements 面板 → 找到一个疑似嵌套了 div 或 h4 的 p，右键 → “Edit as HTML”，删一个字符再回车：如果子节点突然“跳到外面”或出现空 p 标签，说明原始嵌套非法
• 控制台运行：document.querySelectorAll('p > *').forEach(el => { if (['DIV', 'H2', 'H3', 'UL', 'SECTION', 'ARTICLE'].includes(el.tagName)) console.log('illegal child in p:', el) })
• 查看孤立节点：[...document.querySelectorAll('*')].filter(el => !el.parentElement)，被踢出来的 div 就是证据
遇到 p 里有 div/ul/h4 怎么替
不是统一换成 div 就完事，得按语义和布局意图选容器：
• 如果是“标题 + 段落 + 列表 + 操作按钮”这种逻辑块：用 section 包整体，内部用 h4、多个 p、ul、div 各司其职
• 如果只是想给一段文字加背景色/内边距：去掉 p，直接用 div class="paragraph"，CSS 控制 display: block 和间距
• 如果是图文卡片（图片 + 描述 + 按钮）：用 figure + figcaption，它天然支持块级混排，且语义正确
• 模板中动态拼接时：先拼好所有内容（含条件分支），再整体包进 p，而不是在 p 开始标签后直接写 {% if %} 块
p 里能合法放什么，哪些看着小但其实不行
p 只接受 phrasing content，判断标准不是“体积小”，而是 HTML 规范定义：
• ✅ 合法：文本、strong、em、a、img、time、button、input、select
• ❌ 非法：哪怕你把 div 设成 display: inline-block，它仍是块级元素，解析器直接拒收；h4、ul、section、article、自定义标签如 my-card（没连字符）全都不行
• ⚠️ 特别容易误判：span 可以，但 span 里再套 div 就越界了——嵌套合法性是逐层检查的，不是只看第一层
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
重构后必须盯住的三个实际信号
改完别急着合代码，打开浏览器验证：
• 运行 document.querySelector('p > div')，如果返回 null 但你预期有结果，说明 DOM 还没理顺
• Lighthouse 的 Accessibility 报告里有没有新增的 “ARIA attributes not applied to appropriate elements” 提示？原 p 上的 aria-live 或 role 得手动迁移到新容器上
• 检查 DOM 节点数：如果从 <p></p>
<div>...</div>
<section><p>...</p>
<div>...</div></section>，节点数没减反而多了，大概率是换汤不换药，没真正解耦语义
最常被忽略的一点：浏览器不会报错，控制台也静默，但每次 querySelector 失败、CSS 不生效、读屏软件跳过某段内容，根源可能就藏在某一行看似无害的 <p></p>
<div></div>
