下面是一些常用的Zen Coding功能，目前VS2013的Web Essentials插件已经支持。
可以做些啥呢？看下面这个复杂的例子：div#olDiv>ol>li.item*6>span{ZenCoding$$}.red
按下Tab键后，它会生成下面的代码：
<div id="olDiv">
<ol>
<li class="item">
<span class="red">ZenCoding01</span>
</li>
<li class="item">
<span class="red">ZenCoding02</span>
</li>
<li class="item">
<span class="red">ZenCoding03</span>
</li>
<li class="item">
<span class="red">ZenCoding04</span>
</li>
<li class="item">
<span class="red">ZenCoding05</span>
</li>
<li class="item">
<span class="red">ZenCoding06</span>
</li>
</ol>
</div>
使用CSS样式语法可以创建一个元素，并给它赋予id或class特性。div#container.layout会生成下面的代码：
<div id="container" class="layout"></div>可以使用中括号[]创建任何特性。div[title]会生成下面的代码：
也可以创建多个特性并给特性赋值：input[placeholder="请输入姓名" type="text"]会生成下面的代码：
<input type="text" value="" placeholder="请输入姓名" />先要创建一个元素，然后才能创建它的子元素。
比如，form#loginForm.login>input[type="text"]会生成下面的代码：
<form id="loginForm" class="login">
<input type="text" value="" />
</form>使用Zen Coding可以很轻松地创建兄弟元素。footer>div>a+input可以生成下面的代码：
<footer>
<div>
<a href=""></a>
<input type="" value="" />
</div>
</footer>
>符号会降低元素的层次，然而^符号的作用相反，它是用来提升元素的层次的，而且还可以提升多个级别。比如，1^可以提升一个级别，4^可以提升4个级别。该功能不常用。
如footer>div>a+input^^p，p标签要在input级别的基础上提升2个层次，这样p标签就和最外层的footer标签处于同一级别，所以，生成的代码如下：
<footer>
<div>
<a href=""></a>
<input type="" value="" />
</div>
</footer>
<p></p>
创建n个同样的元素。
如ul>li*6会生成下面的代码：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
当使用乘积*创建n个同样的元素时，可以使用$给它们添加一个自增的数字。注意：使用多个$操作符（如$$）会创建使用多个0填充的数字。
如ul>li#id$$$*4会生成下面的代码：
<ul>
<li id="id001"></li>
<li id="id002"></li>
<li id="id003"></li>
<li id="id004"></li>
</ul>
要给元素输入文本时，可以使用{}符号。
如ul>li*10>span{Windows $}会生成以下代码：
<ul>
<li>
<span>Windows 1</span>
</li>
<li>
<span>Windows 2</span>
</li>
<li>
<span>Windows 3</span>
</li>
<li>
<span>Windows 4</span>
</li>
<li>
<span>Windows 5</span>
</li>
<li>
<span>Windows 6</span>
</li>
<li>
<span>Windows 7</span>
</li>
<li>
<span>Windows 8</span>
</li>
<li>
<span>Windows 9</span>
</li>
<li>
<span>Windows 10</span>
</li>
</ul>
联合多个功能可以更快地编写一些相当酷的HTML，甚至可以为模板创建一些Knockout.js的绑定，然后只需要改变属性名就行了。
例如section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]会生成下面的代码：
<section data-bind="foreach:customers">
<div>
<input type="text" value="" data-bind="text:01" /></div>
<div>
<input type="text" value="" data-bind="text:02" /></div>
<div>
<input type="text" value="" data-bind="text:03" /></div>
<div>
<input type="text" value="" data-bind="text:04" /></div>
</section>
组合是Zen Coding中强大的功能，它可以创建复杂的表达式。
例如 div>(header>div)+section>(ul>li*2>a)+footer>(div>span)可以生成下面的代码：
<div>
<header>
<div></div>
</header>
<section>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<footer>
<div>
<span></span>
</div>
</footer>
</section>
</div>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。