在前端開發的過程中，一個最繁瑣的工作就是寫 HTML、CSS 代碼。數量繁多的標簽、屬性、尖括號、標簽閉合等，讓前端們甚是苦惱。於是，我向大家推薦 Emmet，它提供了一套非常簡單的語法規則，書寫起來非常爽快，然后只需要敲一個快捷鍵就立刻生成對應的 HTML 或 CSS 代碼，極大提高了代碼書寫效率。
Emmet 的前身是大名鼎鼎的 Zen coding，它是一個編輯器插件，需要基於指定的編輯器使用，官方網站提供多編輯器支持，目前它支持的編輯器如下：
- Sublime Text
- Eclipse/Aptana
- TextMate
- Coda
- Espresso
- Chocolat
- Komodo Edit
- Notepad++
- PSPad
- textarea
- CodeMirror
- Brackets
- NetBeans
- Adobe Dreamweaver
請參照上面列表安裝對應的編輯器插件，我一般使用 Sublime Text 3，下面就以 Sublime Text 3 插件 為例，講解 Emmet 的安裝、基礎語法。
在 Sublime text 3 中安裝 Emmet
目前，Emmet 已經可以通過 Package Control 安裝了。如果你的 Sublime Text 3 還沒有安裝 Package Control，請參照以下方法安裝，已經安裝的童鞋請自行跳過。
為 Sublime Text 3 安裝 Package Control 組件：
- 按 Ctrl + ` 打開控制台，粘貼以下代碼到底部命令行並回車：
|
1
|
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
|
- 重啟 Sublime Text 3
- 在 Perferences->Package Settings 中看到 Package Control，則表示安裝成功
使用 Package Control 安裝 Emmet 插件：
- 在 Package Control 中選擇 Install package 或者按 Ctrl+Shift+P，打開命令板
- 輸入 pci 然后選擇 Install Package
- 搜索輸入 emmet 找到 Emmet Css Snippets，點擊就可以自動完成安裝。
快速體驗 Emmet
Emmet 可以快速的編寫 HTML、CSS 以及實現其他的功能。它根據當前文件的解析模式來判斷要使用 HTML 語法還是 CSS 語法來解析。例如當前文件的后綴為 .html 那 Sublime text 3 就會用 HTML 的解析模式來解析高亮這個文件，Emmet 遇到里面的指令就會根據 HTML 的語法把它編譯成 HTML 結構。如果是在一個 .c 的 C 語言文件中，你寫出來的用於編譯 HTML 指令就不會被 Emmet 識別編譯。
此外，在沒有后綴的文件中，你可以按下shift + ctrl + p呼出面板，輸入seth就可以設置當前文件的解析模式為 HTML 。了解這些之后，下面我們來見證強大的 Emmet。
如果讓你編寫下面的這個 HTML 結構，你需要多長時間？
|
1
2
3
4
5
6
7
8
9
10
|
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
|
然而，這一切你只需要編寫下面這一句按照 Emmet 語法寫出來的語句，然后用 Emmet 編譯一下，就可以生成了！
|
1
|
#page>div.logo+ul#navigation>li*5>a{Item $}
|
我們把它復制到 Sublime text 3 中已經打開的 HTML 文件中，這時候緊跟着敲擊一下 TAB 鍵，見證奇跡的時刻到來了。
怎么樣？很神奇吧，僅僅寫一行代碼，就可以生成這么一個復雜的 HTML 結構，而且還可以生成對應的 class 、id 和有序號的內容。而且 Emmet 的語法很簡單，雖然你現在可能還看不懂，后面的系列教程會詳細講解它的語法，你現在只需要知道 Emmet 的工作流程：
打開 HTML 或 CSS 文件->按語法編寫指令->按下 TAB 鍵->生成
快速編寫HTML代碼
生成 HTML 文檔初始結構
HTML文檔需要包含一些固定的標簽，比如 doctype、html、head、body 以及 meta 等等，現在你只需要1秒鍾就可以輸入這些標簽。比如輸入!或html:5，然后按 Tab 鍵：
|
1
2
3
4
5
6
7
8
9
10
|
<html lang="en">
<head>
<meta charset="UTF-8">
< title>Document</title>
</head>
<body>
</body>
</html>
|
這就是一個 HTML5 的標准結構，也是默認的 HTML 結構。如果你想生成 HTML4 的過渡型結構，那么輸入指令 html:xt 即可生成如下結構：
|
1
2
3
4
5
6
7
8
9
10
|
<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 默認的標簽為 div，如果我們不給出標簽名稱的話，默認就生成 div 標簽。生成 id 為 page 的 div 標簽，我們只需要編寫下面指令：
|
1
|
div#page
|
或者使用默認標簽的方式：
|
1
|
#page
|
如果編寫一個 class 為 content 的 p 標簽，我們需要編寫下面指令：
|
1
|
p.content
|
同時指定標簽的 id 和 class，如生成 id 為 navigation，class 為 nav 的 ul 標簽：
|
1
|
ul#navigation.nav
|
指定多個 class，如上例中還需要給 ul 指定一個 class 為 dropdown：
|
1
|
ul#navigation.nav.dropdown
|
生成的 HTML 結構如下：
|
1
2
3
|
<ul id="navigation" class="nav dropdown">
</ul>
|
兄弟：+
生成標簽的兄弟標簽，即平級元素，使用指令 + ，例如下面指令：
|
1
|
div+ul+bq
|
生成的 HTML 結構如下：
|
1
2
3
|
<div></div>
<ul></ul>
<blockquote></blockquote>
|
后代：>
> 表示后面要生成的內容是當前標簽的后代。例如我要生成一個無序列表，而且被 class 為 nav 的 div 包裹，那么可以使用下面指令：
|
1
|
div.nav>ul>li
|
生成的 HTML 結構如下：
|
1
2
3
4
5
|
<div class="nav">
<ul>
<li></li>
</ul>
</div>
|
上級元素：^
上級 （Climb-up）元素是什么意思呢？前面咱們說過了生成下級元素的符號“>”，當使用 div>ul>li 的指令之后，再繼續寫下去，那么后續內容都是在 li 下級的。如果我想編寫一個跟 ul 平級的 span 標簽，那么我需要先用 “^” 提升一下層次。例如：
|
1
|
div.nav>ul>li^span
|
就會生成如下結構：
|
1
2
3
4
5
6
|
<div class="nav">
<ul>
<li></li>
</ul>
<span></span>
</div>
|
如果我想相對與 div 生成一個平級元素，那么就再上升一個層次，多用一個 “^” 符號：
|
1
|
div.nav>ul>li<sup></sup>span
|
結果如下：
|
1
2
3
4
5
6
|
<div class="nav">
<ul>
<li></li>
</ul>
</div>
<span></span>
|
重復多份：*
特別是一個無序列表，ul 下面的 li 肯定不只是一份，通常要生成很多個 li 標簽。那么我們可以直接在 li 后面 * 上一些數字：
|
1
|
ul>li*5
|
這樣就直接生成五個項目的無序列表了。如果想要生成多份其他結構，方法類似。
分組：()
用括號進行分組，表示一個代碼塊，分組內部的嵌套和層級關系和分組外部無關，例如：
|
1
|
div>(header>ul>li*2>a)+footer>p
|
生成結構如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
|
可以看出整個分組成為 div 的后代，並且分組與 footer 平級。此外，分組還可以很方便的結合上面說的 “*” 符號生成重復結構：
|
1
|
(div>dl>(dt+dd)*3)+footer>p
|
生成結構如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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://bubkoo.com”，title 為“bubkoo’s blog”的 a 標簽，可以這樣寫：
|
1
|
a[href="http://bubkoo.com" title="bubkoo's blog"]
|
此外，也可以生成一些自定義屬性：
|
1
|
div[data-title="bubkoo's blog" data-content="CUCKOO USHERS SPRING IN"]
|
就會生成：
|
1
2
3
|
<div data-title="bubkoo's blog" data-content="CUCKOO USHERS SPRING IN">
</div>
|
編號：$
例如無序列表，我想為五個個 li 增加一個 class 屬性值 item1 ，然后依次遞增從 1-5，那么就需要使用 $ 符號：
|
1
|
ul>li.item$*5
|
結構是：
|
1
2
3
4
5
6
7
|
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
|
$ 表示一位數字，只出現一個的話，就從 1 開始，如果出現多個，就從 0 開始。
如果我想生成三位數的序號，那么要寫三個 $：
|
1
|
ul>li.item$$$*5
|
輸出：
|
1
2
3
4
5
6
7
|
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
|
此外，也可以在 $ 后面增加 @- 來實現倒序排列：
|
1
|
ul>li.item$@-*5
|
輸出：
|
1
2
3
4
5
6
7
|
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
|
同時，還可以使用 @N 指定開始的序號：
|
1
|
ul>li.item$@3*5
|
那么輸出：
|
1
2
3
4
5
6
7
|
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
|
配合上面倒序輸出，可以這樣寫：
|
1
|
ul>li.item$@-3*5
|
就可以生成以 3 為底倒序列表：
|
1
2
3
4
5
6
7
|
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
|
文本內容：{}
生成超鏈接一般要加上可點擊的文本內容，如上面的連接：
|
1
|
a[href="http://bubkoo.com" title="bubkoo's blog"]{猛擊這里}
|
就會生成
|
1
|
<a href="http://bubkoo.com" title="bubkoo's blog">猛擊這里</a>
|
另外，在生成內容的時候，特別要注意前后的符號關系，雖然 a>{Click me} 和 a{Click me} 生成的結構是相同的，但是加上其他的內容就不一定了，例如：
|
1
2
3
4
5
|
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
|
隱式標簽
隱式標簽表示 Emmet 可以省略某些標簽名，例如，聲明一個帶類的div，只需輸入.item，就會生成<div class="item"></div>。另外，Emmet 還會根據父標簽進行判定，例如，在中輸入ul>.item$*5，就可以生成：
|
1
2
3
4
5
6
7
|
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
|
下面是所有的隱式標簽名稱：
- li：用於 ul 和 ol 中
- tr：用於 table、tbody、thead 和 tfoot 中
- td：用於 tr 中
- option：用於 select 和 optgroup 中
不要有空格
在寫指令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下。這就會導致代碼無法使用。例如下面這句：
|
1
2
|
<!-- a{click}+b{here} -->
(header > ul.nav > li*5) + footer
|
執行結果會不是你所希望的那樣，所以，指令之間不要有空格。
HTML 簡寫規則簡單總結
1. E 代表HTML標簽。
2. E#id 代表id屬性。
3. E.class 代表class屬性。
4. E[attr=foo] 代表某一個特定屬性。
5. E{foo} 代表標簽包含的內容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同級元素。
8. E^N 代表N是E的上級元素。
飛一般的 CSS 書寫
首先，Sublime Text 3 已經提供了比較強大的 CSS 樣式所寫方法來提高 CSS 編寫效率。例如編寫 position: absolute; 這一個屬性，我們只需要輸入 posa 這四個字母即可。可以在平時書寫過程中，留意一下 ST3 提供了哪些屬性的縮寫方法，這樣就可以提高一定的效率了。但是 Emmet 提供了更多的功能，請往下看。
簡寫屬性和屬性值
比如要定義元素的寬度，只需輸入w100，即可生成：
|
1
|
width: 100px;
|
Emmet 的默認設置 w 是 width 的縮寫，后面緊跟的數字就是屬性值。默認的屬性值單位是 px ，你可以在值的后面緊跟字符生成單位，可以是任意字符。例如，w100foo 會生成：
|
1
|
width:100foo;
|
同樣也可以簡寫屬性單位，如果你緊跟屬性值后面的字符是 p，那么將會生成：
|
1
|
width:100%;
|
下面是單位別名列表：
- p 表示%
- e 表示 em
- x 表示 ex
像 margin 這樣的屬性，可能並不是一個屬性值，生成多個屬性值需要用橫杠（-）連接兩個屬性值，因為 Emmet 的指令中是不允許空格的。例如使用 m10-20 可以生成：
|
1
|
margin: 10px 20px;
|
如果你想生成負值，多加一條橫杠即可。例如：m10–20 可以生成：
|
1
|
margin: 10px -20px;
|
需要注意的是，如果你對每個屬性都指定了單位，那么不需要使用橫杠分割。例如使用 m10e20e 可以生成：
|
1
|
margin: 10em 20em;
|
如果使用了橫杠分割，那么屬性值就變成負值了。例如使用 m10e-20e 就生成：
|
1
|
margin: 10em -20em;
|
如果你想一次生成多條語句，可以使用 “+” 連接兩條語句，例如使用 h10p+m5e 可以生成：
|
1
2
|
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 的代碼結構：
|
1
2
3
4
|
@font-face {
font-family:;
src:url();
}
|
但是這個結構太簡單，不包含一些其他的 font-face 的屬性，諸如 background-image、 border-radius、 font、@font-face、 text-outline、 text-shadow 等屬性，我們可以在生成的時候輸入 “+”生成增強的結構，例如我們可以輸入 @f+ 命令，即可輸出選項增強版的 font-face 結構：
|
1
2
3
4
5
6
7
8
9
10
|
@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;
}
|
模糊匹配
如果有些縮寫你拿不准，Emmet 會根據你的輸入內容匹配最接近的語法，比如輸入 ov:h、ov-h、ovh 和 oh，生成的代碼是相同的：
|
1
|
overflow: hidden;
|
供應商前綴
CSS3 等現在還沒有出正式的 W3C 規范，但是很多瀏覽器已經實現了對應的功能，僅作為測試只用，所以在屬性前面加上自己獨特的供應商前綴，不同的瀏覽器只會識別帶有自己規定前綴的樣式。然而為了實現兼容性，我們不得不編寫大量的冗余代碼，而且要加上對應的前綴。使用 Emmet 可以快速生成帶有前綴的 CSS3 屬性。
在任意字符前面加上一條橫杠（-），即可生成該屬性的帶前綴代碼，例如輸入 -foo-css，會生成：
|
1
2
3
4
5
|
-webkit-foo-css: ;
-moz-foo-css: ;
-ms-foo-css: ;
-o-foo-css: ;
foo-css: ;
|
雖然 foo-css 並不是什么屬性，但是照樣可以生成。此外，你還可以詳細的控制具體生成哪幾個瀏覽器前綴或者先后順序，使用 -wm-trf 即可生成：
|
1
2
3
|
-webkit-transform: ;
-moz-transform: ;
transform: ;
|
可想而知，w 就是 webkit 前綴的縮寫，m 是 moz 前綴縮寫，s 是 ms 前綴縮寫，o 就是 opera 瀏覽器前綴的縮寫。如果使用 -osmw-abc 即可生成：
|
1
2
3
4
5
|
-o-abc: ;
-ms-abc: ;
-moz-abc: ;
-webkit-abc: ;
abc: ;
|
漸變背景
CSS3 中新增加了一條屬性 linear-gradient 使用這個屬性可以直接制作出漸變的效果。但是這個屬性的參數比較復雜，而且需要添加實驗性前綴，無疑需要生成大量代碼。而在 Emmet 中使用 lg() 指令即可快速生成，例如：使用 lg(left, #fff 50%, #000) 可以直接生成：
|
1
2
3
4
5
|
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);
|
附加功能
生成Lorem ipsum文本
Lorem ipsum 指一篇常用於排版設計領域的拉丁文文章，主要目的是測試文章或文字在不同字型、版型下看起來的效果。通過 Emmet，你只需輸入 lorem 或 lipsum 即可生成這些文字。還可以指定文字的個數，比如 lorem10，將生成：
|
1
2
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, esse, provident, nihil laudantium vitae quam natus a earum assumenda ex vel consectetur fugiat eveniet minima veritatis blanditiis molestiae harum est!
|
定制
你還可以定制Emmet插件：
- 添加新縮寫或更新現有縮寫，可修改 snippets.json 文件
- 更改Emmet過濾器和操作的行為，可修改 preferences.json 文件
- 定義如何生成HTML或XML代碼，可修改 syntaxProfiles.json 文件
快捷鍵
-
Ctrl+,
展開縮寫 -
Ctrl+M
匹配對 -
Ctrl+H
使用縮寫包括 -
Shift+Ctrl+M
合並行 -
Ctrl+Shift+?
上一個編輯點 -
Ctrl+Shift+?
下一個編輯點 -
Ctrl+Shift+?
定位匹配對