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>