浏览器解析html时会自动修复非法嵌套（如p内含div），生成的dom树与源码不同，必须通过开发者工具elements面板查看真实结构，源码仅反映原始字符串。
直接看浏览器解析后的 DOM 树，不是源码
HTML 源码里写的 <p></p> 嵌套结构，浏览器根本不会照单全收。比如你写了 <p>文字</p>
<div>块内容</div>
<div> 踢出 <code><p></p>，变成两个兄弟节点 <p>文字</p> 和 <div>块内容</div>。所以想看“最终结构”，必须放弃源码，转向开发者工具里的实时 DOM 树。
用 Elements 面板观察真实渲染结构
打开 Chrome 或 Edge，右键页面空白处 → “检查”，切到 Elements 面板：
- 所有展开/折叠状态反映的是浏览器实际构建的 DOM，不是你写的源码
-
<p></p>下如果出现<div>、<code><h2></h2>、<ul></ul>等块级元素，说明它已被自动拆开——这时你看到的其实是纠错后的兄弟关系，不是嵌套 - 鼠标悬停在某行节点上，页面对应区域会高亮，能快速验证结构是否符合预期
- 右键某个
<p></p>节点 → “Edit as HTML”，临时修改内容后回车，DOM 会立即重排，适合测试边界情况 - 源码里写
<p></p> <div></div>，源代码页就真显示这一行，毫无提示 - 但 Elements 面板里你会清楚看到
<p></p>和<div> 并列在同层，中间没有缩进关系 <li>如果页面用了框架（如 React、Vue），源码可能只剩一个空 <code><div id="root"></div>，而真实结构全在 DOM 里 - 任何块级元素：
<div>、<code><section></section>、<ul></ul>、<h1></h1>、<p></p>自身（不允许嵌套） - 某些语义容器：
<article></article>、<aside></aside>、<footer></footer> - 表单控件：
<form></form>、<button></button> - 即使加了
display: inline也没用——浏览器按 HTML 规范判断，不是按 CSS 渲染类型
为什么不能只靠“查看页面源代码”
Ctrl+U（或 Cmd+U）打开的是服务器返回的原始 HTML 字符串，它不经过浏览器解析，也不包含 JS 动态插入的内容。但它更致命的问题是：它完全掩盖了嵌套纠错行为。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
哪些嵌套会让 <p></p> 被自动截断
只要 <p></p> 开始标签后、结束标签前，出现了以下任一内容，浏览器就会终止当前 <p></p> 并自动闭合它：
真正能合法留在 <p></p> 内部的，只有文本、<span></span>、<strong></strong>、<a></a>、<em></em> 这类内联级元素。这点容易被忽略，但直接影响 DOM 结构和后续 JS 查询结果（比如 document.querySelector('p div') 永远为空）。
