Emmet快速入门

一、概述

Emmet的前身是Zen coding，是一款用于快速生成HTML或CSS代码的插件，可用于绝大多数主流文本编辑器。它的语法类似于CSS选择器，通过使用元素或属性的缩写，大大提高了HTML和CSS的编写速度，从而大幅度提高前端开发的效率。

官网地址

速查表

二、HTML

1、初始模板

输入：!或html:5，然后按Tab键，自动生成HTML文档的初始模板。

2、元素

输入：元素名 + # + id名，自动生成带id属性的元素标签。

用例：p#id-prop

输入：元素名 + . + class名，自动生成带class属性的元素标签。

用例：p.class-prop

输入：元素名 + # + id名 + . + class名，可以实现链式操作。

用例：p#id-prop.class-prop

输入：元素名 + {} + 元素内容，自动生成带内容的元素标签。

用例：p{content}

输入：元素名 + [] + 属性名=属性值，自动生成带属性的元素标签。

用例：img[src=example.jpg]

3、嵌套

输入：父元素名 + > + 子元素名，实现父子关系的元素标签。

用例：div>p

输入：元素名 + + + 元素名，实现同级的元素标签。

用例：h1+h2

输入：元素名 + ^ + 元素名，实现符号前的元素标签提升一行。

用例：div>p^span

4、分组

输入：() + 元素名，实现元素标签的分组。

用例：(div>h1)+(div>h2)

5、隐式标签

根据父元素标签，自动判断子元素标签。

• li：用于ul和ol中
• tr：用于table中
• td：用于tr中
• option：用于select中

6、迭代

输入：元素名 + * + 数字，实现元素标签的多次迭代。

用例：ul>li*3

输入：属性值 + * + 数字，实现元素属性值的多次迭代。

用例：ul>li.item$*3

三、CSS

1、属性值

输入：属性缩写 + 属性值，自动生成带有属性值的元素属性。

用例：w100

输入：属性缩写 + 属性值 + 单位，自动生成指定单位的属性值的元素属性。

用例：h10p

2、附加属性

输入：元素缩写，自动生成元素及其主要属性。

用例：@f

输入：元素缩写 + +，自动生成元素的附加属性。

用例：@f+

3、匹配

输入：元素缩写，自动匹配最接近的元素语法。

用例：ov

4、前缀

如果使用非w3c标准的CSS属性，自动添加供应商前缀。

用例：trs

输入：- + 前缀缩写，指定特定的前缀。

用例：-w-trs

四、定制

• snippets.json：添加或修改缩写
• preferences.json：更改过滤器和操作的行为
• syntaxProfiles.json：定义如何生成HTML或XML代码

---

参考文章：

Emmet：HTML/CSS代码快速编写神器