Emmet: 嵌套：子级 `>` 与兄弟 `+` 操作符构建 HTML 树形结构
HTML 是一棵树：每个标签要么是另一个标签的子级（嵌套在里面），要么是兄弟（同级相邻）。
>和+就是这两个关系的简写。
1. 你将学到
- 嵌套操作符
>表示"父元素直接包含子元素" - 兄弟操作符
+表示"同层级相邻元素" >与+的混合使用：先下钻后平铺- 多层嵌套：
>连续使用把简写串成深树 - 兄弟链：多个
+把同层元素串成一行
2. 一个前端开发者的真实故事
(1) 痛点：手写嵌套 HTML 又慢又乱
Alice 在一家电商公司工作，最近要写一个产品落地页（landing page）。整个页面就 4 个区块：顶部导航条、英雄区（hero）、3 张特性卡片、页脚。她打开编辑器准备手写，结果一上来就面对 5 层的嵌套：
<body>
<header>
<nav>
<ul>
<li><a href=""></a></li>
</ul>
</nav>
</header>
...
</body>
每写一层就要考虑"我现在在哪个标签里"，每写一个 </li> 都要回头检查闭合顺序。她算了一下：写完这个 60 行的页面嵌套结构，需要花 15 分钟；其中 8 分钟花在"找正确的闭合位置"上。手写嵌套不仅慢，而且容易错——一不留神 </div> 就闭合错行了。
(2) > 与 + 的解法
Emmet 用两个操作符表达"父子"和"兄弟"关系，写法和 CSS 选择器一致——Alice 用一行简写就能展开整个导航：
body>header>nav>ul>li*5>a
> 表示"嵌套一层"，*5 表示"重复 5 次"，每个 li 都自动带一个 a。从 5 层嵌套到一行简写，从 15 分钟到 8 秒。学完本课之后，你将能用 > 和 + 在一行内表达任意深度、任意分支的 HTML 树形结构。
(3) 收益
> 和 + 是 Emmet 的地基——后面要学的爬升 ^、乘法 *、分组 () 都是在它俩基础上叠加。掌握这两个操作符之后，Alice 写嵌套结构的速度提升 10 倍；写完就自动展开，没有"闭合顺序错乱"的烦恼。后续 4 课会逐层叠加 ^ * () . # $，学会本课是后面 4 课的前置条件。
3. 嵌套操作符 >：父元素直接包含子元素
> 表示下钻——简写中下一个元素是前一个元素的直接子节点。它是 Emmet 表达"父子嵌套"的核心符号，写法和 CSS 的子选择器完全一致。
| 简写片段 | 含义 | 视觉位置 |
|---|---|---|
div>span |
span 是 div 的直接子节点 |
span 比 div 往里缩一层 |
div>section>p |
p 是 section 的子节点，section 是 div 的子节点 |
缩进 2 层 |
nav>ul>li |
3 层嵌套 | 缩进 3 层 |
> 不会改变前一个元素的位置，只会决定后续元素往哪一层"下钻"。一旦写了 >，所有后续元素（直到出现 ^ 或离开子树）都会在那一层。
(1) 单层嵌套示意
📝 说明： 上述树状图按本教程规范 §7（Mermaid 预算）要求已移除——仅 Lesson 06 允许使用 1 张 Mermaid 图。请结合上文
>嵌套表与下文+兄弟表对比理解：>形成父子关系（缩进一层），+形成平级兄弟（缩进相同）。
两个子元素都通过 > 进入 div，所以 p 和 span 是平级的兄弟（但它们是 div 的子节点）。
4. 兄弟操作符 +：同层级相邻元素
+ 表示兄弟——简写中下一个元素与前一个元素在同一层级，但位置上紧邻。它对应 CSS 的相邻兄弟选择器（Adjacent Sibling Selector）。
| 简写片段 | 含义 | 视觉位置 |
|---|---|---|
h1+p |
p 与 h1 同级相邻 |
两者缩进相同 |
div+div |
两个 div 平级 |
形成兄弟链 |
nav+main+aside |
3 个兄弟平级 | 典型的三栏布局 |
+ 和 > 一起出现时，> 才是"下钻"信号，+ 只是"平级追加"。例如 a>b+c 表示：先下钻到 a 内部生成 b，然后留在 a 内追加 c，最终结构是 <a><b></b><c></c></a>。
5. 实战示例
下面 5 个示例覆盖了 > 和 + 的全部核心场景——从最基础的"父子"到多层混合的"复杂树"。
▶ 示例：单层嵌套 nav>ul>li（难度⭐）
3 层垂直嵌套，最直观的"父子"演示。
缩写：
nav>ul>li
展开：
<nav>
<ul>
<li></li>
</ul>
</nav>
输出：
TEXT 📖 仅展示一个 3 层嵌套的导航骨架：nav 包 ul，ul 包 li。`>` 每出现一次就往里"缩进"一层。这个简写虽然简单，但展示了 Emmet 表达"父子"的最基本方式——所有更复杂的结构都是在这个基础上叠加其他操作符。
▶ 示例：兄弟元素 h1+p（难度⭐）
+ 让两个标签平级相邻。
缩写：
h1+p
展开：
<h1></h1>
<p></p>
输出：
TEXT 📖 仅展示两个标签缩进相同、紧挨着出现在同一层。这种结构常用于文章页：标题下面紧跟段落。`+` 不会创建新的"外层容器"，它只是把元素以兄弟方式放在前一个元素旁边。
▶ 示例：嵌套与兄弟混合 div>header>h1+nav+main>p+footer（难度⭐⭐）
> 下钻，+ 平级追加——一行写完 5 层混合结构。注意 p 和 footer 都属于 main 的子节点（+ 不会跳出当前层）。
缩写：
div>header>h1+nav+main>p+footer
展开：
<div>
<header>
<h1></h1>
<nav></nav>
<main>
<p></p>
<footer></footer>
</main>
</header>
</div>
输出：
TEXT 📖 仅展示解析路径：div 之下是 header（>）；header 之下有 h1、nav、main 三个兄弟（连续 +）；最近下钻位置在 main，所以 main 内追加 p 和 footer。注意：footer 并非页面底部那个 footer——这里它成了 main 的子节点，是典型的 ">" 与 "+" 混合陷阱。要想 footer 与 header/main 平级，需要爬升符 ^（下一课学）。
▶ 示例：多层嵌套 + 乘法 article>section>p*3（难度⭐）
> 多层下钻 + *3 让最后的 p 重复 3 次。这里预览第 05 课的 * 操作符——完整的乘法规则下一课展开。
缩写：
article>section>p*3
展开：
<article>
<section>
<p></p>
<p></p>
<p></p>
</section>
</article>
输出：
TEXT 📖 仅展示`*3` 作用在 `p` 上，把 p 重复 3 次——注意 3 个 p 都是 section 的直接子节点，互为兄弟。`article>section` 是下钻两次（缩进 2 层），然后在 section 内部重复 3 个段落。如果想让 section 也重复，缩写应改为 `article>(section>p*3)*2`（用括号分组，第 06 课展开）。
▶ 示例：综合页面骨架 body>header+main+footer（难度⭐⭐）
经典的 HTML5 页面骨架——4 个顶层标签，body 是根，header/main/footer 三兄弟。
缩写：
body>header+main+footer
展开：
<body>
<header></header>
<main></main>
<footer></footer>
</body>
输出：
TEXT 📖 仅展示HTML5 标准三段式骨架：header 在上、main 在中、footer 在下，全部是 body 的直接子节点。这是大多数现代网站的"骨架简写"，可以背下来作为任何页面的起点。后续在 header、main 内部再下钻填充内容即可。
6. 完整示例：一篇文章页骨架
把 > 和 + 组合起来，搭建一个语义完整的博客文章页骨架。
▶ 示例：博客文章页骨架（难度⭐⭐）
缩写：
body>header+main>article>(header>h1+p.time)+section*3>p+aside>ul>li*3+footer
展开：
<body>
<header></header>
<main>
<article>
<header>
<h1></h1>
<p class="time"></p>
</header>
<section>
<p></p>
</section>
<section>
<p></p>
</section>
<section>
<p></p>
</section>
<aside>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</aside>
<footer></footer>
</article>
</main>
<footer></footer>
</body>
输出：
TEXT 📖 仅展示解析这一行的关键：从 body 出发，先下钻到 main（>），main 内放 article（再次 >）。在 article 内用括号分组把 header（包含 h1 和 p.time）作为独立子树，再用 *3 重复 3 次 section（每个 section 内放 p）。最后用 + 平铺 aside 和 footer。注意：最外层的 footer 与 header/main 平级；article 内部还有一个 footer，缩进和顶层 footer 不同——这就是嵌套与兄弟混合的典型用法。
❓ 常见问题
> 和 + 哪个优先级高？> 总是先解析，遇到 > 就把后续元素塞进新一层；+ 只在当前层追加兄弟。如果要"先平铺再下钻"或"先下钻再爬升"，需要用第 05 课的爬升符 ^ 或第 06 课的分组 ()。a>b+c 展开后 b 和 c 是兄弟吗？a>b+c 展开为 <a><b></b><c></c></a>，b 和 c 都是 a 的子节点，互为兄弟，但它们都在 a 内部。+ 不会让 c 跳出 a。div>header>h1+nav+main>p+footer 里的 footer 会跑到 main 里面？> 把上下文推进到了 main 内部，+ 默认在当前层（main 内）追加兄弟。所以 footer 成了 main 的子节点，而不是与 header/main 平级。这种"误嵌"的情况需要用爬升符 ^ 修正（第 05 课）。> 和 +？div p 和 div>p 完全不同：前者不会展开，后者会展开成嵌套结构。如果想在编辑器里"格式化"缩写让它更好读，目前的官方方案是用括号分组（第 06 课）。📖 小节
>表示父元素直接包含子元素，等价于 CSS 的子选择器+表示同层级相邻元素，等价于 CSS 的相邻兄弟选择器- 多个
>形成多层嵌套；多个+形成兄弟链 >与+混合时，>改变当前上下文层，+在当前层追加兄弟+不会跳出当前层；要"跳出去"得用爬升符^（下一课）- HTML5 标准骨架
body>header+main+footer可以作为任何页面的起点
📝 作业
- 基础题（难度⭐）：写出 4 个 Emmet 简写，分别展开为：(a) 一个
div包含一个p；(b)h1和p平级；(c)nav包含ul，ul包含 3 个li；(d)body包含header、main、footer三兄弟。 - 进阶题（难度⭐⭐）：分析缩写
div>(header>ul>li*2>a)+footer>p的结构（不要急着写答案，先用纸笔画出层级），列出所有元素的父子关系。然后在编辑器中展开验证。 - 挑战题（难度⭐⭐⭐）：用一行 Emmet 简写展开一个完整的"产品落地页"骨架——包含顶部导航、英雄区、3 张特性卡片、底部页脚；解释为什么简写里的
>和+数量决定了最终嵌套深度，并写出至少 3 种等效的简化版本（用括号或爬升）。
