里不能嵌套，因浏览器解析时会立即闭合并将移至外部，导致dom变为内容，使css选择器、js查询失效且样式错乱。
为什么 p 里放 div 会失效
浏览器根本不会按你写的结构解析——它会在遇到 div 时立刻闭合 p，再把 div 移到外面。结果是源码写的是 <p></p>
<div>内容</div>
<p></p>
<div>内容</div>。
常见连锁反应包括：
-
document.querySelector('p > div')返回null - CSS 的
p > div选择器完全不匹配 -
p上设的padding、margin看不见效果（因为它是空标签） - W3C 验证器明确报错：
Element div not allowed as child of element p
h1～h6 和 dt 同样不能嵌套块级元素
这些标签在 HTML 规范中被定义为“短语内容容器”，只接受行内级内容。你写 <h2><ul>项</ul></h2>，浏览器会解析为 <h2></h2>
<ul>项</ul>，h2 变成空标签。
JS 动态插入时同样受此限制：el.innerHTML = '<h4><div>x</div></h4>' 也会被自动修正。
正确替代方式：
- 用
<h3 class="title">主标题</h3> <div class="meta">副标题</div> - 或用语义化容器包裹：
<header><h3>主标题</h3> <div>副标题</div></header>
a 标签是唯一能合法包裹 div 的行内元素
HTML5 明确允许 a 包含块级元素，比如 @#@#@#@#@#@#@#@#@#@0 是合法且可交互的。
但要注意：
-
a内不能再嵌套另一个a，否则外层链接失效 - 如果
a里有表单控件（如input），部分浏览器可能禁用提交行为 - 语义上应确保整个
div内容都属于同一跳转目标，避免误导用户
display: inline 并不能绕过嵌套限制
很多人以为只要给 div 加了 display: inline，就能塞进 p 里。不行。HTML 解析阶段就完成了结构修正，CSS 是在 DOM 树建好之后才介入的，它改变不了已被浏览器重排的层级。
验证方法：
- 打开 DevTools → Elements 面板，看真实 DOM 结构，别信源码
- 检查器里看到的结构，才是 JS 查询和 CSS 匹配所依据的真实树
- 哪怕样式让某个元素视觉上“变行内”，它的父容器仍按原始 HTML 规则解析
真正需要包裹多段内容（含标题、列表、段落），该用 section、article 或 div 这类通用容器——它们才是设计来嵌套块级元素的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
