首頁 > 開發者 > Sublime Text
閱讀原文：http://www.yzswyl.cn/blread-1616.html
什麼是Zendcoding呢？
它是一個俄國小夥子Sergey Chikuyonok主導編寫的Zencoding項目，主要是仿CSS選取器文法來快速碼HTML代碼。能有多快？馬上告訴你。
看下面這張圖片：
注意圖中的Enter Koan部分，就那麼幾個字元就輸出了那麼多html代碼，怎麼樣？好玩吧？下面我們就看如何安裝。
首先我們需要安裝一個外掛程式的安裝平台。
A：按快速鍵Ctrl+`（注意這個字元，就是數字1左邊的那個）彈出console；
B：粘貼以下代碼，斷行符號。便安裝了一款名為“Package Control”的外掛程式，可以認為這是這個外掛程式是別的外掛程式的安裝平台，裝別的外掛程式可以通過它來安裝；
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
裝好，重啟Sublime。
C：使用快速鍵Ctrl+Shift+p，彈出命令列選取器，然後輸入install，調出Package Control，在最底下找到Zencoding，點選就安裝，裝好，重啟。
D：隨便建個index.html用Sublime開啟。
E：關鍵的地方到了：在windows下，開啟Zencoding的快速鍵是Ctrl+Alt+Enter！
如：
下面我們就來瞭解下它就如何使用的。
(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.item001F.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 supportH.div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.
詳細解釋：
1)“#”表id，“.”表類，“+”表並列
寫完Enter Koan後面的代碼後，上面就出現了HTML結構。這個例子可以看出一般的zencoding格式是“HTML標籤#xxx”或者“HTML標籤.yyy”，而#xxx表示id為xxx，.yyy說明class為yyy。最後“+”表示標籤的並列。
小練習1：
<div id="header"></div><div class="content"></div><div class="sidebar"></div><div id="footer"></div>
小練習2：
<div id="header"></div><div id="content" class="aticle posts"></div><div id="sidebar" class="ad"></div><div id="footer"></div>
2)“>”指子內容
很容易理解，比如寫下“div>p>span>a”這個Koan，那麼就有這個HTML結構：<div> <p><span><a href=""></a></span></p></div>
其中，a標籤裡的屬性href是zencoding智能加入的。總之“>”產生了標籤的層級，而且zencoding會自動縮排哦。來接著練習吧。
小練習3：
<html> <head></head> <body> <div class="header"></div> <div class="content"></div> <div class="footer"></div> </body></html>
小練習4：
<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>
3)“()”指同級範圍
參考小練習4的答案相信你會明白的。
4)“[]”表屬性
如何完成<h1 title="something"></h1>的屬性寫法呢，就是用“[]”，即如下Koan：h1[title=someting]。
小練習5：
<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>
5)#和.的簡寫
Koan中：div.ok等同於.ok，div#no等同於#no，所以直接寫.或#時，預設為Div標籤是也。
小練習6： 用簡寫法改寫練習5。6)“*”表標籤複製
如果在Koan中寫入一下內容：ul>li*5，就會產生以下HTML結構：
<ul><li></li><li></li><li></li><li></li><li></li></ul>
那麼，如果每個li元素中還存在<a>與<span>呢？
OK，想必大家想明白了*號的用法，繼續練習。
7)“{}”表標籤內容
你在Koan中寫：div>span>h1{這是標題}，自己看看會出現什麼吧。
8)“$”表連續數
所以不論在屬性如li.li-$或是id或是{}中的內容，$就代表從1開始的序列，就和Excel表一格寫一個1，下拉改格拖出2,3,4,5,6的意思一樣。
小練習7：
<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：
<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>
練習題答案：
練習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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
