Emmet語法
一、Emmet語法簡介
1、什麼是Emmet？
二、基礎用法
1、元素(Elements)
2、文字操作符(Text)
3、屬性操作符(Attribute operators)
4、巢狀操作符(Nesting operators)
5、分組操作符(Grouping)
6、乘法(Multiplication)
7、自動計數(numbering)
三、常見用法及舉例
1.生成後代元素：>
2.生成兄弟元素：+
3.生成上級元素：^
4.生成多個元素：*
5.生成類名和id：. 和#
6.生成文字內容：{}
7.生成屬性：[]
8.生成編號：$
9.生成分組：()
Emmet語法
一、Emmet語法簡介
1、什麼是Emmet？
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

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的上級元素。
二、基礎用法
1、元素(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>

2、文字操作符(Text)
如果想在生成元素的同時新增文字內容可以使用{}

Copydiv{這是一段文字}
<div>這是一段文字</div>
a{點我點我}
<a href="">點我點我</a>
3、屬性操作符(Attribute operators)
屬性運算子用於修改輸出元素的屬性.

Id和Class (elem#id and elem.class )

Copydiv.test => <div class="test"></div>
div#pageId => <div id="pageId"></div>

隱式標籤則會自動聯想生成對應元素,根據配置規則不同生成的結果也是不同的.

Copy.class
=>
<div class></div>
em>.class
=>
<em><span class></span></em>
table>.row>.col
=>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
繫結多個類名用.符號連續起來即可

Copydiv.test1.test2.test3
=>
<div class="test1 test2 test3"></div>

自定義屬性使用 [attr1=’’ attr2=’’]

Copya[href='#' data-title='customer' target='_blank']
=>
<a href="#" data-title="customer" target="_blank"></a>

4、巢狀操作符(Nesting operators)
巢狀操作符用於將縮寫元素放置在生成的樹中,是否應放置在上下文元素的內部或附近.

子級:>

通過>標識元素可以生成巢狀子級元素,可以配合元素屬性進行連寫

Copydiv#pageId>ul>li
=>
<div id="pageId">
<ul>
<li></li>
</ul>
</div>

同級:+

+字元表示生成兄弟級元素.

Copydiv#pageId+div.child
=>
<div id="pageId"></div>
<div class="child"></div>
父級:^

用於生成父級元素的同級元素,從這個

字元所在位置開始,查詢左側最近的元素的父級元素並生成其兄弟級元素.

Copydiv>p.parent>span.child^ul.brother>li
=>
<div>
<p class="parent"><span class="child"></span></p>
<ul class="brother">
<li></li>
</ul>
</div>
5、分組操作符(Grouping)
分組使用()來實現縮寫的分離.比如這個例子,如果不加括號那麼a將作為span的子級元素生成.加上括號a將於()內的元素同級.

Copydiv>(ul>li+span)>a
=>
<div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>
6、乘法(Multiplication)
使用N即可自動生成重複項.N是一個正整數.在使用時請注意N所在位置,位置不同生成的結果不同.

Copyul>li*3
=>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
7、自動計數(numbering)
這個功能挺方便的對於生成重複項時增加一個序號,只需要加上$符號即可.

Copyul>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是放到±符後.

Copyul>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>
三、常見用法及舉例
Emmet語法是有很多高階用法的。例如模擬文字/隨機文字和包裝文字等等之類的操作。還有一些特別特別複雜的組合

比如下面這段東西:

table.table-row[role='table']>(thead>tr>td{item $@120}*5)+(tbody>tr>(td.item$$@-)lorem10*5)
生成的東西：

<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>
但是在我看來，不好意思， 我寧願自己去敲下面這些程式碼，也不願意去記這些花裡胡哨的東西。本身我們使用Emmet語法就是為了偷懶而不用寫大量的重複性的HTML程式碼而來的。如果使用了那些過於複雜的Emmet語法。是不是我們就失去了一開始的偷懶的初心呢？雖然看起來很牛逼，但是沒有必要。

所以，我僅在下面舉例一些比較常用，和普通程式設計師可能用到的使用方式。如果有大佬想要了解那些高階用法。可以去Emmet官網文件自行了解

1.生成後代元素：>
tag1>tag2表示在標籤(元素)tag1內生成後代標籤(元素)tag2

ul>li>a>img
效果:

<ul>
<li><a href=""><img src="" alt=""></a></li>
</ul>
2.生成兄弟元素：+
tag1+tag2表示在標籤(元素)tag1後生成兄弟標籤(元素)tag2

ul+li+a+img
效果:

<ul></ul>
<li></li>
<a href=""></a>
<img src="" alt="">
3.生成上級元素：^
tag1^tag2表示在標籤(元素)tag1的父級後生成兄弟標籤(元素)tag2，如果有兩個^符號，則再提升一級(向上找父親)，以此類推

ul>li>a^li>span^^input
效果

<ul>
<li><a href=""></a></li>
<li><span></span></li>
</ul>
<input type="text">
4.生成多個元素：*
tag1*n表示生成n個標籤(元素)tag1

ul>li*3
效果

<ul>
<li></li>
<li></li>
<li></li>
</ul>
5.生成類名和id：. 和#
tag1.classname1表示給標籤(元素)tag1新增類名classname1，可新增多個類名，若沒有寫tag1則預設建立一個類名為classname1的div

建立帶有指定class樣式的標籤：div.box
<div class="box"></div>
建立帶有指定id樣式的標籤：div#box
<div id="box"></div>

一個標籤建立多個class：div.box1.box2.box3
<div class="box1 box2 box3"></div>

一個標籤同時建立class和id：div.box#box2
<div class="box" id="box2"></div>

6.生成文字內容：{}
tag1{msg}表示在tag1內新增內容msg

h1{abc}
效果

<h1>abc</h1>
7.生成屬性：[]
tag1[attr1]表示給標籤(元素)tag1新增屬性attr1，可包含多個屬性

ul>li>a[href='#']
效果：

ul>
<li>
<a href="#"></a>
</li>
</ul>
img[src='pic.jpg' alt='圖片']

效果:

<img src="pic.jpg" alt="圖片">

// 也可以自定義屬性：
ul>li>test[data-content='this_is_data_value']

效果:

<ul>
<li>
<test data-content="this_is_data_value"></test>
</li>
</ul>
8.生成編號：$
$一般用在id名，類名，內容中；當只有一個$時，數字從1開始，當有多個$時，數字從0開始

@n可以讓數字從n開始
$需搭配*使用，否則將會原樣輸出

ul>li.$*3
效果

<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>

ul>li.item$$${666$}*3
效果:

<ul>
<li class="item001">6661</li>
<li class="item002">6662</li>
<li class="item003">6663</li>
</ul>
9.生成分組：()
可更加明確地表示層次關係

ul>li>a^^input
可寫為

(ul>li>a)+input
效果：

<ul>
<li><a href=""></a></li>
</ul>
<input type="text">

後面還有很多上細節的東西，但是個人覺得真的沒必要記，記住的話只是浪費時間而已，投入成本與回報偏差極大。

個人見解，大佬勿噴

本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15487165.html