Notepad++結合Zen Coding快速編寫HTML代碼

經朋友介紹認識了Zend Coding一款快速編寫HTML代碼的插件，而後在google搜索一下其使用，讓在下激動不以，今天特地寫了一篇blog來跟你們一塊兒分享。css

Zen Coding實際上是一款快速編寫HTML,XML,XSL（或其餘格式化語言）的編輯器插件，這個插件的實現了用縮寫方式完成大量重複的書寫工做。他的核心是一個強大的縮寫引擎，掌握這些縮寫技巧，給咱們的編寫代碼帶來極高的編寫效率。他支持好多編輯器，如TextMate，UltraEdit，Notepad++等許多編寫器，咱們能夠從http://code.google.com/p/zen-coding下載到相對應的編輯插件，而後咱們把解壓縮出來的文件，以下圖：編輯器

放到你的Notepad++安裝文件下的plugins目錄下，在個人電腦中的程序安裝地址是「C:\Program Files\Notepad++\plugins」（這個地址須要對應你的程序安裝地址）。而後從新啓動你的Notepad++編輯器就能看到菜單欄上增長了一項Zen Coding。以下圖所示：工具

這樣咱們在Notepad++編輯下就成功的安裝好了Zen Coding的插件。學習

接着咱們一塊兒來看看Zen Coding如何使用，其實只要你對CSS的選擇器比較熟悉，就能夠得用簡短的相似於CSS選擇器的代碼高效的編寫出HTML代碼，咱們先來看一個簡單的實例，首先在你的編輯器中輸入下面一句代碼google

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>

這樣是否是很神奇呀。你必定會問這是怎麼實現的呢？在沒搞清楚這是怎麼回事的時候，你可能會至關的迷惑，不知道這是怎麼一回事。不要緊，咱們先來看一下其在線演示，一塊兒感覺下zen-codingr的強大功能，請看其在線的DEMO演示。code

在打開的在線編輯中咱們一樣輸入上面的那段代碼：blog

div#header>div#logo+ul.nav>li.item-$*5>a

此時咱們在按一下ctr+,就能看到轉換的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。ip

在學習如何在notepad++中使用zen coding以前咱們有必要先了解一下zen coding是一些基本規則，這樣咱們才能更好的在notepad++中應用zen coding來提升你們編定代碼的效率。

Zend Coding書寫規範

E：表示元素，如p,div等，例如咱們在編輯中輸入：

按一下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>

固然咱們同時能夠將二者合併在一塊兒，由於在咱們編寫代碼時，常會碰到一個元素具備一個ID和多個Class名，那咱們這裏也能夠簡單方便的實現，你們一塊兒來看下面的一個例子：

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>

咱們還能夠實現多級嵌套：

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>

給元素添加屬性：給標籤元素添加屬性

a[title]

<a href="" title=""></a>

固然咱們還能夠給其加上屬性值：

a[title="hello zen coding"]

<a href="" title="hello zen coding"></a>

不過這裏須要提醒你們一點，在展開以前，光標最好放在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的書寫規範，固然更多的書寫你們還能夠參考ZenCodingCheatSheet.pdf文檔，這裏我就不所有闡述了。

到這裏咱們對zen coding有必定的瞭解了，也不會對一開始那一段如何產生代碼感到疑惑不解了，接着咱們就能夠來一塊兒看看zen coding在notepad++編輯中的應用了。

【Ctrl+E】展開縮寫(Expand Abbreviation)：例如前面那些例子，咱們只要在notepad++編輯中輸入以下代碼：

div#header>(h1.logo>a)+ul.nav>li.item*5>a

咱們只要按一下【Ctrl+E】，立刻就能把上面的代碼轉換成以下的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>

須要提醒你們的一點是，咱們上面中的括號的使用，在前面咱們沒有碰到過，這裏加上這個括號是爲控制其嵌套格式，若是咱們不加上這個括號，那麼生成出來的HTML是徹底另一們樣子，你們能夠在本身本地電腦上的編輯上嘗試一下。你會恍然大悟的，同時也會知道他的更神奇之處。

【Ctrl+Shift+A】嵌套代碼(Wrap with Abbreviation)：如何說咱們想在下面代碼中的P標籤外嵌套一個div.limiter

<div id="header">     <p>Hello Zen Coding</p> </div>

咱們只須要在p標籤的結束位置按【Ctrl+Shift+A】,在彈出的窗口中輸入div.limiter，以下圖所示：

而後按回車【Enter】鍵，就會自動在p標籤外嵌套一個div.limiter的div標籤，如：

<div id="header">     <div class="limiter">         <p>Hello Zen Coding</p>     </div> </div>

必定要記住是在p標籤的末尾，若是光標不在p標籤的末尾，而是在p標籤內容中的任何一個位置，那不div.limiter就不會嵌套在<p></p>外面，而是嵌套在Hello Zen Coding的外面。

還有一種更讓你感興趣的方法，咱們在編輯中寫幾行沒有任何標籤的內容，但我想給每一個沒有標籤的內容嵌套在ul列表中,以下所示

list1 list2 list3 list4 list5

咱們在編輯器中按【Ctrl+A】選中這幾行內容，而後按【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>

記得選中全部內容喲，我嘗試了不選中內容是沒有效果出現的喲。

下面咱們一塊兒來看幾個經常使用的快捷方式

【Ctrl+Shift+D】選中代碼塊(Balance TagInward/Outward):選中當前光標所在的代碼塊，長按能夠依次選中其父塊代碼。

【Ctrl+Alt+[，Ctrl+Alt+]】轉到上一個/下一個編輯點:按下能夠依次跳到可輸入內容的編輯點，省去了不停按方向鍵或鼠標來定位編輯點的麻煩。

【Ctrl+Alt+M 】合併行（Merge Lines）:將選中的多行代碼合併爲一行。壓縮css、js代碼爲一行時，這個很方便。Ctrl+A，而後Ctrl+Alt+M，兩下便可搞定，免去了動用壓縮工具的麻煩。（固然這個只是簡單地將代碼合併爲一行，並不能作更深刻的代碼壓縮）

【Alt+/ 】添加、移除註釋（Toggle Comment）: 註釋掉光標所在的代碼塊

【Ctrl+Shift+’ 】移除標籤（Remove Tag）:好比將

<div class="test"> hello world </div>

移除div標籤，留下hello world。

【Ctrl+’ 】空標籤轉化（Split/Join Tag）:好比將<div class="test"></div>轉化爲<div class="test"/>，反向亦可。

咱們在這裏介紹了一些快捷的使用，但經常使用的仍是咱們前面看到那幾個生成HTML代碼的兩種【Ctrl+E】和【Ctrl+Shift+A】固然感興趣的朋友能夠依次去嘗試。體會一下。

若是你對JS精通的話，你還能夠改寫plugins\NppScripting\includes\Zen Coding.js這個JS文件，讓它按照你喜歡的編輯習慣，固然你不編寫本身的縮寫規則，也強烈建議您閱讀一下這個JS文件，熟悉Zen Coding自帶的一些縮寫規則，讓你編輯代碼更快。

最後Zen Coding分爲Zen Html和Zen Css兩個部分，在這裏咱們主要一塊兒探討了Html部分，若是感興趣的朋友能夠去深刻了解一下Zen Css部分