本文共 995 字,大约阅读时间需要 3 分钟。
无视了编辑器的自动提示和自动完成,秒杀了你自定义的各种快捷键或者 AHK 的热字符串,以智能简洁高效的缩短输入,带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验。
下面的动态演示图,只是它强大功能的一部分而已。
先举一个复杂的例子:zen-coding 可以把这样的代码:div#header>ul.navigation>li*4>a,变成下面的 HTML 代码
<div id=”header”>
<ul class=”navigation”> <li><a href=”"></a></li> <li><a href=”"></a></li> <li><a href=”"></a></li> <li><a href=”"></a></li> </ul></div>
看到这熟悉的语法结构,会 CSS 的朋友一定会惊声尖叫!最妙的是那个“*4”,直接生成 4 个 li 代码了。没错, 就是这样牛叉的东西, 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。
即使你不使用上面提到的编辑器,那么还有一种选择,点击下载页面的最后一个链接: Zen Coding for <textarea>。这是一个网页版的 Zen Coding!打开 example.html 之后,把光标定位到文本框里面,按下 Ctrl + E 试试吧。
网页版快捷键说明:
官方演示视频: 和 。另外,缩写的含义请看: 和 ,。
最后提醒一点:,,还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。
下载:
P.S. 前端观察已经写了详细的教程
转载地址:http://tukvi.baihongyu.com/