打字快沒什麼，但能用最少的文字就幫忙吐出完整所需的所有文字，就比較神奇。
什麼是 zen coding？
簡單來說就是可以很快把HTML標籤語言寫得更快。
看個最簡單的視屏：

視屏中只是單單的一行：

div.box.beige5>div.top+h2.cloud.font_vogue+div.content>ul.navbodyLi>li>h3.bodyName+a[title].b
odyLink+address+p

然後按指定的熱鍵就可畫出這樣完整的HTML碼。

<div class="box beige5">
        <div class="top"></div>
        <h2 class="cloud font_vogue"></h2>
  <div class="content">
    <ul class="navbodyLi">
      <li>
        <h3 class="bodyName"></h3>
        <a href="" class="bodyLink" title=""></a>
        <address></address>
        <p></p>
      </li>
    </ul>
  </div>
</div>

如果這樣看還是沒什麼感覺的話，

#menu>ul.list>li.item*5[href=#]<hr+h2{上頭有列表}{/code]
這樣就會畫出這樣完整的HTML碼：
[code]<div id="menu">
  <ul class="list">
    <li href="#" class="item"></li>
    <li href="#" class="item"></li>
    <li href="#" class="item"></li>
    <li href="#" class="item"></li>
    <li href="#" class="item"></li>
  </ul>
  <hr />
  <h2>上頭有列表</h2>
</div>

最初是在一些程式的教學視屏看到，
是用Mac環境下的Textmate下這樣子快寫HTML；
非常地驚艷，後來才知道這叫做zen coding。
目前zen coding(ZC)的版本是0.7，需要看一下該版本比之前的版本新增了哪些的語法，
如果在一些編輯器裡，所支援的不是那麼新版本的插件，一些新語法就未能順利運作。
像網路上有個線上的編輯器 http://secretgeek.net/zen/coding.htm
就不支援 0.7 版裡的新語法。

例如以下是0.7版才有的：直接用 "#", "."來指定是id或class可忽略不寫div。可用{}來加入文字。詳細看管網說明。

簡單地來說，
ZC是利用類似CSS選擇器的方式或語法，
來擴展延伸成完整的HTML碼。
目前有許多編輯器會有 ZC 的插件，
依照ZC官網所列的編輯器及其連結下載安裝，
就可試試 ZC 的神奇功能。

基本的語法
語法部分掌握幾個簡單組合方式，
就可快速上手。
乘號可產生重覆標籤

li*3
<li></li>
<li></li>
<li></li>

用 > + < 的連結符號，調整標籤所在的階層：

div>h1.title+h2.sub<hr
<div>
  <h1 class="title"></h1>
  <h2 class="sub"></h2>
</div>
<hr />

用 $ 符號可產生有序號的class或id

select>option#item-$*3
<select name="">
  <option id="item-1" value=""></option>
  <option id="item-2" value=""></option>
  <option id="item-3" value=""></option>
</select>

用屬性語法來處理href,src,alt,title等標籤屬性

img[src=fish.jpg][alt="a fish"]
<img src="fish.jpg" alt=""a fish"" />

快速就把網頁主要元素畫出

html:5


  
    <meta charset="UTF-8" />
    <title></title>
  

主要的HTML元件選擇器的語法可參考：
https://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
而詳細的zen coding的語法及相關的縮寫或快速參考手冊，
下載這份cheat sheet就可充分使用zen coding：
http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf
下一篇再詳述實作部份。

系列文章列表