<p>里不能放<div>，因为HTML解析器会自动闭合<p>，将<div>移至外部，导致DOM结构变为<p></p><div>内容</div>，使CSS选择器p > div失效、JS查询失败、样式错乱。
为什么 <p> 里放 <div> 会导致样式失效
浏览器根本不会按你写的结构解析——它会直接把 <p> 关掉，再把 <div> 挪到外面。结果就是你写的 <p><div>内容</div></p>，实际 DOM 变成 <p></p><div>内容</div>。
常见连锁反应包括：document.querySelector('p > div') 找不到元素、CSS 的 p > div 选择器完全不生效、<p> 上设置的 padding/margin 看不见效果。
-
<p>只允许子节点是行内内容：文本、<span>、<strong>、<img>（行内块）、<em>等 - 哪怕给
<div>加了display: inline，也拦不住浏览器自动拆解 - 想包裹多段内容（含标题、列表），改用
<section>或<article>，它们才是设计来嵌套块级元素的
<h1>～<h6> 和 <dt> 同样不能嵌套块级元素
和 <p> 一样，这些标签在 HTML 规范中被定义为“短语内容容器”，只接受行内级内容。你写 <h2><ul><li>项</li></ul></h2>，浏览器会解析为 <h2></h2><ul><li>项</li></ul>，<h2> 变成空标签。
- 错误写法：
<h3><div class="meta">副标题</div></h3> - 正确替代：
<h3 class="title">主标题</h3><div class="meta">副标题</div>，或用<header>包裹 - 注意：JS 动态插入时同样受此限制，
el.innerHTML = '<h4><div>x</div></h4>'也会被自动修正
自闭合标签加 </img> 不是语法糖，是 DOM 灾难
<img>、<input>、<br> 是 void 元素，HTML5 中禁止闭合。写成 <img src="x"></img>，浏览器会把它当作两个标签处理：第一个 <img> 被忽略（因无结束符），第二个 </img> 被当成未知开始标签，后续所有内容整体右移一级。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 典型症状：页面右侧莫名出现空白、表单控件错位、
<label for="x">找不到对应<input id="x"> - VS Code 里开启
editor.matchBrackets，光标停在<img>上不会高亮任何匹配项——这是个信号 - 模板字符串拼接时尤其危险，比如
`<div>${item.imgTag}</div>`，确保item.imgTag是纯<img src="x">，不含闭合标签
块级与行内元素的嵌套边界不是靠 CSS 决定的
很多人以为只要加了 display: inline，就能往 <p> 里塞 <div>。不行。HTML 解析阶段就完成了结构修正，CSS 是在 DOM 树建好之后才介入的，它改变不了已被浏览器重排的层级。
- 验证方法：打开 DevTools → Elements 面板，看真实 DOM 结构，别信源码
- W3C 验证器（validator.w3.org）会明确报错：
Element div not allowed as child of element p - 真正灵活的容器是
<div>、<section>、<article>、<main>——它们没有语义嵌套限制，但也不具备<p>的段落语义
最常被忽略的一点：嵌套错误不会抛 JS 错误，也不会在控制台报红，它只是静默地把你的结构改得面目全非。调试时盯着 Elements 面板比盯着 Console 更有效。
