爱程序网

Emmet/Zen Coding 快速入门说明

来源: 阅读:

快速参考

以下是支持的特性:

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

相关文章列表:
关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助