Zen Coding: 一种快速编写HTML/CSS代码[译](4)
作者:神采飞扬 来源:前端观察 发布时间:2009-12-16 12:53:00
使用缩写包裹
这真的是一个很酷的特性,它将缩写和标签对匹配器的功能合并到一起了。你有多少才发现你需要添加一个包裹元素以修正一个浏览器bug?或者你需要添加一个装饰,比如一个背景图片或者边框到一个块级内容?你必须写开始标签,临时打断你的代码,找到相关的点然后关闭标签。这就是“使用缩写包裹”能帮助你的地方。
该功能相当简单:它要求你输入缩写,然后执行适当的“展开缩写”行动并将你期望的文本放到你缩写的最后一个元素里面。如果你没有选择任何文本,它就会启动标签对匹配器并使用结果。它同样能搞清楚你的光标的位置:标签的内容里面或者是开始和关闭标签中间。依赖于它的位置,它会包裹标签的内容或标签本身。
缩写包裹为包裹个别行引入了一个特定的缩写句法。简单跳转到倍增操作符后面的数字,比如:ul#nav>li*>a。当Zen Coding 发现一个使用未定义的倍增数的时候,它会将它作为一个重复元素:你的章节中有多少行,它就会输出多少次,并将每行的内容放到重复元素的最后一个子元素里面。
如果你在这段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:
About UsProductsNewsBlogContact Up
你将会得到以下结果:
<div id="header"> <ul id="navigation"> <li class="item1"><a href=""><span>About Us</span></a></li> <li class="item2"><a href=""><span>Products</span></a></li> <li class="item3"><a href=""><span>News</span></a></li> <li class="item4"><a href=""><span>Blog</span></a></li> <li class="item5"><a href=""><span>Contact Up</span></a></li> </ul></div>
你可以看到,Zen Coding是一个强大的文本处理工具。
快捷键
Ctrl+,
展开缩写Ctrl+M
匹配对Ctrl+H
使用缩写包括Shift+Ctrl+M
合并行Ctrl+Shift+?
上一个编辑点Ctrl+Shift+?
下一个编辑点Ctrl+Shift+?
定位匹配对
这些快捷键是可以自定义的。
在线演示
你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢?因为Zen Coding是用纯JavaScript开发并迁移到Python,它甚至可以用于浏览器内部,这令它成为引入到CMS的首选。
支持的编辑器
Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件:它获取文本、做一些处理并放回新的文本(或索引,用于标签匹配)。Zen Coding由JavaScript和Python编写,所以它实际上可以运行于任何平台。在Windows,你可以运行JavaScript版本,而Mac和Linux 分支可以使用Python版。
如果让你的编辑器支持Zen Coding,你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如,TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能,但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。
完全支持
Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);
部分支持(只支持“展开缩写”)
TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
Aptana是我主要的开发环境,它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具,所以任何一个新的Zen Coding版本都将会首先对Aptana可用,然后部署到Python并兼容其它的编辑器。
Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持,由Ian Beck开发。原始的源代码在GitHub上,但我还是制作了我自己的分支以整合Zen Coding的特性。
猜你喜欢
- 1. 鼠标的哪个按键被点击?<html><head><script type="text/javas
- 在默认情况下,大多数浏览器都会将有序列表中的数字序列的与其列表文字内容显示为相同的字体。这篇快速教程将教你如何使用有序列表(ol)和段落(p
- 第一步肯定是打上SQL SERVER最新的安全补丁.如果这一步都没有做好,那我们也没有继续下去的必要了。 第二步是修改默认的1433端口,并
- 一、Browser Capabilities组件 该组件最主要的作用是:提取识别客户端浏览器的版本信息。其原理是这样的:当客户端浏览器向服务
- 公司网站后台使用的eWebEditor来添加发布新闻之类的,但把电脑的IE升级到8之后一直没办法添加附件之类的,症状就是在点击编辑器按钮时就
- MySQL是中小型网站普遍使用的数据库之一,然而,很多人并不清楚MySQL到底能支持多大的数据量,再加上某些国内CMS厂商把数据承载量的责任
- 如何显示已在数据库编码了的相对应的记录?我做了一个歌曲库,在查询中使用了几个下拉菜单供选择条件用,如歌手的性别、区域、爱好等,由于选项太多,
- 老外真是聪明,这个方法也想得到,有兴趣的不妨试试,但是如果对方的服务器安全搞的很好的话,这个代码也许就不能用了,但不管怎么样,学习一下也是好
- 图形由json格式加载,可以灵活配置。下一步是完善用户的操作,做这个感觉还是蛮有意思的。呵呵。截图:部分源码:<script type
- 对比Google Chrome、IE来说,在Windows环境下,Firefox 3.5的启动速度非常慢,据说是因为Firefox 3.5从
- 时间格式化函数,代码简单但较实用代码很简单,谁都能看懂Function fmstr(str, str1, Lens) Dim str2For
- 我参与了IE7的开发过程,看到了在IE浏览器中形形色色使用MSXML的方法。显然有一些东西困扰着开发者:MSXML“混乱”的版本以及如何创建
- 1.客户端的主页面:<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"
- blankzheng的blog:http://www.planabc.net/经常有朋友问我,网站要在哪些浏览器上测试?要达到怎样的兼容?我
- 初学者可以看看。在的img标签有两个属性分别为alt和title,对于很多初学者而言对这两个属性的正确使用都还抱有迷惑,当然这其中一部分原因
- alert table 表名 add column 列名 alter table 表名 drop column 列名 eg: alter t
- 背景在吉日嘎拉的软件编程走火入魔之:数据库事务处理入门(适合初学者阅读)文章中关于MS SQL Server和Oracle对数据库事务处理的
- 1:构图图形的层次感图形和元素之间的层次感,可以在干扰视觉的同时,突出自身所想体现的主题,这种表现方式往往是比较直接而且有效的方式。我们所说
- 一、如何理解本条内容:一个“简单”和“复杂”的例子在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多
- 大家知道,Microsoft为了更好地预防恶意用户和攻击者的攻击,在默认情况下,没有将 IIS6.0 安装到 Windows Server