因为<p>是短语内容容器，只允许嵌套行内元素；浏览器解析时强制修正非法嵌套，将<p><div>abc</div></p>改为<p></p><div>abc</div>，导致DOM结构改变、选择器失效、样式丢失及验证报错。
为什么 <p> 里不能放 <div> 或 <ul>
浏览器解析时根本不会保留你写的结构：<p><div>abc</div></p> 会被自动修正为 <p></p><div>abc</div>，<p> 变成空标签。这不是样式问题，是 HTML 解析阶段的强制重排。
-
document.querySelector('p > div')永远返回null - 给
<p>设置的padding、margin全部失效 - CSS 选择器
p > ul完全不匹配 - W3C 验证器报错：
Element div not allowed as child of element p
真正需要包裹多段混合内容（比如标题 + 列表 + 段落），该用 <section>、<article> 或语义清晰的 <div>，而不是硬塞进 <p>。
<h1>～<h6> 和 <dt> 为什么不能嵌套块级元素
这些标签在规范中属于“短语内容容器”，只接受行内级内容。写 <h2><ul><li>项</li></ul></h2>，浏览器会解析为 <h2></h2><ul><li>项</li></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> 包含块级元素，比如 <a href="#"><div>点击区域</div></a> 是合法且可交互的。但这不等于可以随意滥用。
立即学习“前端免费学习笔记（深入）”；
-
<a>内不能再嵌套另一个<a>，否则外层链接行为直接失效 - 如果
<a>里有<input>或<form>，部分浏览器会禁用提交，且不符合 WCAG 要求 - 视觉上像按钮？优先用
<button type="button">+ JS 跳转，比滥用<a>更健壮
嵌套超过三层时，该删 <div> 还是换语义标签
嵌套深 ≠ 结构复杂，关键看每一层是否承担明确语义角色。当缩进超过三层，先问：这层 <div> 是纯为样式/JS 选中服务，还是真有内容含义？
- 如果只为加
class或id控制样式，且无语义价值，直接删掉或用更轻量的包装（比如用<span>或 CSS Grid 容器替代） - 如果它确实代表“卡片主体”“侧边工具栏”“文章摘要区”，优先查 W3C 推荐标签：
<article>、<aside>、<section>都比<div class="card-body">更准确 - 特别注意
<img>、<input>、<svg>这类标签——它们永远是某容器的子级，不可能出现在顶层；看到它们“孤零零”在<body>下，说明父容器漏写了
最容易被忽略的是：嵌套合法性 ≠ 渲染正常。很多结构浏览器能“容错渲染”，但一接入自动化测试、读屏器或 SEO 工具，语义断层立刻暴露。
