在前端開發的過程中，一大部分的工作是寫 HTML、CSS 代碼。特別是手動編寫 HTML 代碼的時候，效率會特別低下，因為需要敲打很多尖括號，而且很多標簽都需要閉合標簽等。於是，就有了 Emmet(前身是Zen Coding)，它可以極大的提高代碼編寫的效率，它提供了一種非常簡練的語法規則，然后立刻生成對應的 HTML 結構或者 CSS 代碼，同時還有多種實用的功能幫助進行前端開發。
一、安裝emmet
- ctrl+p（sublime）
- 搜索emmet
- 安裝即可
二、快速編寫HTML代碼
基本語法：
1、生成后代元素：> 大於號表示后面要生成的內容是當前標簽的后代
命令：nav>ul>li
<nav> <ul> <li></li> </ul> </nav>
每個命令輸完后按下Tab鍵即可快速得到代碼
2、生成兄弟元素：+ 加號表示后面的元素和前面的元素是兄弟元素
命令：div+p+bq 得到代碼如下：
<div></div> <p></p> <blockquote></blockquote>
3、生成上級元素：^ 表示^后面的元素與^前面的元素的父元素是平級，即兄弟元素。一個^表示提升一個層級，兩個提升兩級
命令：div+div>p>span+em^bq 得到代碼如下：
1 <div></div> 2 <div> 3 <p><span></span><em></em></p> 4 <blockquote></blockquote> 5 </div>
命令：div+div>p>span+em^^bq 得到代碼如下：
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
4、生成類名： . Emmet 默認的標簽為 div ，如果我們不給出標簽名稱的話，默認就生成 div 標簽。Emmet會根據父標簽進行判定。比如在<ul>中輸入.item，就會生成<li class="item"></li>。
命令：.container 得到代碼如下：
<div class="container"></div>
如果想生成多個類名可連續寫
命令： .container.wrapper.more 得到代碼如下：
<div class="container wrapper more"></div>
5、生成ID：#
命令：#container 得到代碼如下：
<div id="container"></div>
6、生成分組：() 用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系
命令：(.foo>h1)+(.bar>h2) 得到代碼如下：
<div class="foo"> <h1></h1> </div> <div class="bar"> <h2></h2> </div>
7、重復生成多份：* *號后面是想重復生成的份數
命令：ul>li*5 得到代碼如下：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
8、對生成內容依次編號：$ $就表示一位數字，只出現一個的話，就從1開始。如果出現多個，就從0開始。如果我想生成三位數的序號，那么要寫三個$
命令：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>
只能這樣單調的生成序號？對於強大的 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 得到代碼如下：
<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 生成什么你們自己琢磨吧！
9、生成自定義屬性：[attr] 中括號里面的內容是你想添加的屬性
命令：td[rowspan=2 colspan=3 title] 得到代碼如下：
<td rowspan="2" colspan="3" title=""></td>
10、生成文本內容：{} 大括號里面是你想添加的文本內容
命令：a{Click me} 得到代碼如下：
<a href="">Click me</a>
命令：p>{Click }+a{here}+{ to continue} 得到代碼如下：
<p>Click <a href="">here</a>to continue</p>
到此為止基本語法內容也就這么多，剩下的就是加強理解與練習了。
注意：在寫命令的時候，你可能為了代碼的可讀性，使用一些空格什么的排版一下，這將會導致代碼無法使用。但是{}[]中可存在空格
ul>li.item${item$}*3
<ul> <li class="item1">item1</li> <li class="item2">item2</li> <li class="item3">item3</li> </ul>
#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words
<div id="content"> <div class="article"> <h1 class="ok" title="papername" style="color:#000;"></h1> <h3 class="no" title="subname" style="color:#fff;"></h3> <p class="words"></p> </div> </div>
練習的過程中我們可以試着反推出命令行
<div class="header"> <ul class="nav"> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> <li><a href="" style="block"><span>name</span></a></li> </ul> </div>
<table> <thead> <td class="col1"></td> <td class="col2"></td> <td class="col3"></td> <td class="col4"></td> </thead> <tbody> <tr class="row01"> <td class="col1"></td> </tr> <tr class="row02"> <td class="col2"></td> </tr> <tr class="row03"> <td class="col3"></td> </tr> </tbody> <tfoot> <td></td> <td></td> <td></td> <td></td> <td></td> </tfoot> </table>
<html> <head> <title></title> <style type="text/css"></style> <script src="abc1.js" type="text/javascript"></script> <script src="abc2.js" type="text/javascript"></script> <script src="abc3.js" type="text/javascript"></script> </head> <body> <div class="content"> <div class="nav"> <ul> <li><a href=""><span></span></a></li> </ul> </div> </div> <div class="sidebar"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> <div class="mian"> <div class="article"> <h1>article1</h1> </div> <div class="article"> <h1>article2</h1> </div> <div class="article"> <h1>article3</h1> </div> </div> </body> <div class="footer">copyright</div> </html>
這些代碼的命令你反推出來了嗎？
1.命令：.header>ul.nav>li*6>a[style=block]>span{name}
2.命令：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)
3.命令： html>(head>title+style[type=text/css]+script[type=text/javascript][src=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})
三、emmet在HTML與CSS中的應用
emmet除了能快速編輯出上面的代碼以外，還有一些其他代碼也可快速編輯，具體的、全面的快速編輯方式，還請瀏覽emmet官方文檔（有詳細說明哦！）
下面只列出一些常用的快速編輯方式
命令：link
<link rel="stylesheet" href="" />
命令：script:src
<script src=""></script>
命令：img
<img src="" alt="" />
等等。。。
CSS中縮寫
單位：
- p 表示%
- e 表示 em
- r表示 rem
寬度：
命令：w100 結果：width:100px; 默認單位px
命令：w100p 結果：width:100%;
高度：
命令：h100r 結果：height: 100rem;
顏色：
命令：c#3 結果： color: #333;
命令：c#e0 結果： color: #e0e0e0;
命令：c#fc0 結果： color: #ffcc00;
CSS3前綴：
- w 表示 -webkit-
- m 表示 -moz-
- s 表示 -ms-
- o 表示 -o-
命令：-wmso-transform
結果：
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
屬性模糊匹配：
如果有些縮寫你拿不准，Emmet會根據你的輸入內容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：
所以在平時使用的時候可留意emmet的提示
命令：h10p+m5e 結果：height: 10%;margin: 5em;
四、定制Emmet插件
- 添加新縮寫或更新現有縮寫，可修改snippets.json文件
- 更改Emmet過濾器和操作的行為，可修改preferences.json文件
- 定義如何生成HTML或XML代碼，可修改syntaxProfiles.json文件
這里都是英文文檔，沒有英語基礎的同學可就有點抓瞎了。