Emmet/Zen Coding 快速入门说明

王朝学院·作者佚名  2016-05-24
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航