HTML嵌套必须遵循父元素的内容模型：<p>仅允许phrasing content（如<strong>），禁止<div>等块级元素；<span>不能破坏父级约束；<code>内不可嵌块级标签；语义错误嵌套虽可能渲染，但损害可访问性与JS/CSS可靠性。
格式化标签（如 <strong>、<em>、<span>、<code>）本身不决定块/行级行为，但它们的嵌套必须服从父容器的内容模型——不是“能不能写进去”，而是“父标签允不允许你放这个”。
为什么 <p> 里不能套 <div>，但能套 <strong>
<p> 只接受 phrasing content（短语级内容），W3C 明确列出允许子元素：文本、<em>、<strong>、<span>、<img>、<a> 等，但明确排除 <div>、<ul>、<h2> 等块级或结构型标签。
浏览器解析到 <p><div>xxx</div></p> 时，会在 <div> 开始前就自动闭合 <p>，结果 DOM 变成：<p></p><div>xxx</div>。
- CSS 中
p > div永远不匹配 -
document.querySelector('p').children返回空 NodeList -
<strong>在<p>内完全合法，且可多层嵌套：<p>这是一段<em>强调中再<strong>加粗</strong></em>的文字</p>
<span> 看似自由，其实有隐性限制
<span> 是通用行内容容器，但它本身不改变语义，也不豁免父级约束。它不能出现在禁止行内容的地方。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
<ul><span><li>项1</li></span></ul>——<ul>只允许直接子元素为<li>，<span>插入后会被浏览器移出，变成<ul></ul><span><li>项1</li></span> - ✅ 正确：
<ul><li><span class="highlight">项1</span></li></ul> - ⚠️ 注意：
<span>不能替代语义标签。比如用<span><strong>标题</strong></span>包裹标题文字，不如直接用<h3>；无障碍阅读器不会把它当标题识别
<code> 和 <pre> 的嵌套边界在哪
<code> 表示一段计算机代码，属于行内容；<pre> 是预格式化块容器，允许换行和空格保留。二者常配合使用，但嵌套顺序不能颠倒：
- ✅ 推荐：
<pre><code>console.log('hello');</code></pre>—— 语义清晰，<pre>处理空白，<code>标注类型 - ❌ 错误：
<code><pre>...</pre></code>——<code>不接受块级子元素，<pre>会被踢出，DOM 结构断裂 - ⚠️ 注意：
<code>内部不能再嵌<div>或<p>；若需高亮某部分词，用<span>（如<code>for <span class="keyword">let</span> i = 0;</code>）
容易被忽略的“合法但有害”嵌套
有些嵌套 W3C 不报错，但会破坏可访问性或 SSR hydration：
-
<a>内嵌<button>或另一个<a>—— 浏览器可能渲染，但屏幕阅读器会混乱，且违反交互语义 -
<h1>里套<div>—— 虽然部分浏览器容错通过，但 SEO 和无障碍工具会降权该标题 - 在
<table>的<td>里用<p>包文字 —— 合法，但多余；<td>默认支持流式内容，加<p>反而增加样式干扰点
真正关键的不是“浏览器有没有报错”，而是“DOM 是否按你写的建”“CSS 选择器是否还有效”“JS 查询是否还能拿到预期节点”——这些都得靠开发者工具的 Elements 面板逐层验证，不能只看页面“看起来对”。
