Emmet可以快速的編寫(xiě)HTML代碼，輸入縮寫(xiě)，按tab即可生成相應(yīng)代碼。

嵌套操作

>: Child
+: Sibling
^: Climb-up
*: 乘法, 如 ul<li*5，將生成如下結(jié)果
 <ul> 
  <li></li> 
  <li></li> 
  <li></li> 
  <li></li>
  <li></li> 
</ul>
(): 分組，如 (header>ul>li*2)+footer>p，結(jié)果如下 
<header> 
  <ul>
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
  </ul> 
</header> 
<footer> 
  <p></p> 
</footer>

屬性操作

ID和Class，如div#header.class1.class2.class3, 結(jié)果如下:

<div id="footer" class="class1 class2 class3"></div>

也可以自定義屬性，如td[title="hello" colspan=3]，屬性可以不用引號(hào)，結(jié)果如下：

<td title="Hello world!" colspan="3"></td>

序列

結(jié)合之前的嵌套操作和屬性操作, 通過(guò)和$可以輸出數(shù)字序列, 如ul>li.item$3，結(jié)果如下:

<ul> 
  <li class="item1"></li> 
  <li class="item2"></li> 
  <li class="item3"></li>
</ul>

通過(guò)@, 可以改變數(shù)字序列的順序以及基數(shù)，如ul>li$@2-*3

<ul> 
  <li class="item4"></li> 
  <li class="item3"></li> 
  <li class="item2"></li>
</ul>

文字

{}: 通過(guò)大括號(hào)(curly braces)在元素中插入文字, 如a{Click me}:

<a href="">Click me</a>

注意 a{click}+b{here} 和 a>{click}+b{here} 的區(qū)別:

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

其他

官方語(yǔ)法介紹：http://docs.emmet.io/
官方語(yǔ)法速查表：http://docs.emmet.io/cheat-sheet/