zen-Coding的使用

二、zen-Coding的使用

zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。打开Notepad++编辑器，输入以下代码：

div#name

然后接着按一下快捷键ctrl+E，就会自动生成如下的HTML代码：

< div id = "name" ></ div >

接下来看一个更高效的例子

div#header>div#logo+ul.nav>li.item-$*5>a

按ctrl+E生成如下代码

< div id = "header" >
    < div id = "logo" ></ div >
    < ul class = "nav" >
        < li class = "item-1" >< a href = "" ></ a ></ li >
        < li class = "item-2" >< a href = "" ></ a ></ li >
        < li class = "item-3" >< a href = "" ></ a ></ li >
        < li class = "item-4" >< a href = "" ></ a ></ li >
        < li class = "item-5" >< a href = "" ></ a ></ li >
    </ ul >
</ div >

Zend Coding语法

1.E | E#name | E.name

这里E表示元素，如p,div等。#name和.name分别表示ID和class属性。例：

div

< div ></ div >

div#main

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

ul.item

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

如要显示一个id和多个class属性时，可以这样写

ul#nav.one.two

< ul id = "nav" class = "one two" ></ ul >

2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name

>表示父级嵌套子级。例：

div>span

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

div#nav>ul.main

< 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

< p ></ p >
< p ></ p >

div#header+div#content+div#footer

< div id = "header" ></ div >
< div id = "content" ></ div >
< div id = "footer" ></ div >

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

table+

< table >
    < tr >
        < td ></ td >
    </ tr >
</ table >

ul+

< ul >
    < li ></ li >
</ ul >

dl+

< dl >
    < dt ></ dt >
    < dd ></ dd >
</ dl >

4.E*N

N:表示某个元素需要重复的次数。例：

p*3

< p ></ p >
< p ></ p >
< p ></ p >

ul#nav>li.item*4

< 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

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

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

td[colspan=2]

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

7.E|filter

E|e

|e输出转义字符

div#wrap>div.content>p|e

<div id="wrap">
    <div class="content">
        <p></p>
    </div>
</div>

 8.( )控制嵌套分组关系

div#header>(h1.logo>a)+ul.nav>li.item*5>a  

< div id = "header" >
    < h1 class = "logo" >< a href = "" ></ a ></ h1 > /*h1和ul是兄弟关系*/
    < ul class = "nav" >
        < li class = "item" >< a href = "" ></ a ></ li >
        < li class = "item" >< a href = "" ></ a ></ li >
        < li class = "item" >< a href = "" ></ a ></ li >
        < li class = "item" >< a href = "" ></ a ></ li >
        < li class = "item" >< a href = "" ></ a ></ li >
    </ ul >
</ div >

div#header>h1.logo>a+ul.nav>li.item*5>a

< div id = "header" >
    < h1 class = "logo" >      /*h1和ul是父子关系*/
        < a href = "" ></ a >
        < ul class = "nav" >
            < li class = "item" >< a href = "" ></ a ></ li >
            < li class = "item" >< a href = "" ></ a ></ li >
            < li class = "item" >< a href = "" ></ a ></ li >
            < li class = "item" >< a href = "" ></ a ></ li >
            < li class = "item" >< a href = "" ></ a ></ li >
        </ ul >
    </ h1 >
</ div >

以上两种写法得到的结构是不一样的。 请大家注意观察。

练习：将以下代码用zen-coding写出来。

< div id = "page" >
    < div id = "header" >
        < ul id = "nav" >
            < li >< a href = "" ></ a ></ li >
            < li >< a href = "" ></ a ></ li >
            < li >< a href = "" ></ a ></ li >
            < li >< a href = "" ></ a ></ li >
        </ ul >
    </ div >
    < div id = "page" >
        < h1 >< span ></ span ></ h1 >
        < p ></ p >
        < p ></ p >
    </ div >
    < div id = "footer" ></ div >
</ div >