Emmet縮寫語法

縮寫語法

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 編程中」鍵入「是最慢的運算。想快速找出構建單個的複雜縮寫比構造和鍵入一些較短較簡單的縮寫更慢。