IT忍者神龟之zen Coding-CSDN博客

zen conding是一种快速编写HTML/CSS代码的方法，反正我最近发现的以前没有用过，之前用过的只是三剑客中的一个剑客。

当你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。在JavaScript方面，

当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。

现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写（方便快捷的应用命令）：

div#content>h1+p

…然后就可以看到这样的输出：

<div id="content">
<h1></h1>
<p></p>
</div>

有些迷惑吧？今天，我将向你介绍 Zen Coding ，一组用于快速HTML和CSS编码的工具。最初由 Vadim Makeev在2009年4月提出 (文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

有哪些编辑器支持这个zen coding：

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表：

E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: 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了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…

div#header>img.logo+ul#nav>li*4>a

…然后调用”展开缩写”行为。

这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个<li>元素，你可以简单的写位li*5。它也将同样重写全部子代元素。如果你想写4个<li>元素，每个里面都有一个<a>标签，你就可以简单的写为li*4>a，这样会生成以下HTML代码：

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写，div.item$*3:

1
2
3

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…

 div#i$-test.class$$$*5

会被转换成为:

<div id="i1-test" class="class111"></div>
<div id="i2-test" class="class222"></div>
<div id="i3-test" class="class333"></div>
<div id="i4-test" class="class444"></div>
<div id="i5-test" class="class555"></div>

你会看到，当你写a的缩写的时候，输出是<a href=””></a>。或者，如果你写img，输出就是<img src=”” alt=”” />。

Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
			...
			},
			  'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
			...
			}
			}

元素类型

Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。

有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: <a href=””></a>。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写<img src=”” alt=”” />，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。

对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。

例子

那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。

我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。

HTML 标签对匹配器

对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。

不幸的是，很多现代开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做法)，它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关：它甚至可以用于这段JavaScript代码片段：

var table = '<table>'; for (var i = 0; i < 3; i++) {
	table += '<tr>'; for (var j = 0; j < 5; j++) {
		table += '<td>' + j + '</td>';
	}
	table += '</tr>';
}
table += '</table>';

使用缩写包裹

这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug？或者你需要添加一个装饰，比如一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。

该功能相当简单：它要求你输入缩写，然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本，它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置：标签的内容里面或者是开始和关闭标签中间。依赖于它的位置，它会包裹标签的内容或标签本身。

缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字，比如：ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候，它会将它作为一个重复元素：你的章节中有多少行，它就会输出多少次，并将每行的内容放到重复元素的最后一个子元素里面。

如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span：

About Us
Products
News
Blog
Contact Up

你将会得到以下结果：

<div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

Ctrl+,
展开缩写
Ctrl+M
匹配对
Ctrl+H
使用缩写包括
Shift+Ctrl+M
合并行
Ctrl+Shift+?
上一个编辑点
Ctrl+Shift+?
下一个编辑点
Ctrl+Shift+?
定位匹配对

这些快捷键是可以自定义的。

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

通过更新网站安装EclipseMonkey: http://download.eclipse.org/technology/dash/update(如果你使用Aptana，可跳过这一步)
在你的当前工作去创建一个顶级的项目，给它命名，比如，就叫zencoding
在新创建的项目中创建scripts文件夹
解压缩下载的ZIP插件包到该文件夹。项目结构看起来就像这样:
安装之后，Aptana的菜单栏中的“脚本(Script)”菜单中将会出现Zen coding相关子菜单

注意事项：

Aptana版的官方插件是基于MAC机的，如果你用的是Windows，需要手动更改快捷键(在每个文件头部的注释片段中更改)
官方的文件编码有点儿乱，修改官方js的时候，请注意编码问题，修改不当会造成相关功能的丢失；

DreamWeaver

好消息是，现在已经有了Zen coding for DreamWeaver插件，坏消息是，该插件支持的功能很少，只支持展开缩写功能。而且默认的快捷键是无效的。只能在“命令”菜单中点击操作。另外，没有测试该插件是不是只支持CS4版本。不过比较好的是，作者将本插件的源码也放出了，你可以自定义一个Dreamweaver的插件。

事实上，官方的DW插件在Windows下有点儿bug，就是会出现空白的行，我简单的修正了下，重新编译了个包，在本机测试没问题，感兴趣的童鞋可以下载尝试：http://www.boxcn.net/shared/c71z7x7sfe

PS:官方的DW插件已经更新，推荐到官方去下载。新的插件添加了更多的功能支持。UPDATE @ 12-23-2009

特别推荐：豪情同学将缩写给实践了一番，总结出了很多很棒的用例，推荐大家前去学习。

notepad++结合Zen Coding快速编写HTML代码

经朋友介绍认识了Zen Coding一款快速编写HTML代码的插件，然后在google搜索一下其使用，让在下激动不以，今天特意写了一篇blog来跟大家一起分享。

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代码，我们先来看一个简单的实例，首先在你的编辑器中输入下面一句代码

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等，例如我们在编辑中输入：

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