Emmet: Emmet 是什么：HTML/CSS 提速的终极简写引擎

Emmet 就像 HTML 和 CSS 的"输入法快捷短语"——敲几个字母，按下 Tab，瞬间展开成完整代码。

1. 你将学到

• Emmet 的定位：它是什么、不是什么
• Emmet 的核心能力：HTML 简写、CSS 简写、编辑器操作
• 与手写 HTML 的对比：速度、错误率、学习曲线
• Emmet 的使用场景：编辑器选型、文件类型支持
• 后续 17 课的学习路径预览

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

(1) 痛点：手写 HTML 太慢

Alice 是一名前端开发者，最近在改公司官网的首页。每次写一个导航条，她都要重复输入 30 多行 HTML：ul 里面套 5 个 li，每个 li 里再嵌一个 a。改完导航，轮播图又是 6 张 div，每张里面再放图片和文字。一天下来，敲键盘敲到手指发酸，120 行 HTML 页面她写了整整 40 分钟。改完页面，又得给 CSS 写 margin: 10px 20px、padding: 5px、font-size: 16px，每一行都要写完整的属性名和分号。Alice 心想：写代码的时间，一半都花在"打字"上了，能不能让编辑器自己补全？

(2) Emmet 的解法

Emmet 的解法很简单：把常用 HTML/CSS 写法压缩成简写，编辑器看到简写就自动展开成完整代码。Alice 学会 Emmet 之后，同样写那个 30 行的导航条，她只需要敲 16 个字符：

ul.nav>li.item*5>a{链接 $}

按下 Tab 键，编辑器瞬间展开成 30 行完整 HTML。再写 6 张轮播图？一行 div.slider>div.slide*6>img 搞定。写 CSS？m10-20 自动变成 margin: 10px 20px，fz16 自动变成 font-size: 16px。原本 40 分钟的页面，Alice 12 分钟就写完了。

(3) 收益

Emmet 给前端开发者带来的收益是立竿见影的：HTML 编写速度提升 3-5 倍，CSS 编写速度提升 2-3 倍；手写时容易漏掉闭合标签、属性引号的情况，Emmet 自动生成则基本为零；更重要的是，开发者能把精力放在结构和样式设计上，而不是重复敲键盘。学习 Emmet 的成本也不高：本课 5 分钟建立第一印象，后续 17 课平均每课 5-10 分钟即可掌握一个核心知识点。Alice 学完全部 18 课之后，写一个完整的电商首页，从原来的 2 小时缩短到 30 分钟以内。

3. Emmet 的核心定义

Emmet（前身为 Zen Coding）是一款面向 HTML 和 CSS 的简写展开引擎，最早由 Sergey Chikuyonok 在 2009 年发布，2013 年正式更名为 Emmet。它通过解析类似 CSS 选择器的缩写字符串，实时展开为完整的 HTML 或 CSS 代码，并集成在 VSCode、WebStorm、Sublime Text 等主流编辑器中。

4. Emmet 能做什么

Emmet 的能力可以分为四类：HTML 简写、CSS 简写、编辑器操作、综合应用。下面我们分别看几个例子，建立直观印象。

(1) HTML 简写

HTML 简写是 Emmet 最常用的功能。开发者输入一段类似 CSS 选择器的缩写，编辑器按 Tab 键后立即展开为完整的 HTML 标签树。

▶ 示例：基础标签简写（难度⭐）

缩写：

ul.nav>li.item*5>a{链接 $}

展开：

<ul class="nav">
  <li class="item"><a href="">链接 1</a></li>
  <li class="item"><a href="">链接 2</a></li>
  <li class="item"><a href="">链接 3</a></li>
  <li class="item"><a href="">链接 4</a></li>
  <li class="item"><a href="">链接 5</a></li>
</ul>

输出：

浏览器渲染一个无序列表，包含 5 个带链接的列表项，`$` 符号被自动替换为递增序号 1-5。

(2) CSS 简写

CSS 简写是 Emmet 的另一大核心能力。Emmet 借鉴了 CSS 属性名的首字母，把常用的属性和值压缩成短字符串。

▶ 示例：CSS 简写预览（难度⭐）

缩写：

m10-20

展开：

margin: 10px 20px;

缩写：

p10 fz16

展开：

padding: 10px;
font-size: 16px;

输出：

`m` 是 `margin` 的首字母，`10-20` 表示上下 10px、左右 20px；`p` 是 `padding` 的简写，`fz` 是 `font-size` 的缩写。详细 CSS 简写规则将在第 11-13 课深入讲解。

(3) 编辑器操作

Emmet 不只是"输入简写 → 展开代码"，它还提供一组编辑器操作（Actions），让光标跳转、代码包裹、平衡匹配变得一键可达。

▶ 示例：展开缩写动作（难度⭐）

在 VSCode 中打开任意 .html 文件，输入 div.container>ul>li*3 后：

# Step 1: Type the abbreviation
div.container>ul>li*3

# Step 2: Press Tab (default keybinding)
# Triggers the "Expand Abbreviation" action

# Step 3: The editor expands it to:
# <div class="container">
#   <ul>
#     <li></li>
#     <li></li>
#     <li></li>
#   </ul>
# </div>

# Step 4: The cursor jumps to the first <li></li>
# You can start typing immediately

输出：

一行简写瞬间变成 6 行完整 HTML，光标定位到第一个可编辑位置，无需手动点击。详细 Actions 用法将在第 14-16 课展开。

(4) 综合演示

把 HTML 简写 + CSS 简写 + 编辑器操作组合起来，可以一行写完一个完整的登录表单。下面展示一个简化的综合案例：

▶ 示例：一个完整登录表单（难度⭐⭐）

HTML 缩写：

form#login>(input[type=text name=user placeholder="用户名"])+(input[type=password name=pwd placeholder="密码"])+(button.btn{登录})

展开：

<form id="login">
  <input type="text" name="user" placeholder="用户名">
  <input type="password" name="pwd" placeholder="密码">
  <button class="btn">登录</button>
</form>

配套 CSS 缩写：

#login{w400 bg:#f5f5f5 p20}
.btn{bg:#3b82f6 c:#fff bd:none p10-20 cur:pointer}

展开：

#login {
  width: 400px;
  background: #f5f5f5;
  padding: 20px;
}
.btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

输出：

浏览器渲染一个 400px 宽的登录卡片，包含两个输入框和一个蓝色登录按钮。从缩写输入到完整可用的表单，仅需 2 步（HTML 一行 + CSS 一行），约 5 秒。

5. 学习路径预览

本教程共 18 课，分为 6 个阶段：

学完 18 课之后，你将能用一行缩写快速搭建复杂 HTML 结构，一行写完常用 CSS 简写，用 5 个核心 Actions 让编辑速度提升 3-5 倍。

❓ 常见问题

📖 小节

• Emmet 是 HTML/CSS 简写展开引擎，2009 年发布，已集成在主流编辑器中
• 核心能力：HTML 简写（CSS 选择器式缩写）+ CSS 简写（属性名首字母）+ 编辑器 Actions
• 与手写相比：速度快 3-5 倍、错误率几乎为零，但需要记忆 8 个核心操作符
• 综合应用：一行 HTML 简写 + 一行 CSS 简写 = 5 秒搭好登录表单
• 教程共 18 课 / 6 阶段，本课是入门第 1 课，后续将深入每个操作符和场景

📝 作业

1. 基础题（难度⭐）：打开你常用的编辑器，新建一个 .html 文件，输入 div 按 Tab 键，记录展开结果。然后改成 div.box 再按 Tab，对比两次展开的差异。
2. 进阶题（难度⭐⭐）：在编辑器中输入 ul>li*3>a{项目 $} 简写，按 Tab 后观察展开结果，然后修改 $ 前的数字（如 *3 改成 *6），重新展开，记录变化。
3. 挑战题（难度⭐⭐⭐）：尝试用一行 Emmet 缩写写出一个包含导航条、轮播图、3 张卡片、页脚 4 个区域的完整首页 HTML 结构（不要求写 CSS），并用 4 个截图记录展开前后的对比。

Web-Tutorial 技术团队

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

关于我们