Emmet是什么？

在前端开发中书写html标签和css往往占用最多时间，Emmet的诞生简化了html/xml和css的书写过程，大幅提升前端开发的效率。Emmet是一种语法插件，需要在编辑器中安装后（很多开发工具已经内置），才能使用Emmet的 简写语法

📙 官方文档

📙 Emmet速查表

用法：

Emmet的用法相当简单，只需要两步

输入简写代码（💥符号必须是英文状态，比如：!():[]''""）
按下 Tab 键展开成标准代码

Tab

哪些开发工具能使用Emmet？

只列举了一些前端开发常用工具，具体请参考下表

Sublime	Atom	notepad++	VScode	WebStorm	PhpStorm	IDEA	Hbuilder X


需要插件	需要插件	需要插件	内置	内置	内置	内置	内置

不同工具之间对Emmet的支持可能存在差异

除了编辑器以外，一些在线开发网站也支持Emmet

JSFiddle [点击打开]
JS bin [点击打开]
CODEPEN [点击打开]

本文中的示例，可直接在网站上尝试

如果你的编辑器不支持Emmet或快捷键不是Tab，那我建议

换VScode吧

🚩Emmet语法 - HTML

html基本结构

快速生成<html><body>等必须标签

缩写

Emmet用法html!

html标签

支持所有html标签，而且自定义标签(例如： el-btn 展开后 <el-btn></el-btn> )

缩写

img

Emmet用法html标签

生成随机文本

开发过程中，需要文字填充标签时，可使用 lorem ，结尾加数字可定义生产的单词数量

缩写

lorem5

Emmet用法lorem

嵌套标签

子元素

💡 问题：如何一次生成有5个单词的<p>标签？

> 是子元素符号，表示在元素下执行

缩写

p>lorem5

Emmet用法>

兄弟元素

💡 问题：如何一次生成一个<div>并在它的后面有一个<img>和一个<a>

+ 是兄弟元素符号，表示在元素后执行

缩写

div+img+a

Emmet用法+

父级元素

💡 问题：如何一次生成<div>下有个<p>并且<p>里有5个单词，<p>后有一个<button>

^ 是父级元素，表示在上一级后执行（可连写 ^ 多个提升父级）

div>p>lorem5^button

Emmet用法^

分组

编写复杂结构时，分组能更好理解和简化代码

() 是分组操作符，表示括号内的代码作为一个元素，与括号内第一个元素同级 允许嵌套多个

💡 问题：不使用分组时 div>p>span^p>span 使用分组后怎样写？

缩写

div>(p>span)*2

Emmet用法()

VScode在测试中不能使用(...)^这种写法 div>(div>p>span)^img

id和class

emmet中对id和class的操作符与CSS一致，# 添加id，. 添加class，需要写在标签后！

div添加class时，可省略div

缩写

.box>button#submit

Emmet用法#.

重复添加标签

💡 问题：一次生成5个div，除了div+div+div+div+div 还能怎么简写？

* 是乘法操作符，根据乘数生成多个

缩写

.box*5

Emmet用法*

标签里的文字

生成标签时，一起写入文本，例如：生成id为sumit的按钮，文字是确认

缩写

button#submit{确认}

Emmet用法{}

添加标签属性

除了id和class，还支持标签的属性添加

[] 是属性添加符，括号内可写多个属性（空格隔开），属性值需要引号括起来

缩写

button[type="password" diy="true"]

Emmet用法标签属性

编号

💡 问题：一次生成class是 “box1，box2，box3，box4，box5“的5个div

$ 是编号操作符，根据乘数依次生成不同的编号

缩写

.box$*5

Emmet用法$

💡 问题：把上面的编号改为 001,002,003,004,005

$ 重复多次可自动补0

缩写

.box?$*5

Emmet用法编号补0$

🚩Emmet语法 - CSS

Emmet对CSS写法非常宽松，记住属性的几个字母就可以写出完整的属性。

基本写法

在css时，大多数遵循单词的首字母拼接就可以。注意：并不是所有都适用这个规则

属性和值之间用 : 分隔，例如：text-align:left 写作 ta:l
部分属性和值，可以不写 :，例如：float:left 写作 fl
可以不写值，会带出默认值，例如：text-align:left 写作 ta
Emmet支持模糊查找，找不到对应的代码时，将显示最接近的代码。

如果Tab出来的结果不是想要的，请在速查表里搜索css属性点击进入

Emmet用法CSS

例如：

float:right 速查表中的写法是 fl:r ，可写 flr （模糊查找结果），经测试部分开发工具可以写fr

缩写

fl:r
/* 或者 */
flr

background-position 速查表中的写法是bgp ，可写 bp （模糊查找结果）

缩写

bgp
/* 或者 */
bp

font-size 首字母是 f 和 s 但是与font-style 重复，速查表中写法是fz

缩写

Emmet用法CSSfont-size

数值和单位

常用的宽、高、字号、行高等需要数值的属性，也可直接用简写方法。

数值

在属性后直接写数字和单位即可，不写单位，默认px

例如：

font-size:10px

缩写

fz10
/* 带单位的写法 */
fz10em

Emmet用法CSSfz

连续写多个数值

💡 问题：margin这种需要写多个值时，怎么办？

- 减号可分割不带单位的数字

例如：

margin:10px 20px

m10-20
/* 带单位时可不写- */
m10px20px

Emmet用法多个数值

单位简写

缩写	表示单位	例如
p	%	`w100p` → `width: 100%`
e	em	`h2e` → `height: 2em`
x	ex	`m10p30e5x` → `margin: 10% 30em 5ex`
任意字母	自定义单位	`w10vw` → `width: 10vw`

浏览器兼容

不同浏览器之间的属性需要加不同的前缀

缩写	前缀	浏览器
-w-	-webkit-	safari、chrome、Chromeium内核的浏览器
-m-	-moz-	firefox
-s-	-ms-	ie
-o-	-o-	Opera
-	以上全部

- 在属性前只写减号可增加全部。- 后可以连写字母，例如：-wo-

css3的新属性，只写- 会自动根据兼容性添加前缀，而不是添加全部。

📙CSS属性速查表点击进入

例如：

border-radius 是css3的属性，float 是旧版CSS属性

缩写

-bdrs
-so-bdrs
/* 旧版CSS写-，会加上全部前缀 */
-fl

Emmet用法CSS浏览器前缀-

! 和 @

! 写在任何css语句最后，展开后自动添加important

例如：

font-size:10px !important

缩写

fz10!

Emmet用法CSS!important

CSS3增加了一些@ 符号开头的属性比如 @font，@media，@keyframes 等，使用@+首字母即可。

例如：

@font-face { font-family:; src:url(); }

缩写

@f
/* font-face可以在结尾+号（其他没有），以显示更全的信息 */
@f+

Emmet用法CSS@font face

😬再说两句

开发工具都支持自定义代码提示和片段，不满意Emmet可以定义自己的片段。

为什么不说说下面的写法，部分编辑器（没错就是VScode😤）不支持

功能	写法	文档
隐式标签	.item	docs.emmet.io/abbreviatio…
编号倒排	.item$@-*5	docs.emmet.io/abbreviatio…
改变起始编号	.item$@3*5	docs.emmet.io/abbreviatio…
CSS渐变	lg(left,red 30% blue)	docs.emmet.io/css-abbrevi…
...	...

官方文档里还有Emmet的其他介绍，有兴趣的自行查阅官方文档

多数内容来自官网文档，使用VScode做截图演示

✍如有错误欢迎指正

写HTML和CSS的效率如何提高？Emmet用法详解