ZenCoding[Emmet]語法簡介【轉】

快速指南

下面是一些經常使用的Zen Coding功能,目前VS2013的Web Essentials插件已經支持。html

  • '#' 建立一個id特性
  • '.' 建立一個類特性
  • '[]' 建立一個自定義特性
  • '>' 建立一個子元素
  • '+' 建立一個兄弟元素
  • '^' 提高元素層次
  • '*' 至關於乘號,會建立n次相同的東西。
  • '$' 代替一個自增的數字。
  • '$$' 用於有填充位的數字,好比00,01。
  • '{}' 建立元素的文本。

能夠作些啥呢?看下面這個複雜的例子:
div#olDiv>ol>li.item*6>span{ZenCoding$$}.red
按下Tab鍵後,它會生成下面的代碼:spa

<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]會生成下面的代碼:code

<div title=""></div>

也能夠建立多個特性並給特性賦值:
input[placeholder="請輸入姓名" type="text"]會生成下面的代碼:orm

<input type="text" value="" placeholder="請輸入姓名" />

子元素:>

先要建立一個元素,而後才能建立它的子元素。
好比,form#loginForm.login>input[type="text"]會生成下面的代碼:xml

<form id="loginForm" class="login"> <input type="text" value="" /> </form>

兄弟元素:+

使用Zen Coding能夠很輕鬆地建立兄弟元素。
footer>div>a+input能夠生成下面的代碼:htm

<footer> <div> <a href=""></a> <input type="" value="" /> </div> </footer> 

提高元素層次:^

>符號會下降元素的層次,然而^符號的做用相反,它是用來提高元素的層次的,並且還能夠提高多個級別。好比,1^能夠提高一個級別,4^能夠提高4個級別。該功能不經常使用。get

footer>div>a+input^^p,p標籤要在input級別的基礎上提高2個層次,這樣p標籤就和最外層的footer標籤處於同一級別,因此,生成的代碼以下:input

<footer> <div> <a href=""></a> <input type="" value="" /> </div> </footer> <p></p> 

乘積:*

建立n個一樣的元素。
ul>li*6會生成下面的代碼:string

<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>
相關文章
相關標籤/搜索