前言： 自從換上了Visal Studio Code后，愛不釋手， 主要還是相對于IDE而言比較的是輕便，其實在開發過程中，很多的功能不是很需要。特別是在開發網頁中就不的不提一下Emmet插件了。之前沒有怎么好好看，最近前端網頁寫的比較多，稍微學了一下Emmet發現效率大增。我目前的主力編輯器還是Visal Studio Code，這款編輯器內置了Emmet，所以不需要安裝任何插件，如果你使用的是Atom或者Sublime Line可以需要配置一下。

語法

所有的Emmet的出發都是快捷鍵的Tab，所以在使用上了Emmet后的場景通常是需要編寫縮寫標簽后瘋狂按Tab。

首先我們從一個HTML網頁開始吧，目前所有的網頁基本上都是H5頁面，所以我們使用Emmet可以非常快捷的生成H5頁面架子， 所需要做 html5 然后按下回車即可（僅在VS code中）。

子元素操作符: >

所有的元素都是靠近的，中間不能有空格。

div>ul>li

展開后表示

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

相近元素操作符：+

+號表示所有的元素都是在同一級

div+p+bq

展開后表示

<div></div>
<p></p>
<blockquote></blockquote>

父元素操作符：^

因為 + > 操作符都是向下，所以如果要相對當前曾經向上一級可以使用^

div+div>p>span+em^bq

展開后表示

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

乘法操作符： *

使用 * 可以讓元素重復輸出

ul>li*5

展開后表示

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

括號操作符:（）

使用括號來講一些元素 放在一起來操作

 div>(header>ul>(li>a)*2)+footer>p 

展開后表示為

   <div>
       <header>
           <ul>
               <li><a href=""></a></li>
               <li><a href=""></a></li>
           </ul>
       </header>
       <footer>
           <p></p>
       </footer>
   </div> 

ID 和class操作符

通過Emmet也可以很方便的給標簽賦予 ID和class

div#header+div.page+div#footer.class1.class2.class3

展開后表示

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

重復數字操作符: $

$ 可以和 * 配合快速給 大量的標簽起名 每一個$表示一個數字占位符

ul>li.item$*5

展開后表示

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

字符操作符: {}

通過使用大括號 還給標簽內部的字符串復制

a{Click me}

展開后表示

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