Zen-coding–高效的XHTML/CSS代码扩展插件

只要你对CSS的选择器比较熟悉，就可以利用简短的类似于CSS选择器的代码高效的编写出XHTML代码。

象这样一句简短的代码：(div#hea>h1#title>a)就可以快速的扩展成下面这段XHTML代码：

    # 

这是怎么实现的？在没搞清楚这是怎么回事的时候，你可能会相当迷惑。没关系，先看看下面的在线演示，感受下zen-coding的强大之处：

查看演示

将鼠标的光标移动到你看到的那句代码的末尾然后按"Ctrl+,"(此处的快捷键在各编辑器中都不同，在这里是Dreamweaver中的快捷键，Notepad++的快捷键是"Ctrl+E")就可以看到变化了。

是不是有点奇怪，没错，就是这么"神奇"，这个功能同样可以在你的编辑器中使用，当然，前提是你得安装zen-coding这个插件。

zen-coding的下载地址：http://code.google.com/p/zen-coding/downloads/list

下载与安装：

下载与你的编辑器相对应的版本，zen-coding支持很多常见的编辑器，比如Notepad++,Dreamweaver,Aptana。Notepad++5.6.8和Dreamwaver CS5我都测试过，感觉不错。如果你是使用Notepad++的话需要把下载的插件解压到Notepad++的plugins目录下面，然后重新启动就可以看到在菜单栏多了一项Zen Coding。而如果你使用的是Dreamwaver，安装成功后会在命令菜单下多出一项Zen Coding。

如何使用？

zen-coding的使用其实很简单，先看看简单的一些写法：

div#mod