ZenCoding[Emmet]語法簡介【轉】

快速指南

下面是一些经常使用的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> <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>