Zen | 酷 壳 - CoolShell https://coolshell.cn 享受编程和技术所带来的快乐 - Coding Your Ambition Sun, 09 May 2010 16:40:06 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.2 写HTML和CSS的新方法 https://coolshell.cn/articles/2406.html https://coolshell.cn/articles/2406.html#comments Tue, 11 May 2010 00:18:19 +0000 http://coolshell.cn/?p=2406 Zen Coding 一个用来简化编写 HTML，XML， XSL （或是其它一些诸如此类格式的编辑器）。其主要是用一种缩写方式的语法来书写大量重复和无味的HT...

Read More Read More

The post 写HTML和CSS的新方法 first appeared on 酷 壳 - CoolShell.]]>

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.

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

（转载本站文章请注明作者和出处 酷 壳 – CoolShell ，请勿用于任何商业用途）

相关文章

The post 写HTML和CSS的新方法 first appeared on 酷 壳 - CoolShell.]]> https://coolshell.cn/articles/2406.html/feed 20