一种快速编写HTML/CSS代码的方法 使用仿CSS选择器的语法来快速开发HTML和CSS
——由Sergey Chikuyonok开发。
Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。
展开缩写
展开缩写功能将类似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选择器。
元素类型Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。
有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: 。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。
对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。
使用缩写包裹
这真的是一个很酷的特性，它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug？或者你需要添加一个装饰，比如一个背景图片或者边框到一个块级内容？你必须写开始标签，临时打断你的代码，找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。
该功能相当简单：它要求你输入缩写，然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本，它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置：标签的内容里面或者是开始和关闭标签中间。依赖于它的位置，它会包裹标签的内容或标签本身。
缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字，比如：ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候，它会将它作为一个重复元素：你的章节中有多少行，它就会输出多少次，并将每行的内容放到重复元素的最后一个子元素里面。
支持的编辑器
Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。
如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。
编写实例
CSS缩写形式：
div#page>div.logo+ul#navigation>li*5>a
-
zen-coding的语法 zen-coding又名emmet，对于前端程序员使用它可以加快程序的编写，提高效率。 zen-coding(webstorm)安装： file -> settings -> plugins 点击搜索emmet，然后安装 zen-coding使用 例如： 输入：p.foo -> 点击tab键(只有点击
-
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 兄
-
二、zen-Coding的使用 zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。打开Notepad++编辑器，输入以下代码： div#name 然后接着按一下快捷键ctrl+E，就会自动生成如下的HTML代码： 1 <divid="name"></div> 接下来看一个更高效的例子 di
-
一直琢磨aptana3 的zenconding怎么安装 原先都用它本身带的那个 不会用 本人没接触过python也不懂 刚才突然想到可以以eclispe插件的方式安装不就可以了吗 然后去zen-coding的官网看了看 果然有地址 呵呵 记录下来 备用 以下摘录自官网： Installation Go to Help > Install New Software… in your Ecl
-
zen-coding 这个创造性的发明，在 WEB界绝对是引发了13级地震，搞网页设计的如果不懂点这种技术肯定是落伍啦。 但是 zen-coding 官方并没有提供 vim 插件。使用 vim 的用户可能会比较沮丧，这么想你就错了，vim这个非常多大牛使用编辑器怎么会错过这个 极品插件呢？ 于是 vim 官方出了一个 zen-coding 插件，不调用外部程序，响应速度更快，功能上面也比原版的 z
-
这里是一个支持的属性和操作符的列表： 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#fo
-
网页开发者通常要输入大量重复的标签和属性标记才能获得想要的效果，为了解决重复劳动的痛苦，Sergey Chikuyonok开发了Zen Coding，它是一组专门用来提高书写HTML和CSS代码速度的便利工具。将它整合进文本编辑器，可以提供一些功能和快捷方式，加快开发速度。提供包括Eclipse、IDEA、UltraEdit、SlickEdit的插件。
-
Zen Cart 是真正的电子商务艺术，一个免费、界面友好，开放式源码的购物车软件。该软件由一些销售商、程序员、设计师和顾问们共同开发，目的就是用户能建立风格不同的电子商务系统。现有的一些解决方案过重于编程，而不是着眼于客户的需求。Zen Cart 把销售商和购物者的需求放在第一位。同时，那些程序如果没有专业人员，几乎不可能安装成功，而一个有基本计算机知识的人就会安装 Zen Cart。另外那些程
-
Zen Grids 是直观，灵活的网格系统，包括易用的 Sass mixin 设置，可以应用到大量的布局中，包括响应式，自适应，流体和固定宽度的布局。
-
Zen 是一个基于 Debian 的发行版，主要用于实现 TCP 的负载均衡。可通过定制的脚本来检查后端的运行状态，通过创建 Zen 集群来实现高可用性。通过 rrd 监控服务器状态，使用基于 HTTPS 的界面进行轻松的性能管理、配置和路由表配置等等。
-
Zen-Cart-Bitcoin-Payment-Module 是 Zen-cart 电商软件的比特币支付模块。
-
举个简单例子，在index.html里 输入link，然后tab键，就会生成下面的代码 <link rel="stylesheet" href=""> 连续输入类和id，比如p.bar#foo，会自动生成： <p class="bar" id="foo"></p> 输入h1{foo}和a[href=#]，就可以自动生成如下代码： <h1>foo</h1> <a href="#"></a> 写htm