一、Emmet简述
Emmet (前身為Zen Coding)是一個能大幅度提高前端開發效率的一個工具.在前端開發的過程中，一大部分的工作是寫HTML、CSS代碼。特別是手動編寫HTML代碼的時候，效率會特別低下，因為需要敲打很多尖括號，而且很多標籤都需要閉合標籤等。於是，就有了Emmet，它可以極大的提高代碼編寫的效率，它提供了一種非常簡練的語法規則，然後立刻生成對應的HTML結構或者CSS代碼，同時還有多種實用的功能幫助進行前端開發。
VSCode內置了Emmet語法，在附檔名為.html/.css中輸入縮寫後按 Tab鍵 即會自動生成相應代碼
請注意在VSCode新版本中按Tab不再默認啟用Emmet展開縮寫!需要在設定中將
emmet.triggerExpansionOnTab設置為true值!
語法基本規則如下:
E 代表HTML標籤。
E#id 代表id屬性。
E.class 代表class屬性。
E[attr=foo] 代表某一個特定屬性。
E{foo} 代表標籤包含的內容是foo。
E>N 代表N是E的子元素。
E+N 代表N是E的同級元素。
E^N 代表N是E的上級元素。
本文僅介紹了在Html使用Emmet
如果想CSS縮寫的語法請參考這裡CSS Abbreviations
二、基礎用法
元素(Elements)
您可以使用元素的名稱，如div或p來生成HTML標籤。Emmet沒有一組可用的標籤名稱，可以寫任何單詞並將其轉換為標籤。也就是只要知道元素的縮寫，Emmet會自動轉換成對應標籤.
例如:
div => <div> </div>
foo => <foo> </foo>
html:5 => 將生成html5標準的包含body為空基本dom
html:xt => 生成XHTML過渡文檔類型,DOCTYPE為XHTML
html:4s => 生成HTML4嚴格文檔類型,DOCTYPE為HTML 4.01
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
base => <base href="">
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>
文本操作符(Text)
如果想在生成元素的同時添加文本內容可以使用{}
div{這是一段文本}
<div>這是一段文本</div>
a{點我點我}
<a href="">點我點我</a>
屬性操作符(Attribute operators)
屬性運算符用於修改輸出元素的屬性.
Id和Class（elem＃id和elem.class）
div.test => <div class="test"></div>
div#pageId => <div id="pageId"></div>
隱式標籤則會自動聯想生成對應元素,根據配置規則不同生成的結果也是不同的.
.class
=>
<div class></div>
em>.class
=>
<em><span class></span></em>
table>.row>.col
=>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
綁定多個類名用 . 符號連續起來即可
div.test1.test2.test3
=>
<div class="test1 test2 test3"></div>
自定義屬性使用[attr1='' attr2='']
a[href='#' data-title='customer' target='_blank']
=>
<a href="#" data-title="customer" target="_blank"></a>
嵌套操作符(Nesting operators)
嵌套操作符用於將縮寫元素放置在生成的樹中，是否應放置在上下文元素的內部或附近。
子級：>
通過 > 標識元素可以生成嵌套子級元素，可以配合元素屬性進行連寫
div#pageId>ul>li
=>
<div id="pageId">
<ul>
<li></li>
</ul>
</div>
同級：+
+ 字元表示生成兄弟級元素.
div#pageId+div.child
=>
<div id="pageId"></div>
<div class="child"></div>
父級：^
用於生成父級元素的同級元素，從這個字元所在位置開始，搜尋左側最近的元素的父級元素並生成其兄弟級元素.
div>p.parent>span.child^ul.brother>li
=>
<div>
<p class="parent"><span class="child"></span></p>
<ul class="brother">
<li></li>
</ul>
</div>
分組操作符(Grouping)
分組使用 () 來實現縮寫的分離。比如以下例子，如果不加括號那麼a將作為span的子級元素生成。加上括號a將於()內的元素同級。
div>(ul>li+span)>a
=>
<div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>
乘法(Multiplication)
使用N即可自動生成重複項。N是一個正整數，在使用時請注意N所在位置，位置不同生成的結果不同。
ul>li*3
=>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
自動計數(numbering)
這個功能很方便，對於生成重複項時增加一個序號，只需要加上$符號即可。
ul>li.item${item number:$}*3
<ul>
<li class="item1">item number:1</li>
<li class="item2">item number:2</li>
<li class="item3">item number:3</li>
</ul>
如果生成兩位數則使用兩個連續的$$,更多位數以此類推…
使用@修飾符，可以更改編號方向（昇冪或降冪）和基數（例如起始值）。注意這個操作符在$之後添加
@- 表示降冪，@+ 表示昇冪,默認使用昇冪.
@N 可以改變起始值，需要注意的是如果配合升降冪使用的話 N 是放到 +-符號 後。
ul>li.item$@-*3
=>
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
---------------------------
ul>li.item$@-10*3
=>
<ul>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
</ul>
上述的操作是可以搭配使用進而得出酷炫的效果，使用時請注意空格的問題。縮寫代碼不要有空格否則是不會進行轉換的。
另外如果你的編輯器中已經有了一些html智慧提示代碼段，比如我的VSCode還裝了HTML Snippets外掛程式，這個與Emmet語法有部分衝突，使用Tab鍵時會優先使用外掛程式的代碼提示，建議禁用。
組合起來看看效果：
table.table-row[role='table']>(thead>tr>td{item $@120}*5)+(tbody>tr>(td.item$$@-)lorem10*5)
這段目的在於生成一個類名為table-row，且自定義了屬性role的table標籤，內部包含了thead與tbody，分別生成5個td。
thead中td的內容是item加上自增序號，自增序號基數從120開始。
tbody中td擁有一個名為item加降冪自增符號類名，且每個td內容隨機填充10個單詞。
<table class="table-row" role="table">
<thead>
<tr>
<td>item 120</td>
<td>item 121</td>
<td>item 122</td>
<td>item 123</td>
<td>item 124</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<td class="item05">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, assumenda.</td>
</td>
<td>
<td class="item04">Magnam possimus molestias ipsum animi rem placeat, ut obcaecati laudantium.</td>
</td>
<td>
<td class="item03">Consequuntur, labore ad optio cupiditate iusto dolores fugit quidem officiis.</td>
</td>
<td>
<td class="item02">Veniam, explicabo consequuntur blanditiis at dicta fuga ratione eos beatae.</td>
</td>
<td>
<td class="item01">Fuga voluptatum illo quis ducimus ad eveniet non. Saepe, eveniet.</td>
</td>
</tr>
</tbody>
</table>
再來個配合嵌套元素和計數的例子.
div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main
這個有點複雜，看以下效果:
<div class="nav">
<nav id="navbar">
<ul>
<li>
<a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a>
<a href="/xxx/product/2" data-index="2">Dolor vel, quia quas.</a>
<a href="/xxx/product/3" data-index="3">Qui hic, corrupti eum!</a>
<a href="/xxx/product/4" data-index="4">Necessitatibus perspiciatis, corrupti. Praesentium!</a>
<a href="/xxx/product/5" data-index="5">Nostrum quos, voluptate. Velit!</a>
</li>
</ul>
</nav>
<div class="btn" type="button"><span>--</span></div>
</div>
<div id="main"></div>
三、進階高級用法
模擬文本/隨機文本
在開發時經常要填充一些文本內容佔位元，Emmet內置了Lorem Ipsum功能來實現。loremN或者lipsumN，N表示生成的單詞數，正整數，可以不填。
lorem
=> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quia commodi vero sint omnis fugiat excepturi reiciendis necessitatibus totam asperiores, delectus saepe nulla consequuntur nostrum! Saepe suscipit recusandae repellendus assumenda.
p>lorem4
=>
<p>Lorem ipsum dolor sit.</p>
(p>lorem4)*3
=>
<p>Lorem ipsum dolor sit.</p>
<p>Labore aperiam, consequuntur architecto.</p>
<p>Quidem nisi, cum odio!</p>
包裝文本
聽起來可能有點繞口，通俗點解釋就是把一段指定的文本包裝成我們想要的結構。注意這個功能需要編輯器的支援，舉個例子：
比如PM給了這樣一段文本
首頁
產品介紹
相關案例
關於我們
聯繫我們
而我們預期的效果是這樣
<nav>
<ul>
<li>首頁</li>
<li>產品介紹</li>
<li>相關案例</li>
<li>關於我們</li>
<li>聯繫我們</li>
</ul>
</nav>
- 選中文本,按下
ctrl+shift+p打開命令窗口輸入ewrap - 選擇
Emmet:使用縮寫進行包裝(Wrap with Abbreviation)選項
- 輸入縮寫字元
nav>ul>li*按下回車鍵即可看到效果.
當然也可以在菜單=>編輯=>Emmet(M)…然後輸入.
這裡需要的注意的地方是輸入的縮寫代碼中*所在位置不同得到的效果也是不同的.
另外如果給的文本帶有序號的情況，我們也是可以通過縮寫來處理，而不是手動刪除，主要用的是|t 來處理.
比如：
1.首頁
2.產品介紹
3.相關案例
4.關於我們
5.聯繫我們
輸入包裝字元命令
nav>ul>li*|t
即可看到生成的html中自動去掉了序號
針對上邊說的幾種情況來示範一下.
利用好Emmet來快速編寫Html程式碼能提升工作效率，不用在一個個敲閉合標籤，簡直是我等偷懶黨神器，趕快去耍耍吧。