使用 Emmet 提升CSS编写效率的终极指南（基础篇）

噼里啪啦被占了

2024-06-04 1,106 阅读2分钟

使用Emmet语法提高HTML/CSS编写效率

Emmet 语法的前身是 Zen coding，它使用缩写来提高 html/css 编写速度，VSCode内部已经集成该语法。本内容准备分两篇基础篇和高级篇详细说明 Emmet 的使用。

生成单个标签

生成单个标签，直接输入标签名，按 tab 或 enter 键即可。

生成多个相同标签

生成多个相同标签，在标签后面加上 * 键，之后在加上标签个数即可
标签、 * 、标签个数，中间不可以添加空格
```
div*3
```

生成父子层级关系的标签

生成父子层级关系的标签，俩个标签中间可以用 > 键拼接。
标签、 * 、标签，中间不可以添加空格
```
ul>li
```

生成兄弟层级关系的标签

生成兄弟层级关系的标签，俩个标签中间可以用 + 键拼接。
标签、 + 、标签，中间不可以添加空格
```
div+p
```

生成带有 class 的标签

生成带有的 class 标签，在类名之前加上 . 键即可。
.和类名 ，中间不可以添加空格(默认是<div>标签)
```
.banner
```
如果给某标签生成带有类名的标签

标签、. 、类名，中间不可以添加空格(设置<p>标签)
```
p.banner
```

生成带有 id 的标签

生成带有的 id 的标签，在 id值 之前加上 # 键即可。
#和id值 ，中间不可以添加空格(默认是<div>标签)
```
#nav
```
如果给某标签生成带有 id 的标签 标签、# 、id值，中间不可以添加空格(设置<p>标签)
```
p#nav
```

生成自增顺序的标签

生成自增顺序的标签，用 $ 键即可。
#或. 、类名或id值、 $、 * 、标签个数 ，中间不可以添加空格(默认是<div>标签)
```
#demo$*5
```
如果给某标签生成自增顺序 标签、#或. 、类名或id值、 $、 * 、标签个数，中间不可以添加空格(设置<p>标签)
```
p#demo$*5
```

写在最后的话

在这篇基础篇中，我们介绍了 Emmet 语法的基本用法。通过简洁的缩写，Emmet 可以大幅提升 HTML/CSS 的编写效率。我们涵盖了生成单个标签、多标签、父子层级标签、兄弟层级标签、带有 class 和 id 的标签以及自增顺序标签的用法。这些技巧能让开发者在编写代码时更高效、快捷。