快速编写HTML、CSS代码利器－－Zen Coding

原文：http://www.appinn.com/zen-coding/

在小众软件上发现的此插件，看起来不错。

官方演示视频：Zen CSS 和 Zen HTML。另外，缩写的含义请看：Zen CSS Properties 和 Zen HTML Elements，各种插件的安装方法请看官方 wiki。

先举一个复杂的例子：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 Coding 分为 Zen HTML 和 Zen CSS 两部分。这两部分功能是以插件的形式来实现的。如果你用 NetBeans、SlickEdit、Sublime、TextMate、TopStyle、UltraEdit、EDITPLUS、WebIDE and IntelliJ IDEA、Dreamweaver、Aptana 都可以在官方下载页面找到相关的插件。

即使你不使用上面提到的编辑器，那么还有一种选择，点击下载页面的最后一个链接： Zen Coding for <textarea>。这是一个网页版的 Zen Coding！打开 example.html 之后，把光标定位到文本框里面，按下 Ctrl + E 试试吧。

网页版快捷键说明：

1. Ctrl + E：展开代码
2. Ctrl + D：向外快速选中代码块
3. Shift + Ctrl + D：向内快速选中代码块
4. Shift + Ctrl + A：输入一个缩写，自动展开并包围所选代码
5. Ctrl + Alt+→ ：光标智能跳转到下一个编辑点（自己试试就知道多体贴了）
6. Ctrl + Alt+←：光标智能跳转到上一个编辑点
7. Ctrl + L：选择一行

 

最后提醒一点：在这个墙外的官方演示视频(高清)中，墙内观看地址，还出现了自定义缩写的演示。具体设置过程请参考官方 wiki。

下载：官方网站

P.S. 前端观察已经写了详细的教程 Zen Coding:快速编写 HTML/CSS 代码