Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的神器，让你飞一般地编写HTML和CSS代码。

官网：http://docs.emet.io/

1. > 表示 后代

ul>li>a

<ul>
	<li><a href=http://www.mamicode.com/"">>

2. + 表示 兄弟
div>h2+p
<div>
	<h2></h2>
	<p></p>
</div>

3. # 表示 id属性
div#nav
<div id="nav"></div>

4. . 表示 class属性
div.nav
<div class="nav"></div>

5. ^ 表示 上级
div>p>span^a
<div>
	<p><span></span></p>
	<a href=http://www.mamicode.com/"">>
6. * 表示 乘法
ul>li*5
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

7. [ ] 表示 自定义属性
div>a[title="hello world"]*3
<div>
	<a href=http://www.mamicode.com/"" title="hello world">>
8. { } 表示 文本
div>a[title="hello world"]{Hello World}*3
<div>
	<a href=http://www.mamicode.com/"" title="hello world">Hello World>
9. ( ) 表示 分组
div>(ul>li>a)*5+p{Hello World}
<div>
	<ul>
		<li><a href=http://www.mamicode.com/"">>
10. $ 表示 自增
ul>li.item$*3
<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
</ul>

ul>li.item$$*3
<ul>
	<li class="item01"></li>
	<li class="item02"></li>
	<li class="item03"></li>
</ul>

ul>li.item$@3*3
<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

ul>li.item$@-*3
<ul>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>

11. 更多？请看下图

前端开发神器：Emmet