首页 > 其他 > 详细

Emmet/Zen Coding 快速入门说明

时间:2014-05-31 15:31:05      阅读:444      评论:0      收藏:0      [点我收藏+]

快速参考

以下是支持的特性:

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.

bubuko.com,布布扣
<!-- Type this -->
div#contentRegion.address

<!-- Creates this -->
<div id="contentRegion" class="address"></div>
bubuko.com,布布扣

自定义属性:[]

bubuko.com,布布扣
<!-- Type this -->
div[title]

<!-- Creates this -->
<div title=""></div>
bubuko.com,布布扣

也可以包含属性值

bubuko.com,布布扣
<!-- Type this -->
input[placeholder="Name" type="text"]

<!-- Creates this -->
<input type="text" value="" placeholder="Name" />
bubuko.com,布布扣

子组:>

bubuko.com,布布扣
<!-- Type this -->
div#menu>span.item[title]

<!-- Creates this -->
<div id="menu">
    <span class="item" title=""></span>
</div>
bubuko.com,布布扣

兄弟组:+

bubuko.com,布布扣
<!-- Type this -->
footer>div>a+input

<!-- Creates this -->
<footer>
    <div>
        <a href=""></a>
        <input type value="" />
    </div>
</footer>
bubuko.com,布布扣

爬升:^

bubuko.com,布布扣
<!-- Type this -->
footer>div>a+input^p

<!-- Creates this -->
<footer>
    <div>
        <a href=""></a>
        <input type value="" />
    </div>
    <p></p>
</footer>
bubuko.com,布布扣

重复次数:*

bubuko.com,布布扣
<!-- 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>
bubuko.com,布布扣

重复序号:$

bubuko.com,布布扣
<!-- 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>
bubuko.com,布布扣

文本:{}

bubuko.com,布布扣
<!-- 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>
bubuko.com,布布扣

组:()

bubuko.com,布布扣
<!-- 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>
bubuko.com,布布扣

Emmet/Zen Coding 快速入门说明,布布扣,bubuko.com

Emmet/Zen Coding 快速入门说明

原文:http://www.cnblogs.com/binking338/p/3761022.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!