缩写是Emmet工具的核心，这些特殊的表达式通过Emmet解析并转化为结构化的代码块，而语法用CSS选择器，HTML标签和一些Emmet特定的代码生成，所以对于任何一个前端开发人员都可以很容易地掌握和使用。 你可以使用标签名称为div、p等生成HTML标签，Emmet没有一组预定义可用的标记名称，您可以编写任何单词并把它转化为一个标签，例如：div →<div></div>, footer →<footer></footer>
Emmet代码虽然没有特定的标签，但编写时还是有一定的规则与技巧，下面我们就看一看：
****使用Tab键快速编写***
1、父子级关系:> 例：div>ul>li
div>ul>li
2、兄弟关系：+ 例：div+p+foter
div+p+foter
3、上级关系:^ 例 div+div>p>span+em^bq
div+div>p>span+em^bq
4、乘法：* 例 ul>li*5
ul>li*5
5、分组:() 例 div>(header>ul>li*2>)+footer>p
div>(header>ul>li*2>)+footer>p
使用多个(),并使用乘法* (div>dl>(dt+dd)*3)+footer>p
(div>dl>(dt+dd)*3)+footer>p
6、CSS选择器，给标签指定id和class选择器，只需在标签的后面直接添加，但必需以.或#开头：div#header+div.page+div#footer.class1.class2.class3
div#header+div.page+div#footer.class1.class2.class3
7、项目编码：ul>li.item$*5
ul>li.item$*5
生成无序列表+内容 h$[title=item$]{Header $}*3
h$[title=item$]{Header $}*3
多个 $$$ ul>li.item$$$#li$$*5
$$$ ul>li.item$$$#li$$*5
改变顺序：ul>li.item$@-*5
ul>li.item$@-*5
添加起始数:ol>li.io$@3{$@4}*7
ol>li.io$@3{$@4}*7
8、文本：{}使用花括号来添加文本元素: a{Click me}
a{Click me}
当元素用+连接时，文本{}编写正确后，并不能改变标签的层级关系：p>{Click }+a{here}+{ to continue}
p>{Click }+a{here}+{ to continue}
