Emmet 语法 速查表

Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），就可以减少重复编码的工作。

---

1.调用方法

Emmet使用Tab作为自动生成HTML代码的触发器。

输入完生成HTML的缩写语句后，按下Tab，即可生成对应的HTML代码

2.相关语法

后代：>

---

Child: >

缩写：div>ul>li

兄弟：+

---

Sibling: +

缩写：div+p+bq

上级元素：^

---

Climb-up: ^

缩写：div+div>p>span+em^bq

缩写：div+div>p>span+em^^bq

分组：（）

---

Grouping: ( )

缩写：div>(header>ul>li*2>a)+footer>p

缩写：(div>dl>(dt+dd)*3)+footer>p

重复多份：*

---

Multiplication: *

缩写：ul>li*5

编号：$

---

Item numbering: $

缩写：ul>li.item$*5

缩写：h$[title=item$]{Header $}*3

    
Header 1
    
Header 2
    
Header 3

缩写：ul>li.item$$$*5

缩写：ul>li.item$@-*5

缩写：ul>li.item$@3*5

ID和类属性

---

ID and CLASS attributes

缩写：#header

缩写：.title

缩写：form#search.wide

缩写：p.class1.class2.class3

自定义属性

---

Custom attributes

缩写：p[title="Hello world"]

缩写：td[rowspan=2 colspan=3 title]

缩写：[a='value1' b="value2"]

文本：{ }

---

Text: { }

缩写：a{Click me}

     Click me

缩写：p>{Click }+a{here}+{ to continue}

    
Click here to continue

隐式标签

---

Implicit tag names

缩写：.class

缩写：em>.class

缩写：ul>.class

缩写：table>.row>.col

3.HTML

所有未知的缩写都会转换成标签，例如，foo →
缩写：!

---

本文所列仅为最常用的一些语法和缩写，有关其他较为少用的可参考Emmet官方文档

特别声明：文中演示代码来自于官网API：http://docs.emmet.io/cheat-sheet/