首页 > 代码库 > Emmet/Zen Coding 快速入门说明
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。