title: 434.写HTML和CSS的新方法
outline: deep
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.
还有下面这些第三方的插件：