1、前言
剛看完球，遼足0-0平北京國安，穩穩妥妥各拿1分，皆大歡喜。恆大4-0狂勝長春亞泰。期待恆大51主場之戰，死磕全北現代。最近兩天一直在研究BootStrap這個東東，做了幾個例子，感覺挺好的，五嶽之巔也向大家推薦。
但是心頭上最激動的除了足球就是Zencoding，於是本文欲罷不能，終於產出。
2、簡介
我不是一個愛賣弄關子的人，喜歡直奔主題。所以先介紹What is the Zencoding？一個俄國小夥子Sergey Chikuyonok，主導編寫了Zencoding項目，主要是仿CSS選擇器語法來快速碼HTML代碼。能有多快？馬上告訴你。
想快速知道它的作用麼，來吧，給你一個大開眼界的機會。
首先看看這個zencoding代碼：
點擊(此處)摺疊或打開
- html>head>(title+style+script[src=abc$.js]*3)+body>((.content>.nav>ul>li*5>a>span)+(.sidebar>.top+.middle+.bottom)+.main>.acticle*3>h1{文章標題$}+p)+.footer{版權信息}
沒錯，你沒看錯，那麼多的一大篇html代碼就是由以上這句話產生的。
好奇了吧，想學了吧。看下文吧。
3、環境配置
在上一篇博客《超級牛B編碼王（一）：Sublime2之WIN7下安裝Zencoding》中詳細介紹了Sublime2下Zencoding的安裝，當然Zencoding就是一個插件，也有其他比如Notepad、DW等編輯器的版本，大家到“http://zencoding.org/”這裏就能全部網羅。關於環境搭建，不多說，第一篇寫的很詳細了。
4、注意事項
ZC項目更新速度較快，大家現在能在百度裏搜到的教程，都不太全，未能完全展示Zencoding之力。所以本文將較爲完備地由淺入深講解它。但隨着時間的流逝，半年或一年後，本文也將因項目發展而變得不全，不過基本要點是沒有變的。
5、QuickStart
(1)如下圖所示，到github裏搜索zencoding。
爲什麼要這麼做，看了搜索結果你就知道了：
搜索結果告訴我們，zencoding有多種語言擴展和IDE擴展，所以不僅能寫HTML和CSS也能寫Ruby和PHP等，具體內容請詳見圖片上的“more >>”。
(2)在上圖中點擊第一項“sergeche/zen-coding”進入項目頁。然後向下翻啊翻，可以看到如下一個小節，就是使用說明：
Current features of abbreviation engine:
A.ID and CLASS attributes: div#page.section.main.
B.Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].
C.Element multiplication: li*5 will output
tag five times.
D.Item numbering with $ character: li.item$*3 will output
tag three times, replacing $ character with item number.
E.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001
F.Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You
can literally write a full document markup with just a single line.
G.Filters support
H.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.
爲了容易分辨，我加了隔行變色。
————————————————————————————————————
*** 不要着急，現在就開始詳細講解了 ***
————————————————————————————————————
(3)“#”表id，“.”表類，“+”表並列
使用sublime建立一個foo.html保存到桌面，然後Win7下快捷鍵Ctrl+Alt+Enter調出zencoding的心印(koan)，koan一詞源於佛語，等你學完全文才能明白它的含義。
寫入如下代碼，就可以產生一組HTML結構，看圖吧:
寫完Enter Koan後面的代碼後，上面就出現了HTML結構。這個例子可以看出一般的zencoding格式是“HTML標籤#xxx”或者“HTML標籤.yyy”，而#xxx表示id爲xxx，.yyy說明class爲yyy。最後“+”表示標籤的並列。
小練習1：
請大家完成以下HTML的zencoding代碼，時間要求30秒以內：
點擊(此處)摺疊或打開
-
<div id="header"></div>
-
<div class="content"></div>
-
<div class="sidebar"></div>
- <div id="footer"></div>
小練習2：
請大家完成以下HTML的zencoding代碼，時間要求35秒以內：
點擊(此處)摺疊或打開
-
<div id="header"></div>
-
<div id="content" class="aticle
posts"></div>
-
<div id="sidebar" class="ad"></div>
- <div id="footer"></div>
做不完本練習，更不能往下學，因爲你根本就沒明白怎樣用一行zencoding寫出來。
如果你5分鐘後還是做不出來，教程最後一部分有練習題答案，悲催的您去看看吧。後續內容你會更不適應。但那些一下子能明白過來的人或是直接做對的同志，嗯，悟性很好，趁熱打鐵，再接再厲！
(4)“>”指子內容
很容易理解，比如寫下“div>p>span>a”這個Koan，那麼就有這個HTML結構：
點擊(此處)摺疊或打開
-
<div>
-
<p><span><a href=""></a></span></p>
- </div>
小練習3：
按照HTML代碼，回推Koan。
點擊(此處)摺疊或打開
-
<html>
-
<head></head>
-
<body>
-
<div class="header"></div>
-
<div class="content"></div>
-
<div class="footer"></div>
-
</body>
- </html>
小練習4：
剛纔練習3做的很爽吧，在這裏又給你放了一個練習，試試手氣吧。Try it hard!
點擊(此處)摺疊或打開
-
<html>
-
<head>
-
<title></title>
-
<style type="text/css"></style>
-
<script type="text/javascript"></script>
-
</head>
-
<body>
-
<div class="content">
-
<div class="nav"></div>
-
<div class="sidebar"></div>
-
<div class="main"></div>
-
</div>
-
<div class="footer"></div>
-
</body>
- </html>
沒錯，也是一句Koan就OK的事！
如果你錯了，恭喜你，你爲下一步打下了重要的基礎。你做對了，不是蒙的就是蒙的。
(5)“()”指同級範圍
理論敘述是枯燥的，看例子是愉快的。剛纔的小練習4，答案是
html>(head>title+style+script)+body>+(div.content>div.nav+div.sidebar+div.main)+div.footer
呵呵，對照HTML代碼，你自己該想明白“()”是幹什麼的了吧。這也就是沒有()的情況下head中的style會出現在別處。
這節沒有練習，和大家玩了一個朝三暮四。
(6)“[]”表屬性
如何完成<h1 title="something"></h1>的屬性寫法呢，就是用“[]”，即如下Koan：h1[title=someting]。
好了又到了練習時間。
小練習5：
按照HTML代碼，回推Koan。
點擊(此處)摺疊或打開
-
<div id="content">
-
<div class="aticle">
-
<h1 class="ok" title="papername" sytle="color:#000;"></h1>
-
<h3 title="subname" sytle="color:#fff;" class="no"></h3>
-
<p class="words"></p>
-
</div>
- </div>
(6)#和.的簡寫
Koan中：div.ok等同於.ok，div#no等同於#no，所以直接寫.或#時，默認爲Div標籤是也。
小練習6：
用簡寫法改寫練習5。
(7)“*”表標籤克隆
如果在Koan中寫入一下內容：ul>li*5，就會產生以下HTML結構：
那麼，如果每個li元素中還存在<a>與<span>呢，沒事照下圖辦：
OK，想必大家想明白了*號的用法，繼續練習。
小練習7：
按照HTML代碼，回推Koan。
點擊(此處)摺疊或打開
-
<div class="header">
-
<ul class="nav">
-
<li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
-
<li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
-
<li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
-
<li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
-
<li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
-
<li><a href="" sytle="block"><span>五嶽之巔</span></a></li>
-
</ul>
- </div>
沒錯，什麼都做出來了，就是裏面的“五嶽之巔”弄不出來吧，這是我給你下的套，爲下一節埋一個伏筆。其實我這人挺好的，總這麼折騰還不是想讓大家自己發現問題，自己開始思考嘛。
(8)“{}”表標籤內容
你在Koan中寫：div>span>h1{這是標題}，自己看看會出現什麼吧。
此節無練習，只因太簡單。
(9)“$”表連續數
其實好理解，不說廢話，看圖吧：
所以不論在屬性如li.li-$或是id或是{}中的內容，$就代表從1開始的序列，就和Excel表一格寫一個1，下拉改格拖出2,3,4,5,6的意思一樣。
手癢癢了吧，該練個習了。
小練習8：
按照HTML代碼，回推Koan。難度只在“01、02...”的表示上。
點擊(此處)摺疊或打開
-
<table>
-
<thead>
-
<td class="col1"></td>
-
<td class="col2"></td>
-
<td class="col3"></td>
-
<td class="col4"></td>
-
</thead>
-
<tbody>
-
<tr class="row01">
-
<td class="col1"></td>
-
<td class="col2"></td>
-
<td class="col3"></td>
-
<td class="col4"></td>
-
</tr>
-
<tr class="row02">
-
<td class="col1"></td>
-
<td class="col2"></td>
-
<td class="col3"></td>
-
<td class="col4"></td>
-
</tr>
-
<tr class="row03">
-
<td class="col1"></td>
-
<td class="col2"></td>
-
<td class="col3"></td>
-
<td class="col4"></td>
-
</tr>
-
</tbody>
-
<tfoot>
-
<td></td>
-
<td></td>
-
<td></td>
-
<td></td>
-
</tfoot>
- </table>
好了，至此，講完了Zencoding的主要而且最常用的內容。時間剛好到凌晨12點整，這篇BLOG花費了我近3個小時的時間。呵呵，不容易啊。
最後一個綜合性的練習，做一下吧，請大家一句Koan搞定它，千萬別偷看文章最開始答案啊，我想你應該可以自己完成了吧：
*******************這就是文章開頭的那句Koan生成的代碼*********************************
點擊(此處)摺疊或打開
-
<html>
-
<head>
-
<title></title>
-
<style type="text/css"></style>
-
<script type="text/javascript" src="abc1.js"></script>
-
<script type="text/javascript" src="abc2.js"></script>
-
<script type="text/javascript" src="abc3.js"></script>
-
</head>
-
<body>
-
<div class="content">
-
<div class="nav">
-
<ul>
-
<li><a href=""><span></span></a></li>
-
<li><a href=""><span></span></a></li>
-
<li><a href=""><span></span></a></li>
-
<li><a href=""><span></span></a></li>
-
<li><a href=""><span></span></a></li>
-
</ul>
-
</div>
-
</div>
-
<div class="sidebar">
-
<div class="top"></div>
-
<div class="middle"></div>
-
<div class="bottom"></div>
-
</div>
-
<div class="main">
-
<div class="acticle">
-
<h1>文章標題1</h1>
-
<p></p>
-
</div>
-
<div class="acticle">
-
<h1>文章標題2</h1>
-
<p></p>
-
</div>
-
<div class="acticle">
-
<h1>文章標題3</h1>
-
<p></p>
-
</div>
-
</div>
-
<div class="footer">版權信息</div>
-
</body>
- </html>
其實，這篇並不是最後一篇，最後一篇要寫filter規則，今天太晚了，明早還有一上午課，最近一兩天抽空再寫吧。
晚安，大家。晚安，自己。
答案：
練習1：div#header+div.content+div.sidebar+div#footer
練習2：div#header+div#content.aticle.posts+div#sidebar.ad+div#footer
練習3：html>head+body>div.header+div.content+div.footer
練習4：html>(head>title+style+script)+body>(div.content>div.nav+div.sidebar+div.main)+div.footer
練習5：div#content>div.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words
（注意：1、id或class與屬性的先後位置，是否無關？；2、並列屬性的寫法，是否很靈活？3、爲什麼這個例子不用()，而上一個例子必須用呢？）
練習6：#content>.aticle>h1.ok[title=papername sytle=color:#000;]+h3[title=subname][sytle=color:#fff;].no+p.words
練習7：div.header>ul.nav>li*6>a[sytle=block]>span{五嶽之巔}
練習8：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$*4)+tfoot>td*4