让ZenCoding提升编码速度_html/css_WEB-ITnose

日前写了一篇关于VS神级插件Web Essentials的系列博客，其中在HTML&CSS操作技巧一节简单提到了ZenCoding，今天来详细说一下这个东西。

摘要

Zen Coding是一种使用CSS样式选择器语法更快速地编写HTML的方式。如果你使用的是VS，那么你可以安装了VS的插件Web Essentials之后，就可以使用Zen Coding编码方式了，关于Web Essentials的下载，请转到这里。如果你是用的其他编辑器，请到这里下载安装（需要FanQiang）。Zen Coding是2009年提出来的，已经更新了多次，正在变成更加有效地编写无聊的HTML受人欢迎的方式。

快速指南

下面是一些常用的Zen Coding功能，目前VS2013的Web Essentials插件已经支持。

'#' 创建一个id特性

'.' 创建一个类特性

'[]' 创建一个自定义特性

'>' 创建一个子元素

'+' 创建一个兄弟元素

'^' 提升元素层次

'*' 相当于乘号，会创建n次相同的东西。

'$' 代替一个自增的数字。

'$$' 用于有填充位的数字，比如00，01。

'{}' 创建元素的文本。

可以做些啥呢？看下面这个复杂的例子：
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>

ID和Class特性：#和.

使用CSS样式语法可以创建一个元素，并给它赋予id或class特性。
div#container.layout会生成下面的代码：

<div id="container" class="layout"></div>

自定义特性：[]

可以使用中括号[]创建任何特性。
div[title]会生成下面的代码：

<div title=""></div>

也可以创建多个特性并给特性赋值：
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>

乘积：*

创建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>

补充

如果你还想了解更多的快捷语法，请下载这个表单文件（需要FanQiang）。