写HTML和CSS的新方法#

原文：酷壳 – CoolShell · 陈皓 · 2010-05-11 · 11,768 人阅读

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
• (browser-based). See online demo.
• editArea (browser-based). See online demo.