一、展开缩写，可以利用于html和css，就是利用css的选择符来生成相应的代码，如果了解css很容易明白。下面是一些shi'l
1.1 E 元素名称(p, p);
1
<p></p>
2
<p></p>
1.2 E#id 使用id的元素(p#content, p#intro, span#error);
1
<p id="content"></p>
2
<p id="intro"></p>
3
<span id="error"></span>
1.3 E.class 使用类的元素(p.header, p.error.critial). 你也可以联合使用class和id，如 p#content.column.width;
1
<p class="header"></p>
2
<p class="error critia"></p>
3
<p id="content" class="column widt"></p>
1.4 E>N 子代元素(p>p, p#footer>p>span);
1
<p>
2
<p></p>
3
</p>
4
<p id="footer">
5
<p><span></span></p>
6
</p>
1.5 E+N 兄弟元素(h1+p, p#header+p#content+p#footer);
1
<p></p>
2
<p id="header"></p>
3
<p id="content"></p>
4
<p id="footer"></p>
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展开缩写可参见这里： https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
关于css的缩写可参见： https://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
附加一些示例:
缩写：html:5>p#page>p#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
<p id="page">
09
<p 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
</p>
17
</p>
18
</body>
19
</html>
2.过滤器( Filters )
主要作用是改变原来的输出，具体看示例：
缩写：p#content>p.title
1
<p id="content">
2
<p class="title"></p>
3
</p>
如果上面的缩写加上|e，如： p#content>p.title|e ,扩展结果如下：（把对xml来说不安全的字符转义成实体字符）
1
<p id="content">
2
<p class="title"></p>
3
</p>
如果改成这样： p#content>p.title|e|e ,结果如下：（这次把把双引号和转义了。）
1
&lt;p id="content"&gt;
2
&lt;p class="title"&gt;&lt;/p&gt;
3
&lt;/p&gt;
