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
投稿猜你喜欢
- 1. 游戏是更注重于体验的产品，所以应该将游戏本省做得更加炫动和增加参与感觉。2. 网络游戏和单击游戏的区别在于社会化的添加，所以运用好这样
- 在mysql数据库开发中，我们有时候需要复制或拷贝一张表结构和数据到例外一张表，这个时候我们可以使用create ... select ..
先声明一下，这是本人在某个项目中用到的，本人自己写的，如有雷同纯属巧合。同时也欢迎高人指正。这种星级的投票效果很常见，但是目前线上大多都是通- 大家好，今天跟大家分享一个用Python实现的学生学籍管理系统：该代码主体由五个函数组成：1.add_stu() 添加2.del_stu()
- 写在前面的话:此篇还是asp相关的,相信玩ASP的都有这个感觉,当数据有5万多条时-------just like音乐网,要调用最新的10条
- 案例一：某套图网站，套图以封面形式展现在页面，需要依次点击套图，点击广告盘链接，最后到达百度网盘展示页面。这一过程通过爬虫来实现，收集百度网
- 概述全链接层 (Fully Connected Layer) 会把一个特质空间线性变换到另一个特质空间, 在整个网络中起到分类器的作用.ke
- 最近在使用爬虫爬取数据时，经常会返回403代码，大致意思是该IP访问过于频繁，被限制访问。限制IP访问网站最常用的反爬手段了，其实破解也很容
- 对于一个初级学习python的人，这将是一个非常简单而有趣的内容；代码非常简单，主要是：随机函数–需要导入random模块与条件语句的一个简
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 1.彻底弄懂CSS盒子模式一(DIV布局快速入门) 2.彻底弄懂CSS盒子模式二(导航栏实例) 4.彻底弄懂CSS盒子模式四(绝对定位和相对
- 相信大家都用过浏览器的翻译网页功能，例如对于下图这个英文网页：一键翻译成中文以后是这样的：你可能会觉得这个功能很简单，不就是字符串替换吗？那
- “你不必严格遵守这些原则，违背它们也不会被处以宗教刑罚。但你应当把这些原则看成警铃，若违背了其中的一条，那么警铃就会响起
- 第五个页面name="changenick.php" <? include &q
- 前言当我们需要对列表（list）、元组（tuple）、字典（dictionary）和集合（set）的元素进行遍历时，其实Python内部都是
- 访问phpmyadmin时总是出现 “无法载入 mysql 扩展，请检查 PHP 配置”。
- 之前对mac os系统自带的python进行了升级，结果发现新安装的python的site-packages目录并没有加到python的系统
- SQL Server推荐使用 SET 而不是 SELECT 对变量进行赋值。当表达式返回一个值并对一个变量进行赋值时，推荐使用 SET 方法
- 根据用户权限设定用户可以访问哪些页面，用django实现一个简单的demo。1.models.py 文件class level(models
- 两列布局的定宽自适应已经详解了，三列浮动中有两列定宽一列自适应的也详解了，那么该说说三列浮动中两列自适应一列定宽的布局了。中间定宽，左右两侧
