Zen Coding: 一种快速编写HTML/CSS代码[译]
作者：神采飞扬 来源：前端观察 发布时间：2009-12-16 12:53:00
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。
你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。
在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。
但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写：
div#content>h1+p
…然后就可以看到这样的输出：
<div id="content"><h1></h1><p></p></div>
有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。
注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。
如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：
Demo
下载(完全支持)
Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);
下载(部分支持，只支持“展开缩写”)
TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
现在让我们看一下这些工具是如何工作的吧。
0
投稿猜你喜欢
- 使用MySQL进行数据库备份，有很正规的数据库备份方法，同其他的数据库服务器有相同的概念，但有没有想过，MySQL会有更简捷的使用文件目录的
这样做的好处是：利用表格来装载数据，不言而喻是最好的，你可以很灵活的为每个单元格定义样式。下面是具体的做法首先在photoshop设计一个效- 我们在建立一个大型网站的时候会有很多副页面框架模式，甚至一些细节元素都是相同的。但令人困扰的是更新它们却要费些周折，要一遍遍地反复更新每个页
- 今天在设置input的readonly属性遇到问题，上网查到下面的内容，作个标记。今天系统需要使用javascript 动态设置textbo
- 1 。打开您的Microsoft Visual Basic:点击确定,以下就按照蓝色的数字步骤.2 。修改工程名和类模块的名称:
- 利用XMLHTTP无刷新自动实时更新数据，2秒自动刷新一次,2秒取得一次数据.demo.htm 前台显示<script la
- 哎~工作忙死了！！！！！！今天在百度老年看到一个手写输入法，颇感新鲜。so把其框下！请不要用在商业用途，学习之用，版权百度所有。看代码！注：
- Instr函数与InstrRev函数大家都应该很熟悉，但是如果你看过《ASP * 站开发实践教程》，你应该注意一下。该书中介绍它们时是很有迷
- 看看下面：<％Set objQuery = Server.CreateObject("ixss
- 很多人在使用AJAX调用别人站点内容的时候,JS会提示"没有权限"错误，这是XMLHTTP组件的限制-安全起见禁止访问非
- ps:不曾想还有那么好用的方法。汗一个先。Div即父容器不根据内容自适应高度，我们看下面的代码：<div id="main&
- 今天闲逛在网上时，看到一个11px大小的字体，显示却很清晰，赶紧查看站点的CSS，这字体称叫做：PMingLiu。效果相当不错，相比于我们使
- 阅读上一篇：浏览器中的内存泄露 4.内存泄露的解决方案显式类型转换 首先说说最容易处理的情况 对于类型转换造成的错误，我们可以通过显式类型转
- 1、IIS为一个死循的执行过程设定执行时间（缺省为90秒）超时事件：<％response.buffer=true％><BO
- 网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI
- 一：什么是数据库镜像?Robidoux:数据库镜像是将数据库事务处理从一个SQL Server数据库移动到不同SQL Server环境中的另
- “点睛”的广告代码，很牛B，本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的，我看了大半天，楞是没有看出
- （1）OracleServiceSID 数据库服务，这个服务会自动地启动和停止数据库。如果安装了一个数据库，它的缺省启动类型为自动。服务进程
- 尽管有很多规范URL的标准，例如RFC 3987，但实际应用中却非常混乱。本文主要介绍浏览器发送URL到服务器的一些特性，作为开发和应用的参
- 常见的SQL问题：◆选择重复，消除重复和选择出序列有例表：empemp_no name age001 Tom 17002 Sun 14003
