Emmet 缩写语法是什么?怎么用

Emmet 缩写语法是一套类似 CSS 选择器的表达式，输入后由编辑器动态解析，展开成完整的 HTML 或 CSS 代码。它适合需要频繁手写重复标签结构的网页开发场景，前提是你的编辑器已安装并启用 Emmet（或内置支持，如 VS Code 默认集成）。与普通代码片段不同，Emmet 缩写不需要事先定义，可以在输入时即时扩展。

核心机制：动态解析而非预定义片段

Emmet 官方文档指出，多数文本编辑器允许保存和复用常用代码块（snippets），但这类实现有两个共同局限：必须先定义片段，且无法在运行时扩展。Emmet 把片段思路推进了一步——你输入的是可被动态解析的 CSS 式表达式，输出结果取决于缩写内容本身。

这意味着同一个缩写模式可以随参数变化生成不同结构，不需要为每种组合单独建片段。

一个完整例子

文档给出的演示缩写：

ul#nav>li.item$*4>a{Item $}

各部分含义：

写法 作用
ul 元素类型，生成 <ul>
#nav id，生成 id="nav"
> 子元素，进入下一层
li.item$ 生成 <li class="item1">，$ 为递增编号
*4 重复 4 次
a{Item $} 生成 <a>Item 1</a> 等文本内容

展开后得到嵌套的导航列表结构。输入缩写后执行 “Expand Abbreviation”（VS Code 中默认 Tab 键）即可看到结果。

文档覆盖的语法要素

根据 Emmet Documentation 的目录，缩写语法部分包含：

  • 元素类型（Element types）：直接写标签名
  • 隐式标签名（Implicit tag names）：某些上下文可省略标签名，由 Emmet 推断
  • “Lorem Ipsum” 生成器：快速生成占位文本
  • CSS 缩写：用于 CSS 属性，含厂商前缀、渐变等
  • 模糊搜索（Fuzzy search）：不必完整输入也能匹配

配套动作

缩写只是入口，文档还列出一组围绕代码导航和编辑的动作，例如：

  • Expand Abbreviation：展开缩写
  • Balance：向外选中当前标签
  • Go to Matching Pair：跳到配对标签
  • Wrap with Abbreviation：用缩写包裹选中内容
  • Go to Edit Point：在重要代码点之间跳转
  • Select Item：选中下一个/上一个可编辑项
  • Toggle Comment：注释整个标签
  • Update Image Size、Evaluate Math Expression、Increment/Decrement Number 等

这些动作配合缩写使用，能减少手动定位和重复输入。

怎么开始

  1. 确认编辑器支持 Emmet（VS Code 等已内置）。
  2. 在 HTML 或 CSS 文件中输入一个缩写，例如 div>p。
  3. 执行 “Expand Abbreviation”（通常按 Tab），观察展开结果。
  4. 逐步加入 #id、.class、*n、{} 等，验证输出变化。
  5. 需要时查阅 docs.emmet.io 的 Abbreviations Syntax 与 Actions 章节。

常见卡点

  • 缩写未展开：检查光标位置是否在缩写末尾，以及 Tab 键是否被其他功能占用。
  • 隐式标签名推断不符合预期：显式写出标签名可避免歧义。
  • CSS 缩写与 HTML 缩写行为不同，需分别参考对应章节。

Emmet 的价值在于把“定义片段—调用片段”变成“直接写表达式—即时展开”，适合结构重复度高、需要快速搭建骨架的前端工作。

docs.emmet.io