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>
<ul>
<li><a href=""><span>About Us</span></a></li>
<li><a href=""><span>Products</span></a></li>
<li><a href=""><span>News</span></a></li>
<li><a href=""><span>Blog</span></a></li>
<li><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+?
定位匹配对
这些快捷键是可以自定义的。
在线演示你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。
Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持) 中文版演示 支持的编辑器Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。
如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。
完全支持 Aptana (跨平台); Coda, via TEA for Coda (Mac); Espresso, via TEA for Espresso (Mac); 部分支持(只支持“展开缩写”) TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代); TopStyle; Sublime Text; GEdit; Dreamweaver CS4 editArea在线编辑器; Zen Coding在线编辑器中文版