zen-Coding在Notepad++中的使用

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代碼：

 

1	<divid="name">

接下來看一個更高效的例子

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

按ctrl+E產生如下代碼

 

12345678910

<divid="header">    <divid="logo">    <ulclass="nav">        <liclass="item-1"><ahref=""></li>        <liclass="item-2"><ahref=""></li>        <liclass="item-3"><ahref=""></li>        <liclass="item-4"><ahref=""></li>        <liclass="item-5"><ahref=""></li>    </ul>

Zend Coding文法

1.E | E#name | E.name

這裡E表示元素，如p,div等。#name和.name分別表示ID和class屬性。例：

div

 

1

<div>

div#main

 

1	<divid="main">

ul.item

 

1	<liclass="item"></li>

如要顯示一個id和多個class屬性時，可以這樣寫

ul#nav.one.two

 

1	<ulid="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>

div#nav>ul.main

 

123	<divid="nav">    <ulclass="main"></ul>

3.E+E | E#name+E#name | E.#name+E.name | E.name+E.name

+號表示兄弟關係。例：

p+p

 

12

div#header+div#content+div#footer

 

123	<divid="header"><divid="content"><divid="footer">

E+  (+號表示會產生預設的子項目)

table+

          <td>    

12345

<table>

ul+

 

123	<ul>    <li></li></ul>

dl+

 

1234	<dl>    <dt></dt>    <dd></dd></dl>

4.E*N

N:表示某個元素需要重複的次數。例：

p*3

 

123

ul#nav>li.item*4

 

123456

<ulid="nav">    <liclass="item"></li>    <liclass="item"></li>    <liclass="item"></li>    <liclass="item"></li></ul>

5.E*N$

$:表示序號。例：

ul#nav>li.item-$*4

 

123456

<ulid="nav">    <liclass="item-1"></li>    <liclass="item-2"></li>    <liclass="item-3"></li>    <liclass="item-4"></li></ul>

6.E[attr]

attr:表示元素屬性。例:

a[title]

 

1	<a href=""title="">

td[colspan=2]

 

1	<tdcolspan="2">

7.E|filter

E|e

|e輸出逸出字元

div#wrap>div.content>p|e

 

12345

<div id="wrap">    <div class="content">        <p></p>    </div></div>

 8.( )控制嵌套分組關係

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

 

12345678910

<divid="header">    <h1class="logo"><ahref=""></h1> /*h1和ul是兄弟關係*/    <ulclass="nav">        <liclass="item"><ahref=""></li>        <liclass="item"><ahref=""></li>        <liclass="item"><ahref=""></li>        <liclass="item"><ahref=""></li>        <liclass="item"><ahref=""></li>    </ul>

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

 

123456789101112

<divid="header">    <h1class="logo">      /*h1和ul是父子關係*/        <ahref="">        <ulclass="nav">            <liclass="item"><ahref=""></li>            <liclass="item"><ahref=""></li>            <liclass="item"><ahref=""></li>            <liclass="item"><ahref=""></li>            <liclass="item"><ahref=""></li>        </ul>    </h1>

以上兩種寫法得到的結構是不一樣的。 請大家注意觀察。

練習：將以下代碼用zen-coding寫出來。

 

12345678910111213141516

<divid="page">    <divid="header">        <ulid="nav">            <li><ahref=""></li>            <li><ahref=""></li>            <li><ahref=""></li>            <li><ahref=""></li>        </ul>        <divid="page">        <h1><span></h1>                                  <divid="footer">

答案：(選中下一空行試試)
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):嵌套父級元素

用法：選中需要嵌套父級元素的標籤，按快速鍵，在彈出的對話方塊中輸入父級標籤斷行符號即可。例：

 

12345

list1list2list3list4list5

選中以上內容，然後按【Ctrl+Shift+A】在彈出的對話方塊中輸入ul.nav>li.item-$*>a[title]後按【Enter】鍵，就會產生如下代碼

 

1234567

<ulclass="nav">    <liclass="item-1"><ahref=""title="">list1</li>    <liclass="item-2"><ahref=""title="">list2</li>    <liclass="item-3"><ahref=""title="">list3</li>    <liclass="item-4"><ahref=""title="">list4</li>    <liclass="item-5"><ahref=""title="">list5</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/>， 反向亦可。

/*Remove Tag(Ctrl+Shift+’ ):移除標籤

比如將 <div>hello world 移除div標籤，留下hello world。

zen-coding常用縮寫

 

12345678910111213141516

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:compatstyle, 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內建的一些縮寫規則。*/

 

Tips:尾部的/*  */是為了避免跑到框外來導致內容難看。不知道站長能否處理這個問題！