「一鍵」生成HTML——Emmet插件經常使用語法

Emmet是一款文本編輯器/IDE的插件，用來快速生成複雜的HTML代碼，只要掌握一些經常使用的語法（相似於CSS選擇器），就能夠減小重複編碼的工做（主要是懶）。
我我的慣用的是sublime，所以下文介紹的語法僅在sublime測試經過，不過其它平臺應該也不會有什麼出入。

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

在sublime中啓用Emmet，必須把當前代碼的語法模式改成HTML，若是原本就是.html文件那就沒問題；若是是新建的文件尚未保存過的，則須要手動先設置爲HTML：

1. 在sublime右下角點擊Plain Text，彈出菜單，選擇HTML。
   

2. 按下Ctrl + Shift + P，打開命令控制檯，輸入「HTML」，選擇Set Syntax:HTML便可。
   

快捷鍵

Emmet使用Tab和Ctrl + e做爲自動生成HTML代碼的觸發器。

如上圖所示，輸入完生成HTML的語句後，按下Tab或Ctrl + e，便可生成對應的HTML代碼：

Emmet經常使用語法

Emmet的語法有不少，還爲了進一步提升效率而爲比較長的標籤都設置了縮寫，我我的認爲記住經常使用的語法便可，縮寫什麼的真的是學習成本過高了。

生成HTML結構：!

輸入!按下Tab，便可生成標準的HTML5結構：

實際上也是能夠生成HTML4的結構的，但畢竟已通過時了，這裏按下不表。

後代：>

div>ul>li

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

兄弟：+

div>label+input

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

分組：()

當咱們須要寫一些比較複雜的HTML結構時，有兩種方式能實現，其一是上級^，可是我以爲有點逆推的意味，思路上比較繞，很差用；另一種就是分組()了，這是程序員廣泛具備的分治思想的體現。
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>

文本內容：{}

div>a{點這裏跳轉}
<div><a href="">點這裏跳轉</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="">

參考資料

Emmet官方文檔