📅 最后修改于: 2023-12-03 15:30:37.375000 🧑 作者: Mango
Emmet 是一种简化和加速 HTML、CSS 和 XSLT 代码编写的语言。它的创始人是叶小钗 (Sergey Chikuyonok)。
使用 Emmet 可以极大地提高开发效率，只需输入简单的代码片段就可以快速生成复杂的 HTML、CSS、XSLT 等代码，在前端开发中特别有用。
在 HTML 中，Emmet 提供了一些快捷方式，可以通过缩写，快速生成 HTML 模板。下面是一个标准的 HTML 模板示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
使用 Emmet 缩写可以更快速地生成相同的 HTML 模板：
! + Tab 键
Markdown 代码片段：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
## 2. 创建 HTML 标签
使用 Emmet 缩写可以快速创建 HTML 标签，只需输入标签名，即可生成对应的 HTML 标签。下面是一些常见的 HTML 标签示例：
### div 标签
可以使用以下命令生成 div 标签：
div + Tab 键
生成的 HTML 代码示例如下：
```html
<div></div>
Markdown 代码片段：
```html
<div></div>
### p 标签
可以使用以下命令生成 p 标签：
p + Tab 键
生成的 HTML 代码示例如下：
```html
<p></p>
Markdown 代码片段：
```html
<p></p>
### a 标签
可以使用以下命令生成 a 标签：
a + Tab 键
生成的 HTML 代码示例如下：
```html
<a href=""></a>
Markdown 代码片段：
```html
<a href=""></a>
### img 标签
可以使用以下命令生成 img 标签：
img + Tab 键
生成的 HTML 代码示例如下：
```html
<img src="" alt="">
Markdown 代码片段：
```html
<img src="" alt="">
## 3. HTML 属性
Emmet 可以快速添加 HTML 属性。以下是 HTML 属性的示例：
### class 属性
可以使用以下命令生成 class 属性：
div.classname + Tab 键
生成的 HTML 代码示例如下：
```html
<div class="classname"></div>
Markdown 代码片段：
```html
<div class="classname"></div>
### id 属性
可以使用以下命令生成 id 属性：
div#idname + Tab 键
生成的 HTML 代码示例如下：
```html
<div id="idname"></div>
Markdown 代码片段：
```html
<div id="idname"></div>
## 4. 祖先选择器
Emmet 提供了一种快速生成祖先选择器的方式，可以使用大于符号（>）表示父子关系。以下是祖先选择器的示例：
### ul 标签下的 li 标签
可以使用以下命令生成 ul 标签下的 li 标签：
ul>li + Tab 键
生成的 HTML 代码示例如下：
```html
<ul>
<li></li>
</ul>
Markdown 代码片段：
```html
<ul>
<li></li>
</ul>
### div 标签下的 a 标签
可以使用以下命令生成 div 标签下的 a 标签：
div>a + Tab 键
生成的 HTML 代码示例如下：
```html
<div>
<a href=""></a>
</div>
Markdown 代码片段：
```html
<div>
<a href=""></a>
</div>
## 5. 通配符
Emmet 还支持使用通配符（*）生成多个相同的标签。以下是通配符的示例：
### 生成 5 个 p 标签
可以使用以下命令生成 5 个 p 标签：
p*5 + Tab 键
生成的 HTML 代码示例如下：
```html
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
Markdown 代码片段：
```html
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
### 生成 3 个自定义标签
可以使用以下命令生成 3 个自定义标签：
custom*3 + Tab 键
生成的 HTML 代码示例如下：
```html
<custom></custom>
<custom></custom>
<custom></custom>
Markdown 代码片段：
```html
<custom></custom>
<custom></custom>
<custom></custom>
## 总结
Emmet 是一个非常强大的工具，可以大大提高前端开发的效率。本文介绍了如何使用 Emmet 快速生成 HTML 模板、HTML 标签、HTML 属性、祖先选择器、通配符等内容，请合理使用。