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部分