學習要點： 1.安裝方式 2.自定義！生成 3.快速生成 主講教師：李炎恢 本章主要探討瞭解一下 Sublime Text3 的一個 HTML5 代碼提示插件：Emmet，這個插件比自帶原生的要強大許多。 一．安裝方式 Emmet 插件安裝一般採用兩種方式，1.通過命令安裝；2.下載離線安裝。我這裡 ...
學習要點：
1.安裝方式
2.自定義！生成
3.快速生成
主講教師：李炎恢
本章主要探討瞭解一下 Sublime Text3 的一個 HTML5 代碼提示插件：Emmet，這個插件比自帶原生的要強大許多。
一．安裝方式
Emmet 插件安裝一般採用兩種方式，1.通過命令安裝；2.下載離線安裝。我這裡直接採用的是下載離線安裝方式。具體步驟：
1.解壓下載好的 Emmet 插件包(這裡會提供)；
2.將 Emmet 和 PyV8 兩個文件夾複製到 Sublime Text3 的程式包中；
3.左下角會顯示自動安裝，安裝好後，重啟 Sublime Text3；4.在編輯器輸入英文狀態下的“!”，然後 ctrl+e，出現了 HTML5 的代碼庫，則安裝
成功。
註：如果安裝失敗或出現其他錯誤，請自行百度選用其他方式安裝，或解決安裝出錯的問題。
二．自定義！生成
我們輸入!，然後 ctrl+e，預設情況下會出現如下代碼：
//預設代碼
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
這裡有兩個地方和我們之前生成的代碼不一樣，第一處是：doctype 沒有大寫；第二處：lang 是 en 的。其實這兩處不改也沒有太大關係，但有強迫症的看了可能會難受。具體修改方法如下：
1.首先，進入程式包 pagkages；
2.其次，進入 Emmet 文件夾，再進入 emmet 文件夾，找到 snippets.json 文件；
3.最後，打開這個文件，找到相應處修改即可。
三．快速生成
Emmet 提供了非常豐富的 HTML 和 CSS 代碼的快速生成功能，通過使用快速生成代碼，極大的增加了開發速度。只不過，Emmet 提供的生成方式需要二次學習，起初可能還不如手工敲擊的快。所以，需要一定時間的學習磨合。
//快速生成 HTML5 代碼結構
! + (ctrl + e 或 tab 鍵) 或 html:5 + tab 鍵
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
所有代碼生成，都需要通過 tab 鍵來生成代碼，後面不在贅述。
//快速生成標簽代碼 a
<a href=""></a>
//快速生成標簽相應的屬性值a:link、a:mail
<a href="http://"></a>
<a href="mailto:"></a>
//生成標簽內的值a{超鏈接}
<a href="">超鏈接</a>
//生成 CSS 鏈接 link link
<link rel="stylesheet" href="">
//生成表單控制項input、input:hidden
<input type="text"> <input type="hidden" name="">
//生成帶子標簽的一組標簽ul+、ol+、dl+、table+
<ul> <li></li> </ul> <ol> <li></li> </ol> <dl> <dt></dt> <dd></dd> </dl> <table> <tr> <td></td> </tr> </table>
//生成嵌套子標簽 nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
//生成相鄰兄弟標簽 div+p+h1
<div></div> <p></p> <h1></h1>
//生成乘積數量的標簽 ul>li*5
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
//創建具有 ID 的標簽 div#header
<div id="header"></div>
//創建具有 class 的標簽 div.header、div.header.sidebar
<div class="header"></div> <div class="header sidebar"></div>
以上是 HTML 部分的代碼生成功能，下麵來看下 CSS 的快速生成功能：
//生成 position: relative pos
輸入 pos 即可出現 position:relative 這組 CSS 樣式，並且 relative 是選定狀態，有助於你更換屬性值。
但是我們發現使用 sublime 結合 Emmet 插件的 CSS 提示非常的靈活，不會死板的必須要輸入 pos。下麵的輸入都可以得到相應的值：
po = position: relative
只要輸入 po 或者大於 po 字母量的值，都可以得到 position:relative。當然，如果你只是輸入 p，那麼由於優先順序的考慮，出現的是 padding: |。
如果你輸入有誤，它也會自動糾錯，比如下麵這個：
pod = position: relative
如果你想一開始得到的是 absolute 這個屬性值，那麼直接輸入：
poa = position: absolute;
當然，上門的標準寫法是這樣的：
pos:a = position: absolute;
如果想輸入背景的屬性，直接使用 bg 即可：
bg = background: |;
使用 bg+可以展開背景屬性的完整形式： bg+ = background: #fff url() 0 0 no-repeat;
使用 bg:n 可以設置背景屬性值為 none： bg:n = background: none;
備註：HTML 和 CSS 其他大部分代碼生成方案，可以參考如下網址：
http://docs.emmet.io/cheat-sheet/
