“一鍵”生成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官方文檔

本文轉載於:“一鍵”生成HTML——Emmet插件常用語法