Emmet/Zen Coding 快速入門說明

快速參考

以下是支援的特性:

ele	creates an HTML element tag 展開一個HTML元素標籤
#	creates an id attribute 作用於元素標籤，展開一個id屬性
.	creates a class attribute 作用於元素標籤，展開一個類屬性，一個標籤可以跟多個類屬性，最終展開會一起唄加入class屬性中
[]	creates a custom attribute 作用於元素標籤，展開一個HTML元素標籤的屬性，可以是任意非標準屬性名稱，寫法同CSS選取器。
>	creates a child element 作用於元素標籤或組，緊跟展開一個子項目標籤或組，參考CSS選取器
+	creates a sibling element 作用於元素標籤或組，緊跟展開一個兄弟元素標籤或組，參考CSS選取器
^	climbs up 作用於元素標籤或組，緊跟的元素標籤或組爬升到上一個層級
*	is element multiplication. This creates the same thing n number of times 作用於元素標籤或組，展開重複次數，後面跟一個數字。
$	is replaced with an incremental number 配合*使用，代表拷貝的序號
$$	is used for numbers with padding 序號佔位，用0填充
{}	creates text in an element 展開為文本
()	as a group 將標籤組作為一組，可嵌套。

ID和類屬性:#and.

<!-- Type this -->div#contentRegion.address<!-- Creates this --><div id="contentRegion" class="address"></div>

自訂屬性:[]

<!-- Type this -->div[title]<!-- Creates this --><div title=""></div>

也可以包含屬性值

<!-- Type this -->input[placeholder="Name" type="text"]<!-- Creates this --><input type="text" value="" placeholder="Name" />

子組:>

<!-- Type this -->div#menu>span.item[title]<!-- Creates this --><div id="menu">    <span class="item" title=""></span></div>

兄弟組:+

<!-- Type this -->footer>div>a+input<!-- Creates this --><footer>    <div>        <a href=""></a>        <input type value="" />    </div></footer>

爬升:^

<!-- Type this -->footer>div>a+input^p<!-- Creates this --><footer>    <div>        <a href=""></a>        <input type value="" />    </div>    <p></p></footer>

重複次數:*

<!-- Type this -->ul>li*4>span<!-- Creates this --><ul>    <li><span></span></li>    <li><span></span></li>    <li><span></span></li>    <li><span></span></li></ul>

重複序號:$

<!-- Type this -->section>article.item$$*4<!-- Creates this --><section>    <article class="item01"></article>    <article class="item02"></article>    <article class="item03"></article>    <article class="item04"></article></section>

文本:{}

<!-- Type this -->ul>li*4>span{Caption $$}<!-- Creates this --><ul>    <li><span>Caption 01</span></li>    <li><span>Caption 02</span></li>    <li><span>Caption 03</span></li>    <li><span>Caption 04</span></li></ul>

組:()

<!-- Type this -->((a+span)+(a>span))*3<!-- Creates this --><a href=""></a><span></span><span><a href=""></a></span><a href=""></a><span></span><span><a href=""></a></span><a href=""></a><span></span><span><a href=""></a></span>