Editplus中Zen Coding手册

前面我介绍了一款优秀的代码编辑器Editplus，并且重点介绍了一下Zen Coding。但是Editplus最新版中包含了Zen Coding的功能，但是无论是帮助文档，还是官方的文档都缺少帮助文档。还好Zen Coding项目的帮助文档非常的丰富。我整理并测试了一下，Editplus基本实现了Zen Coding的所有的功能。

如果你已经下载了最新版的Editplus或你的Editplus支持Zen Coding，那么你就点击下面的几个链接去学习使用。

• 编辑HTML http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
• 使用选择器 http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
• 编辑CSS http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
• 使用Filter过滤器 http://code.google.com/p/zen-coding/wiki/Filters
• 下载Cheatsheet http://code.google.com/p/zen-coding/wiki/CheatSheets

你学习了上面的一些资料以后，你需要知道以下一些内容。

1. 常用的缩写或HTML标记
2. 通过>+等创建不同层次结构的标记
3. 了解#id、.class、[title=""]和{内容}，还有|e管道过滤器等
4. *N和$*N循环以及$$$补零等

还需要了解Editplus的一些快捷键才能灵活自如的运行这项功能。

Expand Abbreviation  展开缩写

Ctrl + E

Next Edit Point  跳转到下一个编辑点

Ctrl + Alt + ]

Previous Edit Point  跳转到前一个编辑点

Ctrl + Alt + [

Toogle Comment  添加一个注释

Ctrl + /

最后我们通过一个简单的示例来结束本文。

1. 新建一个文档保存为YOUR-FILENAME.html
2. 输入html:5后Ctrl+E（如果你是基于模板新建的，可以省略这一步）
3. 在Body里面输入 div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer 后Ctrl+E展开

第3步展开后的代码如下所示：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div id="page">     <div id="header">         <ul id="nav">             <li><a href=""></a></li>             <li><a href=""></a></li>             <li><a href=""></a></li>             <li><a href=""></a></li>         </ul>     </div>     <div id="page">         <h1><span></span></h1>         <p></p>         <p></p>     </div>     <div id="footer"></div> </div>