Emmet快捷生成代码的各种实用小技巧

先举个例子

<div id="box">
      <img src="" alt="" class="avatar">
      <ul class="ul-box">
        <li class="item1">我是li1</li>
        <li class="item2">我是li2</li>
        <li class="item3">我是li3</li>
        <li class="item4">我是li4</li>
      </ul>
      <p class="name"></p>
    </div>

像这样的代码片段，你们需要多久写出来
我只要这样写

div#box>img.avatar+ul.ul-box>li.item${我是li$}*4^p.name

是不是很爽，很快，一行代码就可以生成，id和class都对应上

id 和 class

 // div#id
<div id="id"></div>

 // div.test
 <div class="test"></div>

子节点（>）兄弟节点（+）父节点（^）

// div>p.test
<div>
	<p class="test"></p>
</div>

// div>p.test+ul>li
 <div>
    <p class="test"></p>
    <ul>
      <li></li>
    </ul>
 </div>
 
 // div>p.test+ul>li^div.color
<div>
     <p class="test"></p>
     <ul>
       <li></li>
     </ul>
     <div class="color"></div>
</div>	

分组 （（））

// div>p.test+ul>li+div.color
<div>
     <p class="test"></p>
     <ul>
       <li></li>
       <div class="color"></div>
     </ul>
</div>
// div>(p.test+ul>li)+div.color
<div>
     <p class="test"></p>
     <ul>
       <li></li>
     </ul>
     <div class="color"></div>
</div>

属性（[]）

// a[href="http://www.baidu.com" name="test"]
<a href="http://www.baidu.com" name="test"></a>

文本（{}）

// div>ul>li{测试}
<div>
     <ul>
       <li>测试</li>
     </ul>
</div>

动态编号（$）

从1开始自增长的编号

// div>ul>li*3${测试$}
<div>
     <ul>
       <li>1测试</li>
       <li>2测试</li>
       <li>3测试</li>
     </ul>
</div>

默认隐藏标签

有层级的默认标签要出来必须给到id或者class或者属性

// .test
<div class="test"></div>
// 默认div标签

// ul>.test{测试}
<ul>
     <li class="test">测试</li>
</ul>
// ul 默认 li

// select>.test{选项}
<select name="" id="">
     <option class="test">选项</option>
</select>
// select 默认 option标签

// tr>.test*5
<tr>
     <td class="test"></td>
     <td class="test"></td>
     <td class="test"></td>
     <td class="test"></td>
     <td class="test"></td>
</tr>

还有其他
tr可在 table、tbody、thead 和 tfoot 中做默认标签使用
等等