Emmet: 平衡跳转选择：编辑加速三件套 + Toggle Comment

Q: Select Item 选中 HTML 元素时，class 和 id 算同名元素吗？

不算。Select Item 的"同名"是按标签名（tag name）匹配的（ <p> vs <p> ），不是按 class 或 id。所以 <p class="a"> 和 <p class="b"> 都被 Select Item 视为"同名元素"。如果想按 class 选中，需要用 VSCode 的"Change All Occurrences"（ Ctrl+F2 ）——这是 IDE 自带功能，不是 Emmet 提供的。

Q: Remove Tag 后想恢复外层标签怎么办？

Remove Tag 不带"撤销"语义——按 1 次删 1 层。但 VSCode 的 Ctrl+Z 撤销能恢复。所以 Remove Tag 后的"后悔"操作是 Ctrl+Z 。如果频繁需要"剥壳 + 恢复"操作，建议用 Wrap 的反向（先 Remove Tag 再 Wrap）——但实际开发中很少需要，因此 Remove Tag 通常配合撤销键。

第 14-15 课你学会了 Expand（展开）和 Wrap（包装）——Emmet 的两大核心"输入类" action。但实际开发中，展开后还要改——比如改 5 个 <li> 的内容、加注释、删外层标签。本课教 Emmet 的"编辑类"三件套：Balance（平衡）/ Next Edit Point（跳编辑点）/ Select Item（选中元素），加上 Toggle Comment（切换注释）和 Remove Tag（删除外层标签）。这 5 个 action 让你在"展开后"继续加速 3-5 倍。

1. 你将学到

Balance / Go to Matching Pair：跳转到匹配的 HTML 标签（CSS 括号），支持 inward / outward 双向跳转
Next/Previous Edit Point：在 Emmet 展开后的多个 tabstop（可编辑点）间跳转
Select Item：选中当前元素的逐级粒度（标签名 → 完整属性 → 属性值 → distinct class → 整个元素），不跨元素
Toggle Comment：HTML 注释  / CSS 注释 /* */ 切换（基于上下文智能）
Remove Tag：删除外层标签但保留内容（重命名或剥壳）

2. 一个前端开发者的真实故事

(1) 痛点：展开 100 行 HTML 后，定位到要改的地方需要 30 秒

Alice 写好博客文章页面的 HTML 容器：

HTML

<article>
  <header>
    <h1>Hello World</h1>
    <time>2026-07-31</time>
  </header>
  <section>
    <p>...</p>
    <p>...</p>
  </section>
  <footer>
    <address>...</address>
  </footer>
</article>

她接下来要批量替换 3 处：

把 <h1>Hello World</h1> 改成 <h1>Hello Emmet</h1>
给 2 个 <p> 各加 1 行 lorem 占位文案
给 <footer> 加注释

她的工作流：

找 <h1>：Ctrl+F → 输入 Hello World → 替换为 Hello Emmet（5 秒）
找第 1 个 <p>：按 Ctrl+F → 替换（5 秒）；找第 2 个 <p>：再按 Ctrl+F（5 秒）
找 <footer>：按 Ctrl+F → 加注释（5 秒）

合计 20 秒，9 次 Ctrl+F 操作。Alice 心想：HTML 明明是树形结构，应该有"按结构跳转" 的快捷键——光标移到 <h1>、按 1 个键直接跳到 </h1>、按 1 个键跳到外层 <header>……Emmet 应该有这种"树结构快捷键"。

(2) Emmet 编辑三件套的解法

Emmet 的 5 个编辑类 action 是"树结构快捷键"——让 HTML/CSS 树形结构成为你的导航工具。

Alice 的解法：

Balance（平衡）：光标在 <h1> 内，按 Ctrl+Alt+B 选到 </h1> 闭合标签 → 2 秒
Next Edit Point（跳编辑点）：展开 ul>li*3 后，按 Ctrl+Alt+→ 跳到每个 li 的内容位置 → 5 秒
Select Item（选中元素）：光标在 <p> 上，按 Shift+Ctrl+. 选中下一个 <p> → 3 秒
Toggle Comment（切换注释）：光标在 <footer> 上，按 Ctrl+/ 添加  注释 → 1 秒
Remove Tag（删除外层）：光标在 <h1> 上，按 Shift+Ctrl+; 删除 <h1> 但保留 "Hello World" → 2 秒

合计 13 秒，5 次快捷键操作。比 Ctrl+F 替换快 35%，且 0 误替换（Ctrl+F 容易替换多处）。

(3) 收益

编辑三件套把"展开后改"的时间从 20 秒降到 13 秒，更重要的是减少误操作——Ctrl+F 替换容易跳过/多替换；Emmet 的结构导航按 HTML 树形结构移动，不会误改。光这 5 个 action 学完，Alice 写一个 5 段文章页的总编辑时间从 5 分钟降到 2 分钟。

3. 5 个编辑类 action 的核心定义

Emmet 提供 5 个"编辑加速" action，覆盖展开后的 5 大常见操作：标签跳转、tabstop 跳转、元素选择、注释切换、外层删除。

Action	作用	适用场景
Balance	选中内容（内/外平衡）	选中当前标签内容/外层
Go to Matching Pair	跳转到匹配标签	移到 `</tag>` 或 `<tag>`
Next/Previous Edit Point	跳转到下一个/上一个 tabstop	展开后定位可编辑位置
Select Item	选中下一个/上一个同名元素	批量选中同类元素
Toggle Comment	切换注释	HTML/CSS 智能注释
Remove Tag	删除外层标签	剥壳保留内容

📌 重点： Balance 和 Go to Matching Pair 是两个不同的 action。Balance 选中（内容或标签名），Go to Matching Pair 跳转（光标移到匹配位置）。这是新手最容易混淆的——前者"选中"，后者"跳转"。

4. 触发键对比：4 款编辑器

5 个 action 在 4 款主流编辑器中的触发键差异较大，原因是这些是较新的 action，各编辑器实现进度不一致。关键事实：VSCode 对 Emmet 内置 action 的默认键绑定只有 1 个——Tab 触发展开缩写（第 14 课）。其他 Emmet action（Balance / Wrap / Select Item / Remove Tag 等）VSCode 均无默认快捷键，必须通过命令面板或用户自定义 keybindings.json 触发。

Action	VSCode	WebStorm	Sublime	Atom
Expand Abbreviation	`Tab`（默认，第 14 课）	`Tab`	`Ctrl+E`	`Tab`
Balance	无默认（命令面板 / 自定义 keybindings.json）	`Ctrl+]`	`Ctrl+D`	`Ctrl+Alt+B`
Go to Matching Pair	无默认（命令面板 / 自定义 keybindings.json）	`Ctrl+M`	`Ctrl+Alt+J`	`Ctrl+Alt+J`
Next Edit Point	无默认（命令面板 / 自定义 keybindings.json）	`Ctrl+Alt+→`	`Ctrl+Alt+→`	`Ctrl+Alt+→`
Select Item	无默认（命令面板 / 自定义 keybindings.json）	`Shift+Alt+.`	`Shift+Ctrl+.`	`Shift+Ctrl+.`
Toggle Comment	无 Emmet 默认（VSCode 自带 `Ctrl+/` 注释当前行）	`Ctrl+/`	`Ctrl+/`	`Ctrl+/`
Remove Tag	无默认（命令面板 / 自定义 keybindings.json）	`Ctrl+Shift+Delete`	`Ctrl+Shift+;`	`Ctrl+Shift+;`

💡 提示： 表中"无默认"指 VSCode 出厂未绑定该 Emmet action。用户社区常见的自定义（如 Ctrl+Alt+B / Shift+Ctrl+. / Shift+Ctrl+; 等）必须在 keybindings.json 中显式声明 "command": "editor.emmet.action.balance" / "editor.emmet.action.selectItem" / "editor.emmet.action.removeTag" 等才能生效。首次使用建议用命令面板（Ctrl+Shift+P → Emmet: Balance 等）触发——既能验证编辑器是否支持该 action，也能看到确切的命令名（再据此写入 keybindings.json）。

5. Mermaid 图：编辑器光标移动路径

下面这张图展示 Emmet 展开 ul>li*3 后，光标在展开后的可编辑点（tabstop）之间跳转的路径。

graph TB
    Start([用户输入 ul>li*3<br>按 Tab 展开]) --> Expand[Emmet 展开 4 行 HTML]
    Expand --> S1[tabstop 1:<br>ul 内第一个 li 的内容位置]
    S1 -->|按 Ctrl+Alt+→| S2[tabstop 2:<br>ul 内第二个 li 的内容位置]
    S2 -->|按 Ctrl+Alt+→| S3[tabstop 3:<br>ul 内第三个 li 的内容位置]
    S3 -->|按 Ctrl+Alt+→| End([展开结束点:<br>ul 闭合标签后])
    S1 -->|按 Ctrl+Alt+←| Start
    S2 -->|按 Ctrl+Alt+←| S1
    S3 -->|按 Ctrl+Alt+←| S2
    End -->|按 Ctrl+Alt+←| S3

    style Start fill:#3b82f6,color:#fff
    style Expand fill:#8b5cf6,color:#fff
    style S1 fill:#10b981,color:#fff
    style S2 fill:#10b981,color:#fff
    style S3 fill:#10b981,color:#fff
    style End fill:#ef4444,color:#fff

📌 重点： ul>li*3 展开后有 3 个 tabstop（每个 li 的内容位置）+ 1 个结束点（</ul> 后）。Next Edit Point 在这些点之间逐个跳转。Backward 跳到上一个点，Forward 跳到下一个点。值得注意的是：这不是"按 Tab 键"——按 Tab 键在 VSCode 中是"缩进"或"接受 Emmet 展开"（如果还在原缩写），但展开后想继续跳 tabstop，需要用 Ctrl+Alt+→ 而不是 Tab。

6. 实战示例

下面 5 个示例覆盖编辑三件套 + Toggle Comment + Remove Tag 的核心场景。

▶ 示例：Balance 跳到匹配 `<div>` 标签（难度⭐）

最常用的"标签跳转"——光标在 <div> 内，按 Balance 选中内容，再次按选中整个标签。

原始代码：

HTML

<div class="container">
  <p>Hello World</p>
</div>

操作步骤：

光标放在 <p>Hello World</p> 内容区（任意位置）
按 Ctrl+Alt+B 一次 → 选中 Hello World（内容）
再按 Ctrl+Alt+B → 选中 <p>Hello World</p>（整个 p 标签）
再按 Ctrl+Alt+B → 选中整个 <div> 包含的所有内容
连续按 Ctrl+Alt+B → 选中范围逐级扩大（outward balance）

再次按下（Shift+Ctrl+Alt+B）→ 选中范围收缩（inward balance）

输出：

TEXT 📖 仅展示

解析：Balance 的"双向平衡"是 Emmet 独有的特性——大多数编辑器只有"向外扩展"（outward），但 Emmet 支持向内收缩（inward）。这种"选区大小可调"的设计让 Balance 成为 HTML 编辑的多功能工具：选 1 个字、选 1 个标签、选 1 个容器、选 1 个 section——按 Balance 次数逐级调整。**重要细节**：Emmet 的 Balance 不是"光标移动"——是"选区变化"。光标留在原位置，但选中的范围在扩大或缩小。如果只想"跳转"不"选中"，用 Go to Matching Pair。

▶ 示例：Next Edit Point 在展开后跳 tabstop（难度⭐⭐）

ul>li*3 展开后，按 Ctrl+Alt+→ 跳到每个 li 的内容位置。

原始代码：

HTML

ul>li*3

操作步骤：

按 Tab 触发 Expand → 4 行 HTML 展开
光标在 tabstop 1（第一个 li 内）
按 Ctrl+Alt+→ → 跳到 tabstop 2（第二个 li 内）
按 Ctrl+Alt+→ → 跳到 tabstop 3（第三个 li 内）
按 Ctrl+Alt+→ → 跳到结束点（</ul> 后）

展开后 HTML：

HTML

<ul>
  <li>|</li>
  <li>|</li>
  <li>|</li>
</ul>

输出：

TEXT 📖 仅展示

解析：第 14 课讲 Expand Abbreviation 时提到"展开后包含 tabstop"——但没说怎么跳。Next Edit Point 就是"跳到下一个 tabstop" 的专用 action。`Ctrl+Alt+→` 是 forward（向前），`Ctrl+Alt+←` 是 backward（向后）。**为什么不用 Tab 键？** 因为 Tab 键在展开完成后被 VSCode 视为"缩进"（光标在 li 的内容位置后，本身就在一个"可编辑位置"），不会再触发 Emmet 跳转。要"在 tabstop 间跳转"，用 `Ctrl+Alt+→`。这是 Emmet 区分"输入触发"（Tab）和"编辑跳转"（Ctrl+Alt+→）的关键设计。

▶ 示例：Select Item 选中当前元素逐级粒度（难度⭐⭐）

HTML 中有 1 个带 class 的 <p>，光标在文本上，按 Select Item 逐级扩展选区——只在当前元素内，不会跳到相邻元素。

原始代码：

HTML

<p class="fruit">Apple</p>

操作步骤：

光标放在 <p class="fruit">Apple</p> 内的 Apple 文本上
按 Shift+Ctrl+. 一次 → 选中 Apple（文本节点）
再按 → 选中 fruit（distinct class 名）
再按 → 选中 class="fruit"（attribute value）
再按 → 选中 class="fruit"（full attribute）
再按 → 选中整个 <p class="fruit">Apple</p>（整个元素）

输出：

TEXT 📖 仅展示

解析：Select Item 的"扩展选区"只在**当前元素内**逐级深入——从文本 → distinct class → attribute value → full attribute → 整个元素（官方文档原话："expands current selection to its parent item"）。它**不会跨元素**——要从 `<p>Apple</p>` 跳到下一个 `<p>Banana</p>` 批量选中，需用 VSCode 的 `Ctrl+F2` (Change All Occurrences) 或 multi-cursor（`Ctrl+D` 选下一个、`Ctrl+Shift+L` 选全部同名），那是 IDE 自带功能，不是 Emmet。**`Shift+Ctrl+.` 是 forward（向外扩展）**，`Shift+Ctrl+,` 是 backward（向内收缩）。CSS 中类似：selector → property → value；适用于"快速选中 CSS 一行属性"等场景。这种"按粒度扩展"模仿的是 JetBrains 系 IDE 的 Extend Selection（W/A 风格）。

▶ 示例：Toggle Comment 切换注释（难度⭐）

HTML 中光标在 <footer> 标签上，按 Ctrl+/ 添加  注释。

原始代码（无注释）：

HTML

<footer>
  <address>contact@example.com</address>
</footer>

操作步骤：

光标放在 <footer> 标签上任意位置
按 Ctrl+/ → 整个 <footer> 标签被  包裹

展开后：

HTML

<!-- <footer>
  <address>contact@example.com</address>
</footer> -->

再次按 Ctrl+/ → 注释取消（恢复原 HTML）

输出：

TEXT 📖 仅展示

解析：Toggle Comment 的"上下文智能"是 Emmet 区别于普通编辑器注释的关键。普通 `Ctrl+/` 只注释当前行；Emmet 的 Toggle Comment 会**识别当前上下文**——HTML 中注释整个标签（因为 HTML 注释可以跨行），CSS 中注释当前规则（rule）或属性（property）。这种"上下文感知"让 Toggle Comment 比 IDE 自带的注释好用——少按几次键盘。**注意**：CSS 中的 Toggle Comment 同样有上下文——光标在 `padding: 10px;` 整行上，按 `Ctrl+/` 注释的是整个 `padding: 10px;`；光标在 `padding` 单词上，按 `Ctrl+/` 注释的还是 `padding: 10px;`（整个属性）。HTML 中也类似——光标在 `<p>` 任意位置都是注释整个 `<p>...</p>`。

▶ 示例：Remove Tag 删除外层标签保留内容（难度⭐⭐）

光标在 <h1> 上，按 Shift+Ctrl+; 删除 <h1></h1> 但保留文字内容。

原始代码：

HTML

<h1>Hello World</h1>

操作步骤：

光标放在 <h1> 标签上
按 Shift+Ctrl+; → 删除 <h1> 和 </h1>，保留 "Hello World"

展开后：

HTML

Hello World

复合场景：删除嵌套外层

原始代码：

HTML

<section class="hero">
  <h1>Welcome</h1>
</section>

操作步骤：

光标放在 <section> 标签上
按 Shift+Ctrl+; → 删除 <section> 和 </section>，保留 <h1>Welcome</h1>

展开后：

HTML

<h1>Welcome</h1>

输出：

TEXT 📖 仅展示

解析：Remove Tag 的"剥壳保留内容"是 Emmet 编辑类 action 中最简洁的一个——按 1 次键删除外层标签。常见场景：① 设计稿改版，原来的 `<header>` 容器不想要了，但里面的 `<h1>` 文字要保留；② 调试时临时删外层观察样式；③ 重构时减小 DOM 嵌套。注意：Remove Tag 不会 1 次删多层——想删 3 层嵌套（div > section > h1），需要连续按 3 次 `Shift+Ctrl+;`。`Shift+Ctrl+;` 中的分号键（`;`）在很多编辑器上是"宏命令"键——对应 Emmet 内部的 `removeTag` 命令。

7. 5 个 action 的选用决策树

实际开发中，5 个 action 经常需要组合使用。下面是选用决策树：

场景	推荐 Action	原因
想跳到 `</tag>` 看闭合标签	`Go to Matching Pair`	只跳转，不选中
想选中整个 `<tag>` 复制	`Balance`	选区扩大 1 级
想批量替换 5 个 `<p>`	`Select Item`	逐个选中同名元素
想给 `<div>` 加注释	`Toggle Comment`	上下文智能注释
想临时删外层 `<div>` 调试	`Remove Tag`	剥壳保留内容
展开后定位可编辑位置	`Next Edit Point`	跳到 tabstop

❓ 常见问题

Q Balance 和 Go to Matching Pair 有什么区别？

A Balance 选中（选区变化），Go to Matching Pair 跳转（光标移动）。前者适合"复制整个标签"，后者适合"定位到闭合标签看一下"。举实际场景：编辑嵌套 HTML 时，想看 <section> 在哪结束——用 Go to Matching Pair 跳过去；想复制 <section>...</section> 整段——用 Balance 选中。两者都常用，建议都记。

Q 按 Ctrl+Alt+→ 跳到下一个 tabstop，但展开后直接按 Tab 不是更简单？

A Tab 键在 VSCode 展开后是"光标在 li 内容位置"的常规缩进键——它不会触发 Next Edit Point。Tab 与 Next Edit Point 是两个不同的机制：用 Tab 接受补全或缩进，用 Ctrl+Alt+→ 跳到下一个可编辑点。如果想用 Tab 跳 tabstop，需要在 settings.json 中启用 emmet.triggerExpansionOnTab 为 true（默认就开），但这只对"展开前"生效——展开后 Tab 就不再具有"跳 tabstop" 的语义。

Q Select Item 选中 HTML 元素时，class 和 id 算同名元素吗？

A 不算。Select Item 的"同名"是按标签名（tag name）匹配的（<p> vs <p>），不是按 class 或 id。所以 <p class="a"> 和 <p class="b"> 都被 Select Item 视为"同名元素"。如果想按 class 选中，需要用 VSCode 的"Change All Occurrences"（Ctrl+F2）——这是 IDE 自带功能，不是 Emmet 提供的。

Q Remove Tag 后想恢复外层标签怎么办？

A Remove Tag 不带"撤销"语义——按 1 次删 1 层。但 VSCode 的 Ctrl+Z 撤销能恢复。所以 Remove Tag 后的"后悔"操作是 Ctrl+Z。如果频繁需要"剥壳 + 恢复"操作，建议用 Wrap 的反向（先 Remove Tag 再 Wrap）——但实际开发中很少需要，因此 Remove Tag 通常配合撤销键。

📖 小节

编辑三件套：Balance（选区变化）/ Next Edit Point（跳 tabstop）/ Select Item（选中同名元素）
Toggle Comment：HTML 注释整个标签，CSS 注释整行属性（上下文智能）
Remove Tag：删除外层标签但保留内容（剥壳），按 1 次剥 1 层
Go to Matching Pair：跳转（不选中）；Balance：选中（变化选区）
触发键：VSCode Ctrl+Alt+B / Ctrl+Alt+→ / Shift+Ctrl+. / Ctrl+/ / Shift+Ctrl+;
Next Edit Point ≠ Tab 键：Tab 是缩进/接受补全；Ctrl+Alt+→ 是跳 tabstop

📝 作业

基础题（难度⭐）：在你的 HTML 文件中写一段嵌套结构（<div><section><p>...</p></section></div>），光标放在 <p> 上，按 Balance 5 次，记录每次选中的范围（"内容"→"p 标签"→"section 内容"→"section 标签"→"div 标签"）。截图选区变化。
进阶题（难度⭐⭐）：在你的 HTML 文件中写 3 个 <p> 元素（<p>One</p>、<p>Two</p>、<p>Three</p>），光标在第 1 个 <p> 标签名上，按 Select Item 6 次（Shift+Ctrl+.），记录每次选中的具体内容（标签名/完整内容/下一个标签名/下一个完整内容）。最后用 Toggle Comment 给 3 个 <p> 整体加注释。
挑战题（难度⭐⭐⭐）：编写一个完整的 HTML 落地页容器（article > header + section + footer 3 层嵌套），用 5 个 action 组合优化：(a) Expand 展开 article>header>h1+section.content>p*3+footer.address；(b) Next Edit Point 跳到每个 p 填充内容；(c) Balance 选中整个 article 标签复制；(d) Toggle Comment 给 footer 加注释；(e) Remove Tag 临时删除 article 观察样式（用 Ctrl+Z 撤销）。记录 5 个 action 的触发顺序与最终状态，写一份"编辑三件套工作流" vs "Ctrl+F 替换" 的效率对比报告。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们

Emmet: 平衡跳转选择：编辑加速三件套 + Toggle Comment

1. 你将学到

2. 一个前端开发者的真实故事

(1) 痛点：展开 100 行 HTML 后，定位到要改的地方需要 30 秒

(2) Emmet 编辑三件套的解法

(3) 收益

3. 5 个编辑类 action 的核心定义

4. 触发键对比：4 款编辑器

5. Mermaid 图：编辑器光标移动路径

6. 实战示例

▶ 示例：Balance 跳到匹配 <div> 标签（难度⭐）

▶ 示例：Next Edit Point 在展开后跳 tabstop（难度⭐⭐）

▶ 示例：Select Item 选中当前元素逐级粒度（难度⭐⭐）

▶ 示例：Toggle Comment 切换注释（难度⭐）

▶ 示例：Remove Tag 删除外层标签保留内容（难度⭐⭐）

7. 5 个 action 的选用决策树

❓ 常见问题

📖 小节

📝 作业

🙏 帮我们做得更好

▶ 示例：Balance 跳到匹配 `<div>` 标签（难度⭐）