複製鏈接
請複製以下鏈接發送給好友
https://baike.baidu.hk/item/Zen Coding/10219092
複製
複製成功

Zen Coding

鎖定
使用仿CSS選擇器的語法來快速開發HTML和CSS ——由Sergey Chikuyonok開發。
Zen Coding由兩個核心組件組成：一個縮寫擴展器(縮寫為像CSS一樣的選擇器)和上下文無關的HTML標籤對匹配器。
中文名
Zen Coding
方    式
使用仿CSS選擇器的語法
功    能
快速開發HTML和CSS
特    點
兩個核心組件組成

目錄

  1. 1 展開縮寫
  2. 2 縮寫包裹
  3. 3 編輯器
  4. 4 編寫實例

Zen Coding展開縮寫

展開縮寫功能將類似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選擇器。
元素類型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 將光標放在空屬性的引號中間以及開始和關閉標籤的中間。

Zen Coding縮寫包裹

這真的是一個很酷的特性，它將縮寫和標籤對匹配器的功能合併到一起了。你有多少才發現你需要添加一個包裹元素以修正一個瀏覽器bug？或者你需要添加一個裝飾，比如一個背景圖片或者邊框到一個塊級內容？你必須寫開始標籤，臨時打斷你的代碼，找到相關的點然後關閉標籤。這就是“使用縮寫包裹”能幫助你的地方。
該功能相當簡單：它要求你輸入縮寫，然後執行適當的“展開縮寫”行動並將你期望的文本放到你縮寫的最後一個元素裏面。如果你沒有選擇任何文本，它就會啓動標籤對匹配器並使用結果。它同樣能搞清楚你的光標的位置：標籤的內容裏面或者是開始和關閉標籤中間。依賴於它的位置，它會包裹標籤的內容或標籤本身。
縮寫包裹為包裹個別行引入了一個特定的縮寫句法。簡單跳轉到倍增操作符後面的數字，比如：
ul#nav>li*>a
當Zen Coding 發現一個使用未定義的倍增數的時候，它會將它作為一個重複元素：你的章節中有多少行，它就會輸出多少次，並將每行的內容放到重複元素的最後一個子元素裏面。

Zen Coding編輯器

Zen Coding並不依賴某個特定的編輯器。它是一個只處理文本的出色的組件：它獲取文本、做一些處理並放回新的文本(或索引，用於標籤匹配)。Zen Coding由JavaScript和Python編寫，所以它實際上可以運行於任何平台。在Windows，你可以運行JavaScript版本，而Mac和Linux 分支可以使用Python版。
如果讓你的編輯器支持Zen Coding，你需要寫一個特定的可以在你的編輯器和Zen Coding之間轉換數據的插件。問題是一個編輯器可能不會完整的支持Zen Coding因為它本身的插件系統。比如，TextMate通過使用腳本輸出替換當前行很容的就支持了“展開縮寫”功能，但是它不能處理標籤對匹配因為沒有標準的方法請求TextMate來選擇內容。

Zen Coding編寫實例

CSS縮寫形式：
div#page>div.logo+ul#navigation>li*5>a
應用於網頁HTML的樣式：
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=" "></a></li>
<li><a href=" "></a></li>
<li><a href=" "></a></li>
<li><a href=" "></a></li>
<li><a href=" "></a></li>
</ul>
</div>
Zen Coding 已經更名為 Emmet。 [1]  更名之後，據説 Emmet 開始團隊模式，增加CSS3和HTML5許多新特性。項目地址從 code.google 移 github. [2] 
參考資料