明凯博客

关注网站技术,一个特立独行的程序员

Zen Coding的常用方法

目前 Zen Coding 已经更名为 Emmet。
zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉,就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。
1.E | E#name | E.name
这里E表示元素,如p,div等。#name和.name分别表示id和class属性。例:
div

1
<div></div>

div#main

1
<div id="main"></div>

ul.item

1
<li class="item"></li>

如要显示一个id和多个class属性时,可以这样写
ul#nav.one.two

2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name
>表示父级嵌套子级。例:
div>span

1
<div><span></span></div>

div#nav>ul.main

1
2
3
<div id="nav"> 
<ul class="main"></ul> 
</div>

3.E+E | E#name+E#name | E.#name+E.name | E.name+E.name
+号表示兄弟关系。例:
p+p

1
2
<p></p> 
<p></p>

div#header+div#content+div#footer

1
2
3
<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div>

E+ (+号表示会生成默认的子元素)
table+

1
2
3
4
5
<table> 
<tr> 
<td></td> 
</tr> 
</table>

ul+

1
2
3
<ul> 
<li></li> 
</ul>

dl+

1
2
3
4
<dl> 
<dt></dt> 
<dd></dd> 
</dl>

4.E*N
N:表示某个元素需要重复的次数。例:
p*3

1
2
3
<p></p> 
<p></p> 
<p></p>

ul#nav>li.item*4

1
2
3
4
5
6
<ul id="nav"> 
<li class="item"></li> 
<li class="item"></li> 
<li class="item"></li> 
<li class="item"></li> 
</ul>

5.E*N$
$:表示序号。例:
ul#nav>li.item-$*4

1
2
3
4
5
6
<ul id="nav"> 
<li class="item-1"></li> 
<li class="item-2"></li> 
<li class="item-3"></li> 
<li class="item-4"></li> 
</ul>

6.E[attr]
attr:表示元素属性。例:
a[title]

1
<a href="" title=""></a>

td[colspan=2]

1
<td colspan="2"></td>

7.E|filter
E|e
|e输出转义字符
div#wrap>div.content>p|e

1
2
3
4
5
&lt;div id="wrap"&gt; 
&lt;div class="content"&gt; 
&lt;p&gt;&lt;/p&gt; 
&lt;/div&gt; 
&lt;/div&gt;

, , , , ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注