HTML中Zen Coding

標籤：添加   不包含   web   產生樹   fetch   head   嵌套   click   朋友   

嵌套運算子

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

子:  >

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

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>[email protected]*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>[email protected]*5

將產生：

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

這些附加的運算子可以同時使用：

ul>[email protected]*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

標籤屬性

link[rel=prefetch title="Hello world"]

產生：

<link rel="prefetch" href="" title="Hello world">

 

縮寫格式的注意事項

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

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

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

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

（此處原文使用指令碼做了一段樣本，限於部落格的體例，我沒有辦法將原文的樣本指令碼放在本文中，因此用截屏工具錄下了一段螢幕，放在此處，有興趣的朋友，可以去原文地址去看原文中的樣本）

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

• 縮寫不是範本語言，它們不需要”易讀“，它們必須”可快速擴充和移動“。
• 不需要寫複雜的縮寫。不要認為在 web 編程中”鍵入“是最慢的運算。想快速找出構建單個的複雜縮寫比構造和鍵入一些較短較簡單的縮寫更慢。

 

HTML中Zen Coding