Emmet（前身是zen coding）介紹和使用

Zen coding - 一種快速編寫HTML/CSS代碼的方法。它使用仿CSS選擇器的語法來快速開發HTML和CSS - 由Sergey Chikuyonok開發。

如今它更名爲了Emmet，而且搭建了一個新的網站：docs.emmet.io。

和通常的編輯器中使用的「代碼片斷」概念不太同樣，Emmet使用動態的語法來生成代碼，這意味着你不須要本身去編輯並建立固定的代碼片斷。 大大的提升了代碼編寫效果，這一點似的Zen coding很是的流行。

例如，輸入以下內容：

ul#nav>li.item$*4>a{Item $} 

Emmet會幫助你生成以下的代碼片斷：

<ul id="nav">
    	<li class="item1"><a href="">Item 1</a></li>
    	<li class="item2"><a href="">Item 2</a></li>
    	<li class="item3"><a href="">Item 3</a></li>
    	<li class="item4"><a href="">Item 4</a></li>
</ul>

一篇文章：
zen coding：一種快速編寫html/css代碼的方法

在本文中咱們將展現一種新的使用仿CSS選擇器的語法來快速開發HTML和CSS的方法。它由Sergey Chikuyonok開發。

你在寫HTML代碼(包括全部標籤、屬性、引用、大括號等)上花費多少時間？若是你的編輯器有代碼提示功能，你編寫的時候就會容易些，但即使如此你仍是要手動敲入不少代碼。

 

在JavaScript方面，當咱們想要在一個頁面上獲取某個特定的元素時，咱們就會遇到一樣的問題，咱們必須寫不少代碼，這就變得難於維護和重用。JavaScript框架應運而生，它們同時引入了CSS選擇器引擎。如今，你可使用簡單的CSS表達式來獲取DOM元素，這至關酷。

可是，若是你不只僅能夠用CSS的選擇器佈局和定位元素，還能生成代碼會怎麼樣？好比，若是你這樣寫：

div#content>h1+p

…而後就能夠看到這樣的輸出：

<div id="content"> <h1></h1> <p></p> </div>

有些迷惑吧？今天，我將向你介紹Zen Coding，一組用於快速HTML和CSS編碼的工具。最初由Vadim Makeev在2009年4月提出(文章爲俄語)，由鄙人(也就是我)開發了數月並最終達到比較成熟的狀態。Zen Coding由兩個核心組件組成：一個縮寫擴展器(縮寫爲像CSS同樣的選擇器)和上下文無關的HTML標籤對匹配器。看一下這個演示視頻來看一下它們能爲你作些什麼。

展開縮寫

展開縮寫功能將相似CSS的選擇器轉換爲XHTML代碼。術語「縮寫」可能會有點兒難以理解。爲何不直接稱之爲「CSS選擇器」呢？嗯，首要緣由是語義化：「選擇器」意爲選擇一些東西，可是在這裏咱們事實上是生成 一些東西，是寫一個長代碼的較短的替代。其次，它只是使用真實的CSS選擇器語法的一個小的子集，並添加了一些新的操做符。

這裏是一個支持的屬性和操做符的列表：

• E
  元素名稱(div, p);
• E#id
  使用id的元素(div#content, p#intro, span#error);
• E.class
  使用類的元素(div.header, p.error.critial). 你也能夠聯合使用class和idID: div#content.column.width;
• E>N
  子代元素(div>p, div#footer>p>span);
• E+N
  兄弟元素(h1+p, div#header+div#content+div#footer);
• E*N
  元素倍增(ul#nav>li*5>a);
• E$*N
  條目編號 (ul#nav>li.item-$*5);

正如你能看到的，你已經知道如何使用Zen Coding了：只是些一個簡單的仿CSS選擇器(呃，「縮寫」抱歉)，就像這樣…

div#header>img.logo+ul#nav>li*4>a

…而後調用」展開縮寫」行爲。

這裏有兩個新增的操做符：元素倍增和條目編號。好比，若是你想生成5個<li>元素，你能夠簡單的寫位li*5。它也將一樣重寫所有子代元素。若是你想寫4個<li>元素，每一個裏面都有一個<a>標籤，你就能夠簡單的寫爲li*4>a，這樣會生成如下HTML代碼：

1 2 3 4

<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li>

最後一個——條目編號用於當你想用索引標記重複的元素的狀況。假設你想生成class爲item一、item2和item3的3個<div>元素。你能夠寫成這樣的縮寫，div.item$*3:

 

1 2 3

<div class="item1"></div> <div class="item2"></div> <div class="item3"></div>

只需在你想要索引出現的任何class或id屬性上添加一個美圓符號便可，並且想要多少均可以。那麼，這樣…

div#i$-test.class$$$*5

會被轉換成爲:

1 2 3 4 5

<div id="i1-test" class="class111"></div> <div id="i2-test" class="class222"></div> <div id="i3-test" class="class333"></div> <div id="i4-test" class="class444"></div> <div id="i5-test" class="class555"></div>

你會看到，當你寫a的縮寫的時候，輸出是<a href=」」></a>。或者，若是你寫img，輸出就是<img src=」」 alt=」」 />。

Zen Coding是如何知道何時應該爲生成的標籤添加默認的屬性或者跳過關閉標籤的？有一個專門的文件，名爲zen_settings.js描述了輸出元素。這是一個簡單的JSON文件，描述每種語言的縮寫(是的，你能夠爲不一樣的句法定義縮寫，好比HTML、XSL、CSS等)。通用的語言縮寫定義看起來就像這樣：

 

2 3 4 5 6 7

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->', ... },   'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />', ... } }

元素類型

Zen Coding有兩個主要的元素類型：「片斷(snippets)」 和 「縮寫(abbreviations)」。片斷就是隨意的代碼碎片，而縮寫是標籤訂義。經過片斷，你能夠寫出你想要的任何代碼，它也會照你寫的格式輸出；可是你必須手動的格式化它(使用\n 和\t實現換行和縮進) 並將${child}變量放到你想要輸出子元素的地方，就像這樣：cc:ie6>style。若是你不使用${child}變量，子元素將會輸出於代碼片斷的後面。

有了縮寫，您必須編寫標記定義，並且語法是很是重要的。一般，你必須寫一個簡單的帶有全部默認的屬性的標籤，好比: <a href=」」></a>。當Zen Coding被加載後，它會解析一個標籤訂義到一個描述該標籤的名字、屬性(包括它們的順序)以及該標籤是否爲空的特定的對象中。因此，若是你寫<img src=」」 alt=」」 />，你會告訴Zen Coding這個標籤必須是空的，而後「擴展縮寫」行爲就會在輸出以前爲它使用特定的規則。

對於片斷和縮寫，你能夠添加一個管道符號，它告訴Zen Coding當縮寫被展開的時候光標會被定位到哪裏。默認的，Zen Coding 將光標放在空屬性的引號中間以及開始和關閉標籤的中間。

例子

那麼，這裏解釋一下當你寫了一個縮寫並召喚「展開縮寫」行動時發生的事情。首先，它將一個完整的縮寫分開爲獨立的元素：這樣div>a 會被分紅div 和a 元素，固然也會維持他們的關係。而後，每一個元素，解析器先在代碼片斷內然後在縮寫中尋找定義。若是它找不到，將會使用元素的名字做爲新的標籤，併爲其添加縮寫中定義的id和class。好比，若是你寫mytag#example，解析器在片斷或縮寫中找不到mytag定義，它就會輸出<mytag id=」example」><mytag>。

咱們製做了不少默認的CSS和HTML縮寫和片斷。你會發現學習使用Zen Coding能夠增長你的生產力。

HTML 標籤對匹配器

對於HTML編碼者的另外一個很是常見的任務是尋找一個元素的標籤對。例如你想選擇整個<div id=」content」>標籤並將其移動到其它地方或者刪除它。或者有可能你在尋找一個關閉標籤並想知道它屬於那個開始標籤。

不幸的是，不少現代開發工具在該功能方面有所欠缺。那麼我就決定寫一個我本身的標籤對匹配器做爲Zen Coding的一部分。不過它依然在beta階段並尚存一些問題，但它能夠工做的很不錯並很快。不是瀏覽整個文檔(像一般的那種HTML標籤對匹配器的作法)，它從光標的當前位置開始尋找相關的標籤。這使得它很是快而且上下文無關：它甚至能夠用於這段JavaScript代碼片斷：

 

2 3 4 5 6 7

var table = '<table>'; for (var i = 0; i < 3; i++) { table += '<tr>'; for (var j = 0; j < 5; j++) { table += '<td>' + j + '</td>'; } table += '</tr>'; } table += '</table>';

使用縮寫包裹

這真的是一個很酷的特性，它將縮寫和標籤對匹配器的功能合併到一塊兒了。你有多少才發現你須要添加一個包裹元素以修正一個瀏覽器bug？或者你須要添加一個裝飾，好比一個背景圖片或者邊框到一個塊級內容？你必須寫開始標籤，臨時打斷你的代碼，找到相關的點而後關閉標籤。這就是「使用縮寫包裹」能幫助你的地方。

該功能至關簡單：它要求你輸入縮寫，而後執行適當的「展開縮寫」行動並將你指望的文本放到你縮寫的最後一個元素裏面。若是你沒有選擇任何文本，它就會啓動標籤對匹配器並使用結果。它一樣能搞清楚你的光標的位置：標籤的內容裏面或者是開始和關閉標籤中間。依賴於它的位置，它會包裹標籤的內容或標籤自己。

縮寫包裹爲包裹個別行引入了一個特定的縮寫句法。簡單跳轉到倍增操做符後面的數字，好比：ul#nav>li*>a。當Zen Coding 發現一個使用未定義的倍增數的時候，它會將它做爲一個重複元素：你的章節中有多少行，它就會輸出多少次，並將每行的內容放到重複元素的最後一個子元素裏面。

若是你在這段文本外面包裹這段縮寫div#header>ul#navigation>li.item$*>a>span：

1 2 3 4 5

About Us Products News Blog Contact Up

你將會獲得如下結果：

<div id="header"> <ul id="navigation"> <li class="item1"><a href=""><span>About Us</span></a></li> <li class="item2"><a href=""><span>Products</span></a></li> <li class="item3"><a href=""><span>News</span></a></li> <li class="item4"><a href=""><span>Blog</span></a></li> <li class="item5"><a href=""><span>Contact Up</span></a></li> </ul> </div>

你能夠看到，Zen Coding是一個強大的文本處理工具。

快捷鍵

• Ctrl+,
  展開縮寫
• Ctrl+M
  匹配對
• Ctrl+H
  使用縮寫包括
• Shift+Ctrl+M
  合併行
• Ctrl+Shift+?
  上一個編輯點
• Ctrl+Shift+?
  下一個編輯點
• Ctrl+Shift+?
  定位匹配對

這些快捷鍵是能夠自定義的。

上面參考：http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html

 用法：

zen-coding經常使用縮寫

html:4t (HTML 4.01 Transitional) 
html:4s (HTML 4.01) 
html:xt (XHTML 1.0) 
html:xs (XHTML 1.0 Strict) 
html:xxs (XHTML 1.1) 
html:5 (HTML5) 
 
meta:utf, meta:compat 
style, link:css, link:print, link:favicon, link:rss, 
script, script:src 
 
div, p, a, ul, ol, input:t, input:r 
 
ol+, dl+, table+, tr+, select+, map+, optg+ 
 
cc:ie6, cc:ie, cc:noie

input:t     (input:text也能夠，同理input:radio也能夠。寫不寫完整均可以。

input:t
<input type="text" name="" id=""/>
input:r
<input type="radio" name="" id=""/>

input:c
<input type="checkbox" name="" id=""/>

input:b
<input type="button" value=""/>

input:h
<input name="" type="hidden"/>

如要顯示一個id和多個class屬性時，能夠這樣寫

ul#nav.one.two

1	< ul  id = "nav"  class = "one two" ></ ul >

E+ (+號表示會生成默認的子元素)

table+

1 2 3 4 5

< table > < tr > < td ></ td > </ tr > </ table >

ul+

1 2 3

< ul > < li ></ li > </ ul >

dl+

1 2 3 4

< dl > < dt ></ dt > < dd ></ dd > </ dl >

 

 

E[attr]

 

attr:表示元素屬性。例:

 

a[title]

 

1	< a href = ""  title = "" > < / a >

 

td[colspan=2]

 

1	< td  colspan = "2" ></ td >

 

 

8.( )控制嵌套分組關係

div#header>(h1.logo>a)+ul.nav>li.item*5>a

1 2 3 4 5 6 7 8 9 10

< div  id = "header" > < h1  class = "logo" >< a  href = "" ></ a ></ h1 > /*h1和ul是兄弟關係*/ < ul  class = "nav" > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > </ ul > </ div >

div#header>h1.logo>a+ul.nav>li.item*5>a

1 2 3 4 5 6 7 8 9 10 11 12

< div  id = "header" > < h1  class = "logo" > /*h1和ul是父子關係*/ < a  href = "" ></ a > < ul  class = "nav" > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > < li  class = "item" >< a  href = "" ></ a ></ li > </ ul > </ h1 > </ div >

以上兩種寫法獲得的結構是不同的。 請你們注意觀察。

將如下代碼用zen-coding寫出來。

   <div id="page">
        <div id="header">
            <ul id="nav">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        <div id="page">
            <h1><span></span></h1>

            <p></p>

            <p></p>
        </div>
        <div id="footer"></div>
    </div>

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

能夠看到，要合理利用（）將一個大的元素包好。

 

http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html