Notepad++配置Zen Coding

爲Notepad++安裝 Zen Coding 插件

下載 Zen.Coding 解壓

將解壓所得的文件放入 Notepad++ 程序的安裝目錄下的plugins文件夾。

重啓Notepad++，便可開始使用 Zen Coding。

Zen Coding 用法

首先，咱們先學習一下 Zen Coding 的縮寫規則 （其實就是CSS選擇器）

• E
  元素名 (div, p);
• E#id
  帶id的元素 (div#content, p#intro, span#error);
• E.class
  帶class的元素 (div.header, p.error.critial). id 和 class 能夠連寫，如： div#content.column.width;
• E>N
  子元素 (div>p, div#footer>p>span);
• E+N
  兄弟元素 (h1+p, div#header+div#content+div#footer);
• E*N
  多項元素 (ul#nav>li*5>a);
• E$*N
  帶序號的元素 (ul#nav>li.item-$*5);

接下來，咱們來熟悉 Zen Coding for Notepad++ 的快捷鍵，也是 Zen Coding 的精髓

【Ctrl+E】 展開縮寫（Expand Abbreviation）

好比寫下 div#page>div.logo+ul>li*3>a ，按一下 Ctrl+E，立馬就能夠轉化成：

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
	</ul>
</div>

【Ctrl+Shift+A】 嵌套代碼（Wrap with Abbreviation）

好比，咱們想讓寫好的 <p>hello world</p> ，想在外層再套一個div，只需按下【Ctrl+Shift+A】，在彈出的對話框中輸入： div.wrap，回車。此標籤就能自動被嵌套。

甚至，咱們能夠玩的更炫一些，寫好三行列表內容，全裸，此時沒有任何標籤。只需按下【Ctrl+Shift+A】，輸入 ul>li* ，回車。這三行內容就能自動被ul li 嵌套起來。（不只限於 li 列表哦）

【Ctrl+Shift+D】選中代碼塊（Balance Tag Inward/Outward）

選中當前光標所在的代碼塊，長按可依次選中父塊

【Ctrl+Alt+[ , Ctrl+Alt+]】 轉到上一個/下一個編輯點（Go to Next/Previous Edit Point）

按下能夠依次跳到可輸入內容的編輯點，省去了不停按方向鍵或鼠標來定位編輯點的麻煩。

【Ctrl+Alt+M 】合併行（Merge Lines）

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

【Alt+/ 】添加、移除註釋（Toggle Comment）

註釋掉光標所在的代碼塊 （Notepad++ 自帶的Ctrl+Shift+Q也能夠用來註釋代碼）

【Ctrl+’ 】空標籤轉化（Split/Join Tag）

好比將 <div class="test"></div> 轉化爲 <div class="test"/>， 反向亦可。

【Ctrl+Shift+’ 】移除標籤（Remove Tag）

好比將 <div class="test">hello world</div> 移除div標籤，留下hello world。
好了，目前 Notepad++ 的 Zen Coding 只有這幾個快捷鍵，下面介紹一些經常使用到的縮寫

不知道你們新建一個html 頁面時，是如何輸入文檔聲明和 head 那一坨東西的。如今有了Zen Coding，只需輸入幾個字母就能立馬生成相應文檔聲明的 html 結構框架

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)

head 中經常使用到的一些縮寫

meta:utf, meta:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src

body 中會經常使用到的縮寫

諸如 div, p, a, ul, ol, input:t, input:r 等等

其中，相似 ul+ 的形式可展開爲（+號可自動生產默認的子元素）

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

相似的還有 ol+, dl+, table+, tr+, select+, map+, optg+ 等

IE 條件註釋：

cc:ie6, cc:ie, cc:noie

下邊是一些典型用法示例：

div#name.one.two =>
		<div id="name" class="one two"></div>

[title="Hello world" rel]  =>
		<a href="" title="hello world" rel=""></a>

td[colspan=2] =>
		<td colspan="2"></td>

li.item$*3  =>
		<li class="item1"></li><li class="item2"></li><li class="item3"></li>

li.item$$$ =>
	<li class="item001"></li>

li.item-$-content*3 =>
	<li class="item-1-content"></li><li class="item-2-content"></li><li class="item-3-content"></li>

#content>.section =>
	<div id="content"><div class="section"></div></div>

若是你寫了這麼一串出來，那麼一個頁面的基本結構就出來了：

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

此外【|e】 能夠輸出轉義字符

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

div#wrap>div.content>p|e|e 可轉化爲：

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