Emmet 用于 HTML

Source: Dev.to

编写 HTML 可能会感觉缓慢且重复。一次又一次地输入 “, `

, 以及打开和关闭标签…… 如果你只需输入 div` 就能立即得到 “，会怎样？这就是 Emmet 所做的事情。

什么是 Emmet？

Emmet 是内置于大多数代码编辑器的快捷工具。它让你通过缩写快速编写 HTML。

简单示例

你输入：

p

按 Tab →

就是这样。Emmet 将简短代码转换为完整的 HTML。

为什么使用 Emmet？

未使用 Emmet

  

    - 

    - 

    - 

  

你需要手动输入所有这些内容——大量敲键，耗费大量时间。

使用 Emmet

div.container>ul>li*3

按 Tab 键，即可瞬间得到相同的 HTML！

好处

• 编写 HTML 的速度提升 10 倍
• 减少拼写错误（不会缺少闭合标签）
• 减少重复性工作
• 专注于结构，而不是语法

Emmet 工作原理

Emmet 已内置于大多数现代代码编辑器中：

• VS Code（内置）
• Sublime Text（内置）
• Atom（内置）
• WebStorm（内置）

使用方法

1. 输入 Emmet 缩写。
2. 按 Tab 或 Enter 键。
3. 它会展开为 HTML。

这就是开始所需的全部内容！

---

基本 Emmet 语法

让我们逐一学习基础知识。

1. 创建简单元素

输入标签名并按 Tab。

示例 1

div → Tab

结果

示例 2

p → Tab

结果

示例 3

h1 → Tab

结果

### 2. 添加类

使用点号（`.`）来添加类。

**示例**

```text
div.container → Tab

结果

多个类

div.card.shadow → Tab

结果

3. 添加 ID

使用井号（#）来添加 ID。

示例

div#header → Tab

结果

类和 ID 同时使用

div#header.navbar → Tab

结果

4. 添加属性

使用方括号 [] 来添加自定义属性。

示例

a[href="https://google.com"] → Tab

结果

[](https://google.com)

多个属性

img[src="photo.jpg" alt="Photo"] → Tab

结果

[Image: Photo]

5. 添加文本内容

使用花括号 {} 在元素内部添加文本。

示例

p{Hello World} → Tab

结果

Hello World

带类名

h1.title{Welcome} → Tab

结果

欢迎

创建嵌套元素

使用 > 来创建子元素（嵌套）。

示例 1

div>p → Tab

结果

示例 2

ul>li → Tab

结果

  - 

更深层嵌套

div>ul>li → Tab

结果

  

    - 

使用类

div.container>h1.title → Tab

结果

使用乘法重复元素

使用 * 创建多个副本。

示例 1

li*3 → Tab

结果

- 

- 

- 

示例 2

div.box*4 → Tab

结果

带嵌套的情况

ul>li*5 → Tab

结果

  - 

  - 

  - 

  - 

  - 

Emmet 速查表与示例

使用 Emmet 更快编写 HTML 的快速参考。

---

综合所有内容

现在让我们把学到的内容结合起来。

示例 1 – 导航菜单

缩写

nav>ul>li*4>a → Tab

结果

  

    - []()

    - []()

    - []()

    - []()

  

示例 2 – 卡片布局

缩写

div.container>div.card*3>h2+p → Tab

结果

> **注意:** `+` 创建同级元素（位于同一层级的元素）。

---

## 使用 `+` 创建兄弟元素

使用 `+` 将元素放置在彼此旁边（兄弟元素）。

### 简单的兄弟对

**缩写**

```emmet
h1+p → Tab

结果

### 多个兄弟元素

**缩写**

```emmet
h1+p+p → Tab

结果

## 

复杂示例

缩写

header>h1+nav>ul>li*3 → Tab

结果

  - 

  - 

  - 

---

使用 Emmet 的 HTML Boilerplate

创建完整 HTML 文档的最实用快捷键。

快捷键

! → Tab

结果

  
  
  Document

替代方案： html:5 → Tab 产生相同的输出。

---

实用示例

示例 1 – 博客文章结构

缩写

article>h1.title+p.meta+div.content>p*3 → Tab

结果

## 

  

  
    

    

    

  

示例 2 – 简单表单

缩写

form>input[type="text"]+input[type="email"]+button{Submit} → Tab

结果

  
  
  Submit

示例 3 – 表格

缩写

table>tr*3>td*4 → Tab

结果

Emmet 速查表

| | **兄弟元素** |div+p|

| | **乘法** |li*3|-

| | **模板** |!或html:5` | 完整的 HTML 模板（见上文） |

---

初学者提示

1. 从简单开始 – 练习使用 div、p、h1。
2. 每天使用 – 打字越多，速度越快。
3. 不要全部记忆 – 学习最常用的快捷键。
4. 尝试每个示例 – 打开 VS Code，自己输入缩写。
5. 记住： Emmet 是可选的；你随时可以手动编写 HTML。

---

常见错误

• 忘记按 Tab – 输入缩写后，按 Tab 键展开。

• 缩写中的拼写错误

  dvi.container   → Won’t work
  div.container   → Works!

• 未检查结果 – 始终检查生成的标记并在必要时进行调整。

---

摘要

• Emmet = 用于快速编写 HTML 的快捷方式。
• 工作原理：
  1. 输入缩写。
  2. 按 Tab。
  3. Emmet 将其展开为完整的 HTML。

关键符号

• . – 类
• # – ID
• > – 子元素（嵌套）
• + – 兄弟元素
• * – 重复
• [] – 属性
• {} – 文本内容
• ! – HTML 模板

最实用的快捷键

• ! → 完整的 HTML 模板
• div.container>ul>li*5 → 快速生成列表结构
• form>input[type]*3 → 简单表单

立即开始使用 Emmet，你会惊讶于自己以前是如何在没有它的情况下编码的！