写HTML和CSS的新方法

首页 > Web开发, 杂项资源 > 写HTML和CSS的新方法

2010年5月11日陈皓发表评论阅读评论 1,521 次点击

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

分类: Web开发, 杂项资源标签: CSS, HTML, Zen

(3 人打了分，平均分： 5.00 )

Loading ...

2009年12月15日 -- Web中的省略号
2009年11月17日 -- 9个最常见IE的Bug及其fix
2009年06月04日 -- 18个Web开发的IDE
2009年05月19日 -- Web设计的速查卡
2009年04月17日 -- 30种时尚的CSS网站导航条
2010年09月09日 -- 你准备使用 HTML 5 吗？
2010年08月23日 -- 两个教程：Socket和HTML5

评论 (13) Trackbacks (1) 发表评论 Trackback

dutor

2010年5月11日09:40 | #1

回复 | 引用

Vim?
青珑

2010年5月11日10:16 | #2

回复 | 引用

这种风格自己写就要吐血了，别说给别人看了。
eddix

2010年5月11日10:22 | #3

回复 | 引用

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

2010年5月11日10:50 | #4

回复 | 引用

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

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

2010年5月11日13:49 | #5

回复 | 引用

你可以试试 haml & sass
website: haml-lang.com
SomeOne

2010年5月11日14:39 | #6

回复 | 引用

http://www.appinn.com/zen-coding/
liuchangit

2010年5月11日23:07 | #7

回复 | 引用

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

2010年5月13日21:17 | #8

回复 | 引用

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

2010年5月18日23:26 | #9

回复 | 引用

很好的插件，很高兴的看到支持我平时用的NetBeans，看来必须要试试看了。谢谢推荐。
poly

2010年5月31日11:36 | #10

回复 | 引用

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

2010年5月31日11:39 | #11

回复 | 引用

好吧～当你看到我在“fuckIe6”的时候，应该大概能猜到我想写什么……
iqueen

2010年6月29日09:57 | #12

回复 | 引用

@poly
猜不到
beordle

2010年7月14日10:41 | #13

回复 | 引用

有一處錯誤吧，首個例子中的div.logo展開後應該是吧。