Zen Coding: 一种快速编写HTML/CSS代码[译]（3）
作者：神采飞扬 来源：前端观察 发布时间：2009-12-16 12:53:00
元素类型
Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用\n 和\t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。
有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: <a href=”"></a>。当Zen Coding被加载后，它会解析一个标签定义到一个描述该标签的名字、属性(包括它们的顺序)以及该标签是否为空的特定的对象中。所以，如果你写<img src=”" alt=”" />，你会告诉Zen Coding这个标签必须是空的，然后“扩展缩写”行为就会在输出之前为它使用特定的规则。
对于片段和缩写，你可以添加一个管道符号，它告诉Zen Coding当缩写被展开的时候光标会被定位到哪里。默认的，Zen Coding 将光标放在空属性的引号中间以及开始和关闭标签的中间。
例子
那么，这里解释一下当你写了一个缩写并召唤“展开缩写”行动时发生的事情。首先，它将一个完整的缩写分开为独立的元素：这样div>a 会被分成div 和a 元素，当然也会维持他们的关系。然后，每个元素，解析器先在代码片段内而后在缩写中寻找定义。如果它找不到，将会使用元素的名字作为新的标签，并为其添加缩写中定义的id和class。比如，如果你写mytag#example，解析器在片段或缩写中找不到mytag定义，它就会输出<mytag id=”example”><mytag>。
我们制作了很多默认的CSS和HTML缩写和片段。你会发现学习使用Zen Coding可以增加你的生产力。
HTML 标签对匹配器
对于HTML编码者的另一个非常常见的任务是寻找一个元素的标签对。例如你想选择整个<div id=”content”>标签并将其移动到其它地方或者删除它。或者有可能你在寻找一个关闭标签并想知道它属于那个开始标签。
不幸的是，很多现代的开发工具在该功能方面有所欠缺。那么我就决定写一个我自己的标签对匹配器作为Zen Coding的一部分。不过它依然在beta阶段并尚存一些问题，但它可以工作的很不错并很快。不是浏览整个文档(像通常的那种HTML标签对匹配器的做法)，它从光标的当前位置开始寻找相关的标签。这使得它非常快并且上下文无关：它甚至可以用于这段JavaScript代码片段：
var table = '<table>'; for (var i = 0; i < 3; i++) { table += '<tr>'; for (var j = 0; j < 5; j++) { table += '<td>' + j + '</td>'; } table += '</tr>';}table += '</table>';
0
投稿猜你喜欢
在Web开发的时候，经常会遇到的一种情况就是浏览器提示脚本运行时间过长，停止还是继续，无论你选择什么，相信你都会想尽一切办法让这个对话框远离- 上次介绍了Access 导入 MSSQL 2000/2005 数据库工具，不过，在使用这个工具时还是有一些地方需要注意的，我把整个导入过程记
- 清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面
- '去掉字符串头尾的连续的回车和空格 function trimVBcrlf(str) tr
- 在对浏览器兼容性要求越来越高的时候，大家是否正在寻找一个完整的解决方案呢？继《[原]最新CSS兼容方案》之后，更新的CSS hack出炉啦，
- 可以使用 XDR（简化 XML-Data）架构创建关系数据的 XML 视图。然后可以使用 XPath 查询来查询这些视图。这类似于使用 CR
- 费茨法则是人机交互领域里一个非常重要的法则，在10年来得到了广泛的应用。Fitts法则最基本的观点就是任何时候，当一个人用鼠标来移动鼠标指针
- 因客户需求，要把数据库里的索引编号做成五位长度的，且能自动累加编号，我只会在SQL中使用Identity自动编号：Create Table
- 通过《SQL Server 数据库备份和还原认识和总结（一）》，相信您对数据备份和还原有了一个更深入的认识，在上文中我没有对事务日志做剖析，
- CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。1. box-shadow属性的浏览器兼容性先
- 在后台处理数据时，前台页面同时计数显示进度条Proess Bar使用了layer来显示用法：1。引用<script lang
- LearningjQuery.com 博客帖子列表的左边有一个很酷的日期，如图：从图中我们看到，“2009”垂直排列在右侧。用Firebug
- facebook的信息架构设计，是目前为止互联网上我见过的最合理的信息架构。每次培训，我基本都需要拿20分钟左右的时间来解析它，包括老的、新
- 现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般
- 数据库技术是计算机科学中发展最快的领域之一，数据库的诞生和发展给计算机信息管理带来了一场巨大的革命。数据库的诞生和发展给计算机信息管理带来了
- 把程序重新写了一遍，日期下拉选择器，可自定义日期范围。使用了一个技巧获取指定月份的天数。演示页面：DateSelector.htm 程序代码
- <script>function getJsFile(url, callBack){
- 要想从命令行启动mysqld服务器，你应当启动控制台窗口(或“DOS window”)并输入命令：C
- 在IE下，获取Param的时候有个诡异现象（不知道算不算bug）。为了清晰起见，下面用最简单的HTML和JavaScript来说明。有这么一
- ［前言］：搭往公司的班车，遇到其他部门的同事，他问了很多关于我的工作的问题，由此引发这篇文章。这些问题，我也经常被其他人问到，其中既有我们亲
