浏览器解析时强制闭合<p>并移出<div>，导致DOM结构变为<p></p><div>内容</div>，使CSS选择器失效、JS查询不到、样式错乱。
为什么 p 里写 div 会“消失”
不是样式没生效，也不是 JS 没选中——是浏览器压根没按你写的结构去建 DOM。遇到 div 这类块级元素时，解析器会立刻闭合当前 p，再把 div 插到外面。源码写的是 <p><div>内容</div></p>，实际 DOM 变成 <p></p><div>内容</div><p></p>。
这导致几个直接后果：
-
document.querySelector('p > div')返回null -
p上设的padding、margin看不见效果（因为它是空标签） - CSS 选择器
p > div完全不匹配 - W3C 验证器明确报错：
Element div not allowed as child of element p
p 标签到底能嵌什么
p 的合法子节点只有两类：文本节点和行内级元素（inline-level elements）。它不看视觉表现，只认语义和规范定义。
允许的常见元素包括：
立即学习“前端免费学习笔记（深入）”；
- 纯文本：
<p>这是段落文本</p> - 行内元素：
<span>、<strong>、<em>、<a>、<img> - 可替换行内元素：
<input>、<button>（部分浏览器允许，但不推荐用于表单控件嵌套）
禁止的典型元素有：<div>、<ul>、<h2>、<table>、<form>、<blockquote>、甚至另一个 <p>。
注意：display: inline 不起作用——HTML 解析发生在 CSS 计算之前，样式改不了结构。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
哪些标签和 p 一样严格
h1～h6、dt 和 p 属于同一类“短语内容容器”，它们都只接受行内内容，不能作为通用容器使用。
比如写 <h3><div>标题副文本</div></h3>，浏览器会解析为 <h3></h3><div>标题副文本</div>，h3 变成空标签，所有样式和 JS 查询都失效。
真正需要包裹多段结构（含标题、列表、段落），该用 <section>、<article> 或 <div>——它们才是设计来嵌套块级元素的。
唯一例外是 <a>：HTML5 明确允许它包裹块级元素，比如 <a href="#"><div>整个区域可点</div></a> 是合法且可交互的，但要注意不能嵌套另一个 a，也不能混入表单控件（如 input）以免提交行为异常。
怎么快速验证嵌套是否合法
别信源码或渲染效果——DOM 已被浏览器重排过。最可靠的方法是：
- 打开 DevTools → Elements 面板，看真实 DOM 结构，不是你写的 HTML
- 用 W3C Markup Validation Service 在线校验，或本地跑
html-validate - 在 JS 中检查：
document.querySelector('p').children.length如果返回 0，说明里面可能被“踢出去”了
最容易被忽略的一点是：问题往往不出现在你主动写的 div 上，而是在你引入的第三方组件、SVG 内联代码、或动态拼接的 innerHTML 字符串里——这些地方的嵌套错误更隐蔽，也更难调试。
