写HTML和CSS的新方法

Zen Coding 一个用来简化编写 HTML，XML， XSL （或是其它一些诸如此类格式的编辑器）。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML，很像CSS语法。下面是一个例子：

div#page>div.logo+ul#navigation>li*5>a

展开后会成为下面这个样子：

<div id="page">
        <div></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

可以看出来，#代表ID，>代表下一层。

如果你写下：

select>option#item-$*3

那么将会得到：

<select>
	<option id="item-1"></option>
	<option id="item-2"></option>
	<option id="item-3"></option>
</select>

看上去很不错吧。目前，其支持如下的编辑器：

• AptanaHowToEn
• TextMate (Mac). Available in two flavors: basic snippets (Zen HTML and Zen CSS) and full-featured plugin (ZenCoding for TextMate). _{Bundles > Zen Coding menu item}
• Coda (Mac) — external download, via TEA for Coda. _{Plug-ins > TEA for Coda > Zen Coding menu item}
• Espresso (Mac) — external download, via TEA for Espresso. Zen Coding is bundled with Espresso by default, but you should upgrade ZC to latest version. _{Actions > HTML menu item}
• Komodo Edit/IDE (crossplatform) — external download. _{Tools > Zen Coding menu item}
• Notepad++ (Windows). _{Zen Coding menu item}
• PSPad (Windows). _{Scripts > Zen Coding menu item}
• <textarea> (browser-based). See online demo.
• editArea (browser-based). See online demo.

还有下面这些第三方的插件：

• Dreamweaver (Windows, Mac)
• Sublime Text (Windows)
• UltraEdit (Windows)
• TopStyle (Windows)
• GEdit (crossplatform) — Franck Marcia’s plugin, Mike Crittenden’s plugin
• BBEdit/TextWrangler (Mac) — external download
• Visual Studio (Windows) — external download