Emmet 使用類似于 CSS 選擇器的語法描述元素在生成的文檔樹中的位置及其屬性。

元素

可以使用元素名（如 div 或者 p）來生成?HTML 標簽。Emmet 沒有預定義的有效元素名的集合，可以把任何單詞當作標簽來生成和使用：div?→?<div></div>,?foo?→?<foo></foo>?等。

嵌套運算符

嵌套運算符用于以縮寫的方式安排元素在生成文檔樹中的位置：將其放在內部或成為相鄰的元素。

子:?>

可以使用 >?運算符指定嵌套元素在另一個元素內部：

div>ul>li

生成的結果為：

<div><ul><li></li></ul> </div>

兄弟:?+

使用?+?運算符將相鄰的其它元素處理為同級：

div+p+bq

生成的結果為：

<div></div> <p></p> <blockquote></blockquote>

上升:?^

使用?>?運算符將會降低所有后續所有元素在生成樹中的級別，每一級的兄弟元素也被解析成相同深度的元素：

div+div>p>span+em

將生成：

<div></div> <div><p><span></span><em></em></p> </div>

使用?^?運算符，能夠提升元素在生成樹中的一個級別，并同時影響其后的元素：

div+div>p>span+em^bq

將生成：

<div></div> <div><p><span></span><em></em></p><blockquote></blockquote> </div>

可以連續使用多個?^?運算符，每次提高一個級別：

div+div>p>span+em^^^bq

將生成：

<div></div> <div><p><span></span><em></em></p> </div> <blockquote></blockquote>

重復:?*

使用?*?運算符可以定義一組元素：

ul>li*5

將生成：

<ul><li></li><li></li><li></li><li></li><li></li> </ul>

分組:?()

括號用于在復雜的 Emmet 縮寫中處理一組子樹：

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>

如果想與瀏覽器 DOM 協同工作，可能想要對文檔片段分組：每個組包含一個子樹，所有的后續元素都插入到與組中第一個元素相同的級別中。

能夠在組中嵌套組并且使用?*?運算符綁定它們：

(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>

使用分組，可以使用單個縮寫逐個寫出整頁的標簽，不過盡量不要這么做。

屬性運算符

屬性運算符用于編輯所生成的元素的屬性，在 HTML 和 XML 中可以快速地為生成元素添加?class?屬性。

ID 和 CLASS

在 CSS 中，可以使用?elem#id?和?elem.class?注解來達到為元素指定?id?或?class 屬性的目的。在 Emmet 中，可以使用幾乎相同的語法來為指定的元素添加這些屬性：element:

div#header+div.page+div#footer.class1.class2.class3

生成：

<div id="header"></div> <div class="page"></div> <div id="footer" class="class1 class2 class3"></div>

自定義屬性

可以使用?[attr]?注解（就像在 CSS 中一樣）來為元素添加自定義屬性：

td[title="Hello world!" colspan=3]

將生成：

<td title="Hello world!" colspan="3"></td>

• 能夠在方括號中放置許多屬性，
• 可以不為屬性指定值：?td[colspan title]?將生成?<td colspan="" title="">?，如果你的編輯器支持，可以使用 tab 來跳到每個空屬性中填寫。
• 屬性可以用單引號或雙引號作為定界符。
• 如果屬性不包含空格，不需要用定界符括住它：td[title=hello colspan=3]?是正確的。

編號:?$

使用?*?運算符可以重復生成元素，如果帶?$?就可以為它們編號。把?$?放在元素名、屬性名或者屬性值中，將為每個元素生成正確的編號：

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>

使用多?$?可以填充前導的零：

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>

改變編號的基數和方向

使用?@?，可以改變數字的走向（升序或降序）和基數（例如起始值）。

在?$ 后添加?@- 來改變數字走向：

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

將生成：

<ul><li class="item7"></li><li class="item6"></li><li class="item5"></li><li class="item4"></li><li class="item3"></li> </ul>

文本:?{}

可以用花括號向元素中添加文本：

a{Click me}

將生成：

<a href="">Click me</a>

注意，這個?{text}?是被當成獨立元素解析的（類似于?div,?p?），但當其跟在其它元素后面時則有所不同。例如，?a{click}?和?a>{click}?產生相同的輸出，但是?a{click}+b{here}?和?a>{click}+b{here}?的輸出就不同了：

<!-- a{click}+b{here} --> <a href="">click</a><b>here</b><!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>

在第二示例中，?<b>?元素放在了?<a>?元素的里面。差別如下：當?{text}?寫在元素的后面，它不影響父元素的上下文。下面是展示這種差別的重要性的較復雜的例子：

p>{Click }+a{here}+{ to continue}

生成：

<p>Click <a href="">here</a> to continue</p>

在這個例子里， 我們用?> 運算符明確的將?Click here to continue?下移一級，放在?<p>?元素內，但對于?a?元素的內容就不需要了，因為?<a>?僅有?here?這一部分內容，它不改變父元素的上下文。

作為比較，下面是不帶有 > 運算符的相同縮寫：

p{Click }+a{here}+{ to continue}

生成：

<p>Click </p> <a href="">here</a> to continue

縮寫格式的注意事項

當熟悉了 Emmet 的縮寫語法后，可能會想要使用一些格式來生成更可讀的縮寫。例如，在元素和運算符之間使用空格間隔：

(header > ul.nav > li*5) + footer

但是這種寫法是錯誤的，因為空格是 Emmet 停止縮寫解析的標識符。

請多用戶誤以為每個縮寫都應寫在新行上，但是他們錯了：可以在文本的任意位置鍵入和擴展縮寫。

（此處原文使用腳本做了一段示例，限于博客的體例，我沒有辦法將原文的示例腳本放在本文中，因此用截屏工具錄下了一段屏幕，放在此處，有興趣的朋友，可以去原文地址去看原文中的示例）

這也就是為什么當想要停止解析和擴展時，Emmet 需要一些標志的原因。如果你仍然認為復雜的縮寫需要一些格式使其更易讀：

• 縮寫不是模板語言，它們不需要”易讀“，它們必須”可快速擴展和移動“。
• 不需要寫復雜的縮寫。不要認為在 web 編程中”鍵入“是最慢的運算。想快速找出構建單個的復雜縮寫比構造和鍵入一些較短較簡單的縮寫更慢。
• 轉自：http://www.cnblogs.com/matchless/archive/2013/04/10/3010628.html

轉載于:https://www.cnblogs.com/lyweb/archive/2013/04/10/3011661.html

總結

以上是生活随笔為你收集整理的Emmet (ZenCoding) 缩写语法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。