Zen Coding快速编写HTML代码

         Zen Coding其实是一款快速编写HTML,XML,XSL（或其他格式化语言）的编辑器插件，这个插件的实现了用缩写方式完成大量重复的书写工作。他的核心是一个强大的缩写引擎，掌握这些缩写技巧，给我们的编写代码带来极高的编写效率。他支持好多编辑器，如TextMate，UltraEdit，Notepad++等许多编写器

        接着我们一起来看看Zen Coding如何使用，其实只要你对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码，我们先来看一个简单的实例，首先在你的编辑器中输入下面一句代码

 

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演示。

       在打开的在线编辑中我们同样输入上面的那段代码：

 

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。

       在学习如何在notepad++中使用zen coding之前我们有必要先了解一下zen coding是一些基本规则，这样我们才能更好的在notepad++中应用zen coding来提高大家编定代码的效率。

Zend Coding书写规范

            E：表示元素，如p,div等，例如我们在编辑中输入：

 

p

 

按一下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>

       然后按回车【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列表中,如下所示

list1list2list3list4list5

       

       我们在编辑器中按【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>