zen-Coding是一款快速編寫HTML,CSS（或其他格式化語言）代碼的編輯器插件，這個插件可以用縮寫方式完成大量重復的編碼工作，是web前端從業者的利器。 zen-Coding插件支持多種編輯器，如UltraEdit，Notepad++等。
溫馨提示：zen-Coding已經改名Emmet，並且搭建了一個新的網站：docs.emmet.io。
zen-Conding下載地址：http://code.google.com/p/zen-coding/downloads/list (進入下載頁，選擇相應的編輯器插件下載)
Notepad++ 是一款無比輕巧便捷的代碼編輯工具。它無可挑剔的啟動速度，優秀的語法高亮，干凈整齊的代碼縮進，便捷的括號高亮匹配贏得了無數人的喜愛。 但，其代碼自動補全很“雞肋”，或者說Notepad++根本就沒有代碼補全功能。平時改點源代碼很方便，但是想單獨的寫點源代碼就比較麻煩了，難道要一點點的都敲嗎？先上段視頻：
怎么樣？驚呆了吧。Zen Coding–一款使用仿CSS選擇器的語法來快速開發HTML和CSS的插件。它無視了編輯器的自動提示和自動完成，秒殺了你自定義的各種快捷鍵或者 AHK 的熱字符串，以智能簡潔高效的縮短輸入，帶給你超快速地書寫各種復雜而枯燥的 HTML 和 CSS 代碼的體驗。
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代碼：
|
1
|
<
div
id
=
"name"
></
div
>
|
接下來看一個更高效的例子
div#header>div#logo+ul.nav>li.item-$*5>a
按ctrl+E生成如下代碼
|
1
2
3
4
5
6
7
8
9
10
|
<
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
|
1
|
<
div
></
div
>
|
div#main
|
1
|
<
div
id
=
"main"
></
div
>
|
ul.item
|
1
|
<
li
class
=
"item"
></
li
>
|
如要顯示一個id和多個class屬性時，可以這樣寫
ul#nav.one.two
|
1
|
<
ul
id
=
"nav"
class
=
"one two"
></
ul
>
|
2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name
>表示父級嵌套子級。例：
div>span
|
1
|
<
div
><
span
></
span
></
div
>
|
div#nav>ul.main
|
1
2
3
|
<
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
|
1
2
|
<
p
></
p
>
<
p
></
p
>
|
div#header+div#content+div#footer
|
1
2
3
|
<
div
id
=
"header"
></
div
>
<
div
id
=
"content"
></
div
>
<
div
id
=
"footer"
></
div
>
|
E+ (+號表示會生成默認的子元素)
table+
|
1
2
3
4
5
|
<
table
>
<
tr
>
<
td
></
td
>
</
tr
>
</
table
>
|
ul+
|
1
2
3
|
<
ul
>
<
li
></
li
>
</
ul
>
|
dl+
|
1
2
3
4
|
<
dl
>
<
dt
></
dt
>
<
dd
></
dd
>
</
dl
>
|
4.E*N
N:表示某個元素需要重復的次數。例：
p*3
|
1
2
3
|
<
p
></
p
>
<
p
></
p
>
<
p
></
p
>
|
ul#nav>li.item*4
|
1
2
3
4
5
6
|
<
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
|
1
2
3
4
5
6
|
<
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]
|
1
|
<
a href
=
""
title
=
""
>
<
/
a
>
|
td[colspan=2]
|
1
|
<
td
colspan
=
"2"
></
td
>
|
7.E|filter
E|e
|e輸出轉義字符
div#wrap>div.content>p|e
|
1
2
3
4
5
|
<div id="wrap">
<div class="content">
<p></p>
</div>
</div>
|
8.( )控制嵌套分組關系
div#header>(h1.logo>a)+ul.nav>li.item*5>a
|
1
2
3
4
5
6
7
8
9
10
|
<
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
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<
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寫出來。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<
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):嵌套父級元素
用法：選中需要嵌套父級元素的標簽，按快捷鍵，在彈出的對話框中輸入父級標簽回車即可。例：
|
1
2
3
4
5
|
list1
list2
list3
list4
list5
|
選中以上內容，然后按【Ctrl+Shift+A】在彈出的對話框中輸入ul.nav>li.item-$*>a[title]后按【Enter】鍵，就會生成如下代碼
|
1
2
3
4
5
6
7
|
<
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常用縮寫
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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自帶的一些縮寫規則。