Zen Coding学习记录（未完待续）

一、展开缩写，可以利用于html和css，就是利用css的选择符来生成相应的代码，如果了解css很容易明白。下面是一些shi'l

1.1 E 元素名称(div, p);

1
<div></div>
2
<p></p>
1.2 E#id 使用id的元素(div#content, p#intro, span#error);

1
<div id="content"></div>
2
<p id="intro"></p>
3
<span id="error"></span>
1.3 E.class 使用类的元素(div.header, p.error.critial). 你也可以联合使用class和id，如 div#content.column.width;

1
<div class="header"></div>
2
<p class="error critia"></p>
3
<div id="content" class="column widt"></div>
1.4 E>N 子代元素(div>p, div#footer>p>span);

1
<div>
2
<p></p>
3
</div>
4
<div id="footer">
5
<p><span></span></p>
6
</div>
1.5 E+N 兄弟元素(h1+p, div#header+div#content+div#footer);

1
<p></p>
2
<div id="header"></div>
3
<div id="content"></div>
4
<div id="footer"></div>
1.6 E*N 元素倍增(ul#nav>li*5>a);

1
<ul id="nav">
2
    <li><a href=""></a></li>
3
    <li><a href=""></a></li>
4
    <li><a href=""></a></li>
5
    <li><a href=""></a></li>
6
    <li><a href=""></a></li>
7
</ul>
1.7 E$*N 条目编号 (ul#nav>li.item-$*5);

1
<ul id="nav">
2
    <li class="item-1"></li>
3
    <li class="item-2"></li>
4
    <li class="item-3"></li>
5
    <li class="item-4"></li>
6
    <li class="item-5"></li>
7
</ul>
关于html展开缩写可参见这里： http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
关于css的缩写可参见： http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
附加一些示例:
缩写：html:5>div#page>div#header>ul.navigation>li*4>a （可以生成一个完整的html页）
01
<!DOCTYPE HTML>
02
<html lang="en-US">
03
<head>
04
    <meta charset="UTF-8">
05
    <title></title>
06
</head>
07
<body>
08
    <div id="page">
09
        <div id="header">
10
            <ul class="navigation">
11
                <li><a href=""></a></li>
12
                <li><a href=""></a></li>
13
                <li><a href=""></a></li>
14
                <li><a href=""></a></li>
15
            </ul>
16
        </div>
17
    </div>
18
</body>
19
</html>
2.过滤器( Filters )
主要作用是改变原来的输出，具体看示例：
缩写：div#content>p.title
1
<div id="content">
2
    <p class="title"></p>
3
</div>
如果上面的缩写加上|e，如： div#content>p.title|e ,扩展结果如下：（把对xml来说不安全的字符转义成实体字符）
1
<div id="content">
2
   <p class="title"></p>
3
</div>
如果改成这样： div#content>p.title|e|e ,结果如下：（这次把把双引号和转义了。）
1
<div id="content">
2
   <p class="title"></p>
3
</div>

作者：杨军军

补充：web前端 , HTML/CSS  ,