浏览器解析<p><div></div></p>时，因<p>仅允许phrasing content，遇到<div>立即隐式闭合</p>，生成<p></p><div></div><p></p>三个独立节点，导致DOM结构与源码不符。
为什么浏览器会“偷偷改掉”你的 <p><div></div></p>
不是浏览器“不讲武德”，是 HTML 解析器在构建 DOM 时，严格按 W3C 的 content model 执行：<p> 只允许包含 phrasing content（文本、<strong>、<a>、<img> 等），而 <div> 属于 flow content，一出现就触发强制闭合。你写的源码是 <p><div>xxx</div></p>，实际 DOM 变成 <p></p><div>xxx</div><p></p>——三个节点，中间那个 <div> 已完全脱离 <p> 上下文。
哪些元素塞进 <p> 会立刻被“踢出来”
以下标签一旦出现在 <p> 内部，都会导致解析器中断并重排 DOM：
-
<div>、<section>、<article>、<header>、<footer>、<main> -
<ul>、<ol>、<dl>、<table> -
<h1>～<h6>、<blockquote>、<form> - 哪怕一个空的
<div>或加了display: inline的<div>，照样被踢——CSS 不参与解析阶段
常见误用场景与对应替换方式
开发中真正容易踩坑的，往往不是故意乱写，而是没意识到某些结构本就不该塞进段落里：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想给一段文字配图标+副标题？别写
<p><img><span>副标</span></p>，改用<div class="text-block"><p>正文</p><div class="meta"><img><span>副标</span></div></div> - 富文本编辑器输出带
<div>的 HTML？在渲染前用正则或 DOMParser 清洗：<p><div>...</div></p>→ 提取内容，包裹到外层<div>中 - 表单提示文字含输入框？禁止
<p><input></p>，改用<div><label>用户名</label><input></div> - 需要点击区域是整块卡片？用
<a href="#"><div>卡片内容</div></a>——这是 HTML5 唯一允许<div>出现在行内标签内的合法场景
怎么确认自己没踩坑
别信源码，也别靠页面“看起来正常”来判断：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements 面板，看真实 DOM 结构；
document.querySelector('p > div')返回null就说明已被移出 - 用 W3C Markup Validation Service 在线校验，或本地跑
html-validate工具 - SSR 或 hydration 场景下，服务端生成的 HTML 和客户端解析后的 DOM 必须一致，否则 React/Vue 会报 hydration mismatch
- 最隐蔽的坑：CMS 或 Markdown 转 HTML 的工具可能默认输出非法嵌套，且肉眼极难发现
