Zen Coding- 一个书写HTML跟CSS代码的方法

Zen Coding 是一个高速书写HTML XML XSL(或者其他结构化代码格式)的编辑器插件，核心功能是功能强大的“缩写引擎” 可以根据你输入的公式自动生成HTML代码，

例子：

输入zen coding 代码公式 ： div#page>div.logo+ul#navigation>li*3>a

在textmate下的执行快捷键是 ⌘+E

执行后为：

点击查看更多关于zen coding 的语法

“缩写引擎”  拥有模块化结构，允许你在不同的语言上扩展公式。zen coding 现在支持的语言有：CSS, HTML, XML/XSL 和 HAML(需要 filters 支持)

—————————————————————————————

“缩写引擎” 目前支持的功能：

1. ID跟CLASS属性：div#page.section.main
2. 自定义属性: div[title]，a[title="Hello world" rel], td[colspan=2]
3. 同时生成N个元素： li*5 会生成5个li 标签
4. 使用$字符生成递增数字元素： li.item$*3  生成
5. 使用多个$字符生成多位数列：  li.item$$$ -> li.item001
6. 无限制嵌套公式支持：div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
7. 支持 Filters
8. div 标签可以省略，直接从id或者是class开始 #content>.section is the same as div#content>div.section.

可以观看 视频 跟 Smashing Magazine 上的 教程

官方支持的编辑器：

1. Aptana/Eclipse
2. Textmate
3. Coda
4. Espresso
5. Komodo
6. Notepad++
7. PSPad
8. <textarea>(基于网站的编辑器) DEMO
9. editArea (基于网站的编辑器) DEMO

点击查看官网