ZenCoding1种快速编写HTMLCSS代码的方法.docxVIP

Zen Coding 一种快速编写HTMLCSS代码的方法 译自：HYPERLINK /2009/11/21/zen-coding-a-new-way-to-write-html-code/Smashing Magazine 中文：HYPERLINK /zen-coding-a-new-way-to-write-html-code.htmlZen Coding: 一种快速编写HTML/CSS代码的方法 ? 在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由HYPERLINK /author/sergey-chikuyonok/Sergey Chikuyonok开发。 你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。 ? 在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。 但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写： div#contenth1+p …然后就可以看到这样的输出： div id=content h1/h1 p/p /div 有些迷惑吧？今天，我将向你介绍HYPERLINK /p/zen-coding/Zen Coding，一组用于快速HTML和CSS编码的工具。最初由HYPERLINK /2009/04/zen-coding-concept/Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。 ? 查看视频：HYPERLINK /v_show/id_XMTM4NDQwNzgw.html/v_show/id_XMTM4NDQwNzgw.html ? 注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：HYPERLINK /7405114 \t _blank/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：HYPERLINK /watch?v=ug84Ypwqfzk \t _blank/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。 如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件： Demo  HYPERLINK http://zen-coding.ru/demo/ Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)  HYPERLINK /zencoding/ 中文版演示 下载(完全支持)  HYPERLINK /p/zen-coding/downloads/detail?name=Zen.Coding-Aptana.v0.5.zip Aptana (跨平台); Coda, via  HYPERLINK /sergeche/tea-for-coda/downloads TEA for Coda (Mac); Espresso, via  HYPERLINK /sergeche/tea-for-espresso/downloads TEA for Espresso (Mac); 下载(部分支持，只支持“展开缩写”)  HYPERLINK /p/zen-coding/downloads/detail?name=Zen%20Coding%20for%20TextMate%20v0.3.1.zip TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);  HYPERLINK /p/zen-coding/downloads/detail?name=TopStyle.Zen.Coding.1.0.zip TopStyle;  HYPERLINK /p/zen-coding/downloads/detail?name=Sublime.Zen.Coding.1.1.3.zip Sub