1）使用 Emmet 生成 HTML 的語法詳解
生成 HTML 文檔初始結構
HTML 文檔的初始結構，就是包括 doctype、html、head、body 以及 meta 等內容。你只需要輸入一個 “!” 就可以生成一個 HTML5 的標准文檔初始結構，你沒有看錯，輸入一個感嘆號（當然是英文符號），然后摁下 TAB 鍵，就會發現生成了下面的結構：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title>Document</title>
</head>
<body>
<!-- code... -->
</body>
</html>
這就是一個 HTML5 的標准結構，也是默認的 HTML 結構。如果你想生成 HTML4 的過渡型結構，那么輸入指令 html:xt 即可生成如下結構：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
< title>Document</title>
</head>
<body>
</body>
</html>
Emmet 會自動把 doctype 給你補全了，怎么樣，這樣的功能會不會讓你動心？簡單總結一下常用的 HTML 結構指令：
html:5 或者 ! 生成 HTML5 結構
html:xt 生成 HTML4 過渡型
html:4s 生成 HTML4 嚴格型
生成帶有 id 、class 的 HTML 標簽
Emmet 的語法有點類似 CSS 的語法，生成 id 為 aaa 的 div 標簽，我們只需要編寫下面指令：
#aaa
Emmet 默認的標簽為 div ，如果我們不給出標簽名稱的話，默認就生成 div 標簽。如果編寫一個 class 為 bbb 的 span 標簽，我們需要編寫下面指令：
span.bbb
然后就生成了對應的結構。同理，如果想要編寫一個 id 為 ccc 的 class 為 ddd 的 ul 標簽，我們可以這樣寫：
ul#ccc.ddd
很簡單吧？比你用手寫 id 、class 方便多了吧
生成后代：>
大於號表示后面要生成的內容是當前標簽的后代。例如我要生成一個無序列表，而且被 class 為 aaa 的 div 包裹，那么可以使用下面指令：
div.aaa>ul>li
可以生成如下的結構：
<div class="aaa">
<ul>
<li></li>
</ul>
</div>
生成兄弟：+
上面是生成下級元素，如果想要生成平級的元素，就需要使用 + 號。例如下面指令：
div+p+bq
就可以生成如下的 HTML 結構：
<div></div>
<p></p>
<blockquote></blockquote>
生成上級元素：^
上級 （Climb-up）元素是什么意思呢？前面咱們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之后，再繼續寫下去，那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽，那么我需要先用 “^” 提升一下層次。例如：
div>ul>li^span
就會生成如下結構：
<div>
<ul>
<li></li>
</ul>
<span></span>
</div>
如果我想相對與 div 生成一個平級元素，那么就再上升一個層次，多用一個“^”符號：
div>ul>li^^span
重復生成多份：*
特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字：
ul>li*5
這樣就直接生成五個項目的無序列表了。如果想要生成多份其他結構，方法類似。
生成分組：()
用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系，例如：
div>(header>ul>li*2>a)+footer>p
這樣很明顯就可以看出層次關系和並列關系，生成如下結構：
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
此外，分組還可以很方便的結合上面說的 "*" 符號生成重復結構：
(div>dl>(dt+dd)*3)+footer>p
生成結構：
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
生成自定義屬性：[attr]
a 標簽中往往需要附帶 href 屬性和 title 屬性，如果我們想生成一個 href 為 http://www.yunxiu.org/blog ，title 為“我愛水煮魚”的 a 標簽，可以這樣寫：
a[href="http://www.yunxiu.org/blog" title="雲袖網"]
其他標簽和屬性都類似。
對生成內容編號：$
例如無序列表，我想為五個個 li 增加一個 class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號：
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>
$ 就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那么要寫三個 $：
ul>li.item$$$*5
輸出：
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
只能這樣單調的生成序號？對於強大的 Emmet 來說，肯定不會會了，我們也可以在 $ 后面增加 @- 來實現倒序排列：
ul>li.item$@-*5
生成如下結構：
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
同樣，我們也可以使用 @N 指定開始的序號：
ul>li.item$@3*5
這樣就會從 3 開始排序，生成如下代碼：
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
配合上面倒序輸出，可以這樣寫：
ul>li.item$@-3*5
生成的就是以 3 為底倒序：
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
生成文本內容：{}
上面講解了如何生成 HTML 標簽，那里面的內容呢？當然也可以生成了：
a[href="http://www.yunxiu.org/blog"]{點擊這里到 雲袖網}
這樣就生成了一個到我愛水煮魚的超鏈接了。在生成內容的時候，特別要注意前后的符號關系，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了，例如：
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
這樣就生成了完全不同的結構，注意這些小細節哦。
不要有空格
在寫指令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會導致代碼無法使用。例如下面這句：
(header > ul.nav > li*5) + footer
而去掉空格之后，就可以正常執行生成結構了。
2）Emmet 快速編寫 CSS 的技巧
首先，Sublime Text 2 已經提供了比較強大的 CSS 樣式所寫方法來提高 CSS 編寫效率。例如編寫 position: absolute; 這一個屬性，我們只需要輸入 posa 這四個字母即可。它會彈出縮寫樣式的提示：
簡寫屬性和屬性值
如果你想生成 width:100px; 你只需要輸入 w100 就可以了，因為 Emmet 的默認設置 w 是 width 的縮寫，后面緊跟的數字就是屬性值。默認的屬性值單位是 px ，你可以在值的后面緊跟字符生成單位，可以是任意字符。例如，w100foo 會生成 width:100foo; 這樣一條語句。你同樣也可以簡寫屬性單位，如果你緊跟屬性值后面的字符是 p ，那么將會生成 width:100%; 這樣的語句，其中 p 表示百分比單位。與此類似的還有：e → em; x → ex。
例如 margin 這樣的屬性，可能並不是一個屬性值，生成多個屬性值需要用橫杠（-）連接兩個屬性值，因為 Emmet 的指令中是不允許空格的。例如使用 m10-20 這條命令可以生成 margin: 10px 20px; 這樣一條語句。如果你想生成負值，多加一條橫杠即可。需要注意的是，如果你對每個屬性都指定了單位，那么不需要使用橫杠分割。例如使用 m10ff20ff 這條命令可以生成margin: 10ff 20ff; 這條語句，如果你在 20ff 前面加了橫杠的話，20ff 就會變成負值了。
如果你想一次生成多條語句，可以使用 '+' 連接兩條語句，例如使用 h10p+m5e 可以生成 height: 10%;margin: 5em; 這兩條語句。
顏色值也是可以快速生成的，例如 c#3 → color: #333;，更復雜一點的，使用 bd5#0s 可以生成 border: 5px #000 solid; 這樣一句。下面是規則：
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
生成 !important 這條語句也當然很簡單，只需要一個 '!' 就可以了。
增加額外的選項
使用 @f 即可生成 CSS3 中的 font-face 的代碼結構：
@font-face {
font-family:;
src:url();
}
但是這個結構太簡單，不包含一些其他的 font-face 的屬性，諸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時候輸入 '+' 生成增強的結構，例如我們可以輸入 @f+ 命令，即可輸出選項增強版的 font-face 結構：
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
增加實驗性前綴（Vendor Prefixes）
CSS3 等現在還沒有出正式的 W3C 規范，但是很多瀏覽器已經實現了對應的功能，僅作為測試只用，所以在屬性前面加上自己獨特的實驗性前綴，不同的瀏覽器只會識別帶有自己規定前綴的樣式。然而為了實現兼容性，我們不得不編寫大量的冗余代碼，而且要加上對應的前綴。使用 Emmet 可以快速生成帶有前綴的 CSS3 屬性。
ST2 已經內置了一些常見的需要實驗性前綴的 CSS3 屬性，例如輸入 trf 會彈出提示，然后敲擊回車鍵即可生成。而 Emmet 增強了這個功能。在任意字符前面加上一條橫杠（-），即可生成該屬性的帶前綴代碼，例如輸入 -foo-css，會生成：
-webkit-foo-css: ;
-moz-foo-css: ;
-ms-foo-css: ;
-o-foo-css: ;
foo-css: ;
雖然 foo-css 並不是什么屬性，但是照樣可以生成。此外，你還可以詳細的控制具體生成哪幾個瀏覽器前綴或者先后順序，使用 -wm-trf 即可生成：
-webkit-transform: ;
-moz-transform: ;
transform: ;
可想而知，w 就是 webkit 前綴的縮寫，m 是 moz 前綴縮寫，s 是 ms 前綴縮寫，o 就是 opera 瀏覽器前綴的縮寫。如果使用 -osmw-abc 即可生成：
-o-abc: ;
-ms-abc: ;
-moz-abc: ;
-webkit-abc: ;
abc: ;
生成漸變背景
CSS3 中新增加了一條屬性 linear-gradient 使用這個屬性可以直接制作出漸變的效果。但是這個屬性的參數比較復雜，而且需要添加實驗性前綴，無疑需要生成大量代碼。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 lg(left, #fff 50%, #000) 可以直接生成：
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
直接幫你生成好了瀏覽器前綴。
3) Emmet 常用的高級功能
生成 Lorem Ipsum
Lorem Ipsum 表示一段隨機看不懂的文字。Lorem Ipsum 的文字讓人看不懂，這樣才能忽略內容的含義而專注內容的排版，作為測試數據填充用的。使用 Emmet 生成 Lorem Ipsum 文本非常簡單，只需要使用 lorem 這一條命令即可，敲擊 Tab 鍵之后，就會生成如下一段文字：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, dolor, aperiam ab repellendus blanditiis eum exercitationem. Quae, reprehenderit repellat impedit asperiores consequatur? Illum quos magnam odit omnis recusandae natus similique.
Emmet 的 lorem 命令不僅僅只有輸出這么一段文字這樣一個簡單的功能，它既然作為測試數據，可以加上參數指定要輸出的字符數量。例如，我們如果想輸出一個十個單詞的 h1 標題，我們就可以使用如下命令 h1>lorem10 。但是這項功能對於使用中文的網頁測試來說，好像沒有多大用處，畢竟中文和英語單詞的排版是不同的。
跳轉編輯區域
寫代碼一般要用到兩只手，有時候需要跳轉到別的代碼段等，你可以使用鍵盤方向鍵也可以使用鼠標。但是這都有缺陷，使用鍵盤方向鍵移動太慢了，而且需要按住 shift 鍵和方向鍵選中代碼；使用鼠標的話，手就必須離開鍵盤，來回也會浪費一些時間。而 Emmet 提供了一個很實用的功能，就是整塊的跳轉。
為了方便理解，先看一下官方的 Demo 動畫。這個功能，使用 Shift+Ctrl+. 和 Shift+Ctrl+, 分別向下或者向上移動，選取的是一整塊，先從標簽開始，再是整個屬性，再是屬性值。這樣，比鍵盤的方向鍵移動高效多了。
增加圖片的尺寸大小
有時候，我們需要給 
標簽增加對應的 width、height 屬性來表示圖片的大小或者給通過 background-image 屬性引用的背景圖片一個尺寸大小。通常的做法是看一下圖片的尺寸，然后加上，而現在，你只需要將光標移動到代碼段，摁下 Ctrl+U 即可讓 Emmet 自動讀取圖片的尺寸添加上。前提條件是圖片比較存在並且正確引用進來了。
如果是針對 標簽的，會在后面加上 width、height 屬性，如果是 background 引入的，會在下面加上 width、height 的 CSS 屬性。可以看一下官方的 Demo 。但是這里有個問題，官方的 Demo 中，實現這個功能的快捷鍵是 Shift+Ctrl+U 但實際使用中，這個快捷鍵不起作用。關於 Emmet 的 Mac、Win 下的快捷鍵，以這個頁面上的為准：https://github.com/sergeche/emmet-sublime#available-actions。
更新 CSS 的屬性值
我們在寫 CSS 的時候，有時候為了 hack 寫很多帶有前綴的屬性。例如：
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
如果我們突然想修改一下旋轉的角度值，那么我們就需要依次修改或者按住 Ctrl 多個選中進行修改。使用 Emmet 的話，就方便多了，我們只需要修改其中一個，然后摁下 Shift+Ctrl+R 鍵即可更新其他的相關屬性值。
將圖片資源轉換成 data url 形式
data url 圖片具有很多優點，在某些情況下比較實用，但是將圖片轉換成 data url 格式就比較麻煩了，得使用一些工具。而在 Emmet 中，將光標移動到 background: url() 中的圖片位置的地方，按下 Ctrl+’ 即可將圖片編碼成 data url 格式。當然，前提條件是圖片資源引用正確。
除此之外，Emmet 還有一些其他的諸如快速跳轉、計算等等常用功能，在這里只是介紹了幾個更常用的功能，有興趣的朋友可以打開Emmet Action 的官方文檔看一下 Demo，這里不再贅述。