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

元素

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

嵌套運算符

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

子:?>

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

div>ul>li

生成的結(jié)果為：

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

兄弟:?+

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

div+p+bq

生成的結(jié)果為：

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

上升:?^

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

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>

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

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

將生成：

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

重復(fù):?*

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

ul>li*5

將生成：

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

分組:?()

括號用于在復(fù)雜的 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 協(xié)同工作，可能想要對文檔片段分組：每個組包含一個子樹，所有的后續(xù)元素都插入到與組中第一個元素相同的級別中。

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

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

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

屬性運算符

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

ID 和 CLASS

在 CSS 中，可以使用?elem#id?和?elem.class?注解來達(dá)到為元素指定?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]?是正確的。

編號:?$

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

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>

使用多?$?可以填充前導(dǎo)的零：

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>

改變編號的基數(shù)和方向

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

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

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 改變編號的基數(shù)：

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}?是被當(dāng)成獨立元素解析的（類似于?div,?p?），但當(dāng)其跟在其它元素后面時則有所不同。例如，?a{click}?和?a>{click}?產(chǎn)生相同的輸出，但是?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>?元素的里面。差別如下：當(dāng)?{text}?寫在元素的后面，它不影響父元素的上下文。下面是展示這種差別的重要性的較復(fù)雜的例子：

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

生成：

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

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

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

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

生成：

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

縮寫格式的注意事項

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

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

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

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

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

這也就是為什么當(dāng)想要停止解析和擴(kuò)展時，Emmet 需要一些標(biāo)志的原因。如果你仍然認(rèn)為復(fù)雜的縮寫需要一些格式使其更易讀：

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

轉(zhuǎn)載于:https://www.cnblogs.com/lyweb/archive/2013/04/10/3011661.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。