3、adimMakeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。ZenCoding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。 查看视频：http://v.youku.com/v_show/id_XMTM4NDQwNzgw.html 注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费

4、尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：Demo·Demo(使用Ctrl+,展开缩写，需要JavaScript支持)·中文版演示下载(完全支持)·Aptana(跨平台)

5、;·Coda,viaTEAforCoda(Mac);·Espresso,viaTEAforEspresso(Mac);下载(部分支持，只支持“展开缩写”)·TextMate(只能用于Mac机,Windows可以使用E-text编辑器替代);·TopStyle;·SublimeText;·GEdit;·DreamweaverCS4·editArea在线编辑器;·ZenCoding在线编辑器中文版现在让我们看一下这些工具是如何工作的吧。展开缩写展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难

6、以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。这里是一个支持的属性和操作符的列表：·E元素名称(div,p);·E#id使用id的元素(div#content,p#intro,span#error);·E.class使用类的元素(div.header,p.error.critial).你也可以联合使用class和idID:div#

7、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);正如你能看到的，你已经知道如何使用ZenCoding了：只是些一个简单的仿CSS选择器(呃，“缩写”抱歉)，就像这样…div#header>img.logo+ul#nav>li*4>a…然后调用”展开缩写”行

8、为。这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个