Emmet是一款编辑器插件，支持多种编辑器支持。在前端开发中，Emmet 使用缩写语法，可以快速编写 HTML、CSS 以及实现其他的功能，极大的提高前端开发效率。

一般的使用方法：输入代码后按TAB键。

使用环境：

推荐以下两个：subline text2、atom (都需要安装相关的emmet插件)

关系：> + ^

①从属关系： >

div>ul>li

②平行关系： +

div+div+div

③向上一级： ^

div+div>ul>li^p+div

有几个^就向上几级

---

四则运算: * ()

④乘法： *

div>ul>li*5

⑤分组： ()

(div>ul>li)+div>table>(tr+td)*3+(div)

举个反例：

div>ul>li+div>table>(tr+td)*5+div 

---

属性操作 # . [] $ @ -

⑥ID和class

div#header.box1+div.warp+div#footer

id用#，class用. 这个是html+css的基础内容啦~

⑦自定义属性

div[title='header' colspan=3]

⑧元素编号

div>ul>li.item$*5

$符号可以自动从1开始编号。多个$也有特殊效果例如：

div>ul>li.item$$$*5

当然，还有特殊玩法：

• 比如，我不想从1开始编，可以用@符号来修改当前的编号

div>ul>li.item$$$@4*5

emmet会自动从4开始往后编号

• 又比如，我想让他倒着编号，从最大号到最小的一号：

div>ul>li.item$$$@-*5

当然，两者加在一起用也是可以的。

---

文本操作： {}

⑨给元素添加内容：

a{Click here to fly}

注意：

a{click}+b{here} 和 a>{click}+b{here} 结果是不一样的

a{click}+b{here}

a和b首先是平行关系，其次再转译；

a>{click}+b{here}

而在这里，b是从属于a的，所以生成的是b被包含于a中的语句，

即爸爸永远是你爸爸，即使对a进行了添加内容的操作，不会改变上下级的关系。

举一个更复杂的例子：

p>{Click}+a{here}+{to continue}

首先在p中生成一个Click，再生成一个a，内容是here，在</a>之外再生成一个to continue

---

其他功能

• 键入一个html:5可以得到

这样一个html的框架，效率就很高~

• ！

跟上面的效果一致

• 所有未知的缩写都会被转化成标签，例如输入一个foo

• a:link

• img

其他功能和复杂玩法请自行摸索~

!>(div#header>nav)+(div#content)+(div#footer)

这个就能生成一个大体上的包含header、主体、footer在内的一个html5的开发框架啦~

ps：并没有采用很专业的术语，想让内容看起来尽可能的通俗易懂适合大多数人，特别是我接下来要带的学弟和学妹们~

2017年12月7日 21点26分

参考：
https://www.w3cplus.com/tools/emmet-cheat-sheet.html
https://segmentfault.com/a/1190000007812543