轉載-notepad++ zend-coding使用
zen-Coding是一款快速編寫HTML,CSS（或其他格式化語言）代碼的編輯器插件，這個插件可以用縮寫方式完成大量重複的編碼工作，是web前端從業者的利器。 zen-Coding插件支持多種編輯器，如UltraEdit，Notepad++等。
zen-Conding下載地址：http://code.google.com/p/zen-coding/downloads/list (進入下載頁，選擇相應的編輯器插件下載)
一、Notepad++安裝zen-Coding
1.下載zen-Coding的Notepad++插件;(zen-Coding for Notepad++)
2.解壓後將壓縮包中的文件放入Notepad++安裝目錄下的plugins文件夾中;
3.重新啓動Notepad++編輯器就能看到菜單欄上增加了一項Zen Coding。如下圖所示：
二、zen-Coding的使用
zen-Coding的使用需要掌握CSS和HTML相關知識。其實只要對CSS的選擇器比較熟悉，就可以得用簡短的類似於CSS選擇器的代碼高效的編寫出HTML代碼。打開Notepad++編輯器，輸入以下代碼：
div#name
然後接着按一下快捷鍵ctrl+E，就會自動生成如下的HTML代碼：
<div id="name"></div>
接下來看一個更高效的例子
div#header>div#logo+ul.nav>li.item-$*5>a
按ctrl+E生成如下代碼
<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>
Zend Coding語法
1.E | E#name | E.name
這裏E表示元素，如p,div等。#name和.name分別表示ID和class屬性。例：
div
<div></div>
div#main
<div id="main"></div>
ul.item
<li class="item"></li>
如要顯示一個id和多個class屬性時，可以這樣寫
ul#nav.one.two
<ul id="nav" class="one two"></ul>
2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name
>表示父級嵌套子級。例：
div>span
<div><span></span></div>
div#nav>ul.main
<div id="nav"> <ul class="main"></ul> </div>
3.E+E | E#name+E#name | E.#name+E.name | E.name+E.name
+號表示兄弟關係。例：
p+p
<p></p> <p></p>
div#header+div#content+div#footer
<div id="header"></div> <div id="content"></div> <div id="footer"></div>
E+ (+號表示會生成默認的子元素)
table+
<table> <tr> <td></td> </tr> </table>
ul+
<ul> <li></li> </ul>
dl+
<dl> <dt></dt> <dd></dd> </dl>
4.E*N
N:表示某個元素需要重複的次數。例：
p*3
<p></p> <p></p> <p></p>
ul#nav>li.item*4
<ul id="nav"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
5.E*N$
$:表示序號。例：
ul#nav>li.item-$*4
<ul id="nav"> <li class="item-1"></li> <li class="item-2"></li> <li class="item-3"></li> <li class="item-4"></li> </ul>
6.E[attr]
attr:表示元素屬性。例:
a[title]
<a href="" title=""></a>
td[colspan=2]
<td colspan="2"></td>
7.E|filter
E|e
|e輸出轉義字符
div#wrap>div.content>p|e
<div id="wrap"> <div class="content"> <p></p> </div> </div>
8.( )控制嵌套分組關係
div#header>(h1.logo>a)+ul.nav>li.item*5>a
<div id="header"> <h1 class="logo"><a href=""></a></h1> /*h1和ul是兄弟關係*/ <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>
div#header>h1.logo>a+ul.nav>li.item*5>a
<div id="header"> <h1 class="logo"> /*h1和ul是父子關係*/ <a href=""></a> <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> </h1> </div>
以上兩種寫法得到的結構是不一樣的。 請大家注意觀察。
練習：將以下代碼用zen-coding寫出來。
<div id="page"> <div id="header"> <ul id="nav"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> <div id="page"> <h1><span></span></h1> <p></p> <p></p> </div> <div id="footer"></div> </div>
答案：(選中下一空行試試)
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
三、Notepad++中zen-coding的使用
Expand Abbreviation(Ctrl+E):展開縮寫
用法：輸入縮寫代碼後，在代碼末尾直接按快捷鍵得到完整代碼。
Wrap with Abbreviation(Ctrl+Shift+A):嵌套父級元素
用法：選中需要嵌套父級元素的標籤，按快捷鍵，在彈出的對話框中輸入父級標籤回車即可。例：
list1 list2 list3 list4 list5
選中以上內容，然後按【Ctrl+Shift+A】在彈出的對話框中輸入ul.nav>li.item-$*>a[title]後按【Enter】鍵，就會生成如下代碼
<ul class="nav"> <li class="item-1"><a href="" title="">list1</a></li> <li class="item-2"><a href="" title="">list2</a></li> <li class="item-3"><a href="" title="">list3</a></li> <li class="item-4"><a href="" title="">list4</a></li> <li class="item-5"><a href="" title="">list5</a></li> </ul>
Balance TagInward/Outward(Ctrl+Shift+D):選中代碼塊
選中當前光標所在的標記，再次按下可以依次選中其父標籤。
Go to Next/Previous Edit Point( Ctrl+Alt+] / Ctrl+Alt+[ ):轉到下一個/上一個編輯點
Merge Lines(Ctrl+Alt+M):合併行
將選中的多行代碼合併爲一行。壓縮css、js代碼爲一行時，這個很方便。Ctrl+A，然後Ctrl+Alt+M，兩下即可搞定，免去了動用壓縮工具的麻煩。（當然這個只是簡單地將代碼合併爲一行，並不能做更深入的代碼壓縮）
Toggle Comment(Alt+/):添加、移除註釋
註釋掉光標所在的代碼塊 （Notepad++ 自帶的Ctrl+Shift+Q也可以用來註釋代碼）
Split/Join Tag(Ctrl+’ ):空標籤轉化
比如將 <div></div> 轉化爲 <div/>， 反向亦可。
Remove Tag(Ctrl+Shift+’ ):移除標籤
比如將 <div>hello world</div> 移除div標籤，留下hello world。
zen-coding常用縮寫
html:4t (HTML 4.01 Transitional) html:4s (HTML 4.01) html:xt (XHTML 1.0) html:xs (XHTML 1.0 Strict) html:xxs (XHTML 1.1) html:5 (HTML5) meta:utf, meta:compat style, link:css, link:print, link:favicon, link:rss, script, script:src div, p, a, ul, ol, input:t, input:r ol+, dl+, table+, tr+, select+, map+, optg+ cc:ie6, cc:ie, cc:noie
可以打開plugins\NppScripting\includes\Zen Coding.js這個JS文件看一看，熟悉Zen Coding自帶的一些縮寫規則。
補充：
轉載至：http://www.cnblogs.com/leejersey/archive/2012/03/23/2413153.html