經(jīng)朋友介紹認(rèn)識了Zen Coding一款快速編寫HTML代碼的插件，然后在google搜索一下其使用，讓在下激動不以，今天特意寫了一篇blog來跟大家一起分享。
Zen Coding其實是一款快速編寫HTML,XML,XSL（或其他格式化語言）的編輯器插件，這個插件的實現(xiàn)了用縮寫方式完成大量重復(fù)的書寫工作。他的核心是一個強(qiáng)大的縮寫引擎，掌握這些縮寫技巧，給我們的編寫代碼帶來極高的編寫效率。他支持好多編輯器，如TextMate，UltraEdit，Notepad++等許多編寫器，我們可以從http://code.google.com/p/zen-coding下載到相對應(yīng)的編輯插件，然后我們把解壓縮出來的文件，如下圖：
放到你的Notepad++安裝文件下的plugins目錄下，在我的電腦中的程序安裝地址是“C:\Program Files\Notepad++\plugins”（這個地址需要對應(yīng)你的程序安裝地址）。然后重新啟動你的Notepad++編輯器就能看到菜單欄上增加了一項Zen Coding。如下圖所示：
這樣我們在Notepad++編輯下就成功的安裝好了Zen Coding的插件。
接著我們一起來看看Zen Coding如何使用，其實只要你對CSS的選擇器比較熟悉，就可以得用簡短的類似于CSS選擇器的代碼高效的編寫出HTML代碼，我們先來看一個簡單的實例，首先在你的編輯器中輸入下面一句代碼
div#header>div#logo+ul.nav>li.item-$*5>a
接著按一下快捷鍵ctr+E，就會自動生成如下的HTML代碼：
<div id="header"> <div id="logo"></div> <ul class="nav"> <li class="item-1"><a href=""></a></li> <li class="item-2"><a href=""></a></li> <li class="item-3"><a href=""></a></li> <li class="item-4"><a href=""></a></li> <li class="item-5"><a href=""></a></li> </ul> </div>
這樣是不是很神奇呀。你一定會問這是怎么實現(xiàn)的呢？在沒搞清楚這是怎么回事的時候，你可能會相當(dāng)?shù)拿曰?，不知道這是怎么一回事。沒關(guān)系，我們先來看一下其在線演示，一起感受下zen-codingr的強(qiáng)大功能，請看其在線的DEMO演示。
在打開的在線編輯中我們同樣輸入上面的那段代碼：
div#header>div#logo+ul.nav>li.item-$*5>a
此時我們在按一下ctr+,就能看到轉(zhuǎn)換的HTML代碼
<div id="header"> <div id="logo"></div> <ul class="nav"> <li class="item-1"><a href=""></a></li> <li class="item-2"><a href=""></a></li> <li class="item-3"><a href=""></a></li> <li class="item-4"><a href=""></a></li> <li class="item-5"><a href=""></a></li> </ul> </div>
此處的快捷方式是ctr+,而在我們的Notepad++中使用的是ctr+E，所以這里要提醒大家，在不同的編輯中的快捷方式是不一樣的，感興趣的朋友可以自己多研究一下，我們這里主要是針對在notepad++中如何使用zen coding。
在學(xué)習(xí)如何在notepad++中使用zen coding之前我們有必要先了解一下zen coding是一些基本規(guī)則，這樣我們才能更好的在notepad++中應(yīng)用zen coding來提高大家編定代碼的效率。
Zend Coding書寫規(guī)范
E：表示元素，如p,div等，例如我們在編輯中輸入：
p
按一下ctr+E，我們就能得到
<p></p>
E#name和E.name:這個是ID和Class屬性，和CSS樣式表定義ID和Class是一樣的。#表示ID，.表示Class。例如定義一個ID為header的div，我們可以這樣來書寫：div#header，然后定義一個class我們可以寫在div.region。我們一起先在編輯中輸入：
div#header
然后展開，就成為：
<div id="header"></div>
div.region
展開就是：
<div class="region"></div>
當(dāng)然我們同時可以將兩者合并在一起，因為在我們編寫代碼時，常會碰到一個元素具有一個ID和多個Class名，那我們這里也可以簡單方便的實現(xiàn)，大家一起來看下面的一個例子：
div#nav.menu.links.tab
同時我們來展開他：
<div id="nav" class="menu links tab"></div>
是不是我們這個div同時具有ID名nav和class名menu，links，tab呀，方便吧
E>E:表示父級嵌套子級:
div#header>h1#logog
<div id="header"> <h1 class="logo"></h1> </div>
我們還可以實現(xiàn)多級嵌套：
div#header>h1#logo>a
<div id="header"> <h1 id="logo"><a href=""></a></h1> </div>
E+E:同輩元素：
div#header>h1.site_name+p.site_solgan
<div id="header"> <h1 class="site_name"></h1> <p class="site_solgan"></p> </div>
給元素添加屬性：給標(biāo)簽元素添加屬性
a[title]
<a href="" title=""></a>
當(dāng)然我們還可以給其加上屬性值：
a[title="hello zen coding"]
<a href="" title="hello zen coding"></a>
不過這里需要提醒大家一點(diǎn)，在展開之前，光標(biāo)最好放在a[title="hello zen coding"]的末尾。不然會造成不可想像的錯誤，大家可以自己嘗試一下，就自然明白了。
E*N:多個相同元素的寫法
div#nav>ul>li.item*5>a
<div id="nav"> <ul> <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>
E*N$：按索引生成
ul>li.item-$*3
<ul> <li class="item-1"></li> <li class="item-2"></li> <li class="item-3"></li> </ul>
上面上一些Zen Coding的書寫規(guī)范，當(dāng)然更多的書寫大家還可以參考ZenCodingCheatSheet.pdf文檔，這里我就不全部闡述了。
到這里我們對zen coding有一定的了解了，也不會對一開始那一段如何產(chǎn)生代碼感到迷惑不解了，接著我們就可以來一起看看zen coding在notepad++編輯中的應(yīng)用了。
【Ctrl+E】展開縮寫(Expand Abbreviation)：例如前面那些例子，我們只要在notepad++編輯中輸入如下代碼：
div#header>(h1.logo>a)+ul.nav>li.item*5>a
我們只要按一下【Ctrl+E】，馬上就能把上面的代碼轉(zhuǎn)換成如下的HTML代碼
<div id="header"> <h1 class="logo"><a href=""></a></h1> <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>
需要提醒大家的一點(diǎn)是，我們上面中的括號的使用，在前面我們沒有碰到過，這里加上這個括號是為控制其嵌套格式，如果我們不加上這個括號，那么生成出來的HTML是完全另外一們樣子，大家可以在自己本地電腦上的編輯上嘗試一下。你會恍然大悟的，同時也會知道他的更神奇之處。
【Ctrl+Shift+A】嵌套代碼(Wrap with Abbreviation)：如何說我們想在下面代碼中的P標(biāo)簽外嵌套一個div.limiter
<div id="header"> <p>Hello Zen Coding</p> </div>
我們只需要在p標(biāo)簽的結(jié)束位置按【Ctrl+Shift+A】,在彈出的窗口中輸入div.limiter，如下圖所示：
然后按回車【Enter】鍵，就會自動在p標(biāo)簽外嵌套一個div.limiter的div標(biāo)簽，如：
<div id="header"> <div class="limiter"> <p>Hello Zen Coding</p> </div> </div>
一定要記住是在p標(biāo)簽的末尾，如果光標(biāo)不在p標(biāo)簽的末尾，而是在p標(biāo)簽內(nèi)容中的任何一個位置，那不div.limiter就不會嵌套在<p></p>外面，而是嵌套在Hello Zen Coding的外面。
還有一種更讓你感興趣的方法，我們在編輯中寫幾行沒有任何標(biāo)簽的內(nèi)容，但我想給每個沒有標(biāo)簽的內(nèi)容嵌套在ul列表中,如下所示
list1 list2 list3 list4 list5
我們在編輯器中按【Ctrl+A】選中這幾行內(nèi)容，然后按【Ctrl+Shift+A】在彈出的對話框中輸入ul.menu>li.item*>a后按【Enter】鍵，就會生成如下代碼
<ul class="menu"> <li class="item"><a href="">list1</a></li> <li class="item"><a href="">list2</a></li> <li class="item"><a href="">list3</a></li> <li class="item"><a href="">list4</a></li> <li class="item"><a href="">list5</a></li> </ul>
記得選中所有內(nèi)容喲，我嘗試了不選中內(nèi)容是沒有效果出現(xiàn)的喲。
下面我們一起來看幾個常用的快捷方式
【Ctrl+Shift+D】選中代碼塊(Balance TagInward/Outward):選中當(dāng)前光標(biāo)所在的代碼塊，長按可以依次選中其父塊代碼。
【Ctrl+Alt+[，Ctrl+Alt+]】轉(zhuǎn)到上一個/下一個編輯點(diǎn):按下可以依次跳到可輸入內(nèi)容的編輯點(diǎn)，省去了不停按方向鍵或鼠標(biāo)來定位編輯點(diǎn)的麻煩。
【Ctrl+Alt+M 】合并行（Merge Lines）:將選中的多行代碼合并為一行。壓縮css、js代碼為一行時，這個很方便。Ctrl+A，然后Ctrl+Alt+M，兩下即可搞定，免去了動用壓縮工具的麻煩。（當(dāng)然這個只是簡單地將代碼合并為一行，并不能做更深入的代碼壓縮）
【Alt+/ 】添加、移除注釋（Toggle Comment）: 注釋掉光標(biāo)所在的代碼塊
【Ctrl+Shift+’ 】移除標(biāo)簽（Remove Tag）:比如將
<div class="test">
hello world
</div>
移除div標(biāo)簽，留下hello world。
【Ctrl+’ 】空標(biāo)簽轉(zhuǎn)化（Split/Join Tag）:比如將<div class="test"></div>轉(zhuǎn)化為<div class="test"/>，反向亦可。
我們在這里介紹了一些快捷的使用，但常用的還是我們前面看到那幾個生成HTML代碼的兩種【Ctrl+E】和【Ctrl+Shift+A】當(dāng)然感興趣的朋友可以依次去嘗試。體會一下。
如果你對JS精通的話，你還可以改寫plugins\NppScripting\includes\Zen Coding.js這個JS文件，讓它按照你喜歡的編輯習(xí)慣，當(dāng)然你不編寫自己的縮寫規(guī)則，也強(qiáng)烈建議您閱讀一下這個JS文件，熟悉Zen Coding自帶的一些縮寫規(guī)則，讓你編輯代碼更快。
最后Zen Coding分為Zen Html和Zen Css兩個部分，在這里我們主要一起探討了Html部分，如果感興趣的朋友可以去深入了解一下Zen Css部分
如需轉(zhuǎn)載請注明出處：W3CPlus
