写HTML和CSS的新方法

写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 CodaPlug-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 downloadTools > 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微信公众账号可以在手机端搜索文章

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

——=== 访问 酷壳404页面 寻找遗失儿童。 ===——
好烂啊有点差凑合看看还不错很精彩 (3 人打了分,平均分: 5.00 )
Loading...

写HTML和CSS的新方法》的相关评论

  1. 以前看过视频,总的来说还不错,但是看到伊还支持TextMate我就笑了……难道它比TextMate内置的Snippets更有优势?

  2. 现在需要手写HTML的情况不多了吧。

    在做Web项目时,写模板需要用到手写HTML,但,那种情况里面还有其它一些非HTML标签。所以,我觉得各位可以根据这个思路,对它做自己的扩展,这样,用起来感觉应该很不错 :D

  3. 很有趣的东东,像CSS选择器或XPATH语法,这种简洁紧凑的写法应该比较受linux爱好者欢迎。
    不过这东西的实用性我比较怀疑,现如今做web开发都是动态页面,各种框架、表达式语言大行其道,似乎很少有写纯HTML的。这东西能和此类框架密切结合吗?

  4. 我倒不质疑他的实用性,也不在意写不写纯html的东西,这种zip code确实在制作中减少一些重复工作。
    比如,导航10多个li
    学起来相当容易,支持的编辑器也多。
    还是不错的。

  5. 去年开始接触,习惯后非常好用~
    可以自定义代码片段~
    于是当我想写“
    的时候只用敲入:“fuckIe6”就可以了……

发表评论

电子邮件地址不会被公开。 必填项已用*标注