Emmet是一款文本編輯器/IDE的插件，用來快速生成復雜的HTML代碼，只要掌握一些常用的語法（類似于CSS選擇器）。我個人慣用的是sublime，因此下文介紹的語法僅在sublime測試通過，不過其它平臺應該也不會有什么出入。

使用Emmet前提：設置當前為HTML語法模式

在sublime中啟用Emmet，必須把當前代碼的語法模式改為HTML，如果本來就是.html文件那就沒問題；如果是新建的文件還沒有保存過的，則需要手動先設置為HTML：

1. 在sublime右下角點擊Plain Text，彈出菜單，選擇HTML。
   [圖片上傳失敗...(image-9967a9-1511761096490)]

2. 按下Ctrl + Shift + P，打開命令控制臺，輸入“HTML”，選擇Set Syntax:HTML即可。

   
   
   這里寫圖片描述

快捷鍵

Emmet使用Tab和Ctrl + e作為自動生成HTML代碼的觸發(fā)器。
[圖片上傳失敗...(image-991bd0-1511761096490)]
如上圖所示，輸入完生成HTML的語句后，按下Tab或Ctrl + e，即可生成對應的HTML代碼：

這里寫圖片描述

Emmet常用語法

Emmet的語法有很多，還為了進一步提高效率而為比較長的標簽都設置了縮寫，我個人認為記住常用的語法即可，縮寫什么的真的是學習成本太高了。

生成HTML結(jié)構：!
輸入!按下Tab，即可生成標準的HTML5結(jié)構：

這里寫圖片描述

實際上也是可以生成HTML4的結(jié)構的，但畢竟已經(jīng)過時了，這里按下不表。

后代：>

div>ul>li

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

兄弟：+

div>label+input

<div><label for=""></label><input type="text"></div>

分組：()
當我們需要寫一些比較復雜的HTML結(jié)構時，有兩種方式能實現(xiàn)，其一是上級^，但是我覺得有點逆推的意味，思路上比較繞，不好用；另外一種就是分組()了，這是程序員普遍具有的分治思想的體現(xiàn)。

div>(ul>li)+(ol>li)

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

重復多個：

div>ul>li*5

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

ID：#，類：.
ID和類可以同時使用也可以分別獨立使用：

div#article.container
<div id="article" class="container"></div>
div#article
<div id="article"></div>
div.container
<div class="container"></div>
屬性：[attr="val"]
label[for="passwd"]
<label for="passwd"></label>

文本內(nèi)容：{}

div>a{點這里跳轉(zhuǎn)}

<div><a href="">點這里跳轉(zhuǎn)</a></div>

唯一比較常用的縮寫：input:type
在<input>里，type屬性是必定要填的（你忽略type="text"我就鄙視你），而且各個type都還滿常用的，因此這個縮寫可以記一下：input:type等價于input[type="type"]。
因為type屬性可以取的值太多了，這里僅列出幾個常用的作為示例：

input:text
<input type="text" name="" id="">
input:radio
<input type="radio" name="" id="">
input:checkbox
<input type="checkbox" name="" id="">