sublimetext Emmet插件(Zen coding)

1.省略div，插件会默认元素为div

.container

<div class="container"></div>

含糊标签名称,比如不需要指定li，Emmet会自动帮助你生成

ul>.lis

<ul>
<li class="lis"></li>
</ul>

2.链式缩写

① > :添加创建子元素
div>span 

<div><span></span></div>

② + :添加创建同层级元素

div+span

<div></div>
<span></span>

③ ^ :添加一个父层级元素（需要的话你可以向上多层）

p>a^p

<p><a href=""></a></p>
<p></p>

3.分组功能；
 (.one>h1)+(.two>h1)

<div class="one">
<h1></h1>
</div>
<div class="two">
<h1></h1>
</div>

4.插入文本{}和属性[]；

h1{heading}

<h1>heading</h1>

a[href=‘#‘]

<a href="#"></a>

5.添加多个class；

 .one.two.three

<div class="one two three"></div>

6.添加多个元素
 ul>li*5 

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

7.自动列表计数

按顺序生成HTML元素，使用$符号可以帮助生成一系列数字，支持class，id，属性，内容等等。
(生成n位的数字，使用n个$符号)
 ul>li.list${number $}*5

<ul>
<li class="list1">number 1</li>
<li class="list2">number 2</li>
<li class="list3">number 3</li>
<li class="list4">number 4</li>
<li class="list5">number 5</li>
</ul>

ul>li$.number$$*5 

<ul>
<li1 class="number01"></li1>
<li2 class="number02"></li2>
<li3 class="number03"></li3>
<li4 class="number04"></li4>
<li5 class="number05"></li5>
</ul>