html/xml/css开发利器------Zen Coding

Zen Coding是一个开源项目，支持各种文本编辑器，能迅速提高你的html/xml/css开发效率。

http://code.google.com/p/zen-coding/downloads/list

将zen Coding拷贝到你的文本编辑器目录下，重启就能在菜单栏中插件下找到Zen Coding选项。自己可以先熟悉一下快捷键。

当然，最重要的快捷键是：ctrl+E运行书写的语法。

在zen coding文件目录下， 有个zen coding.js文件。 里面记录了内容的转换，不必要完全记住这些快捷语法，关键掌握规律，it is easy。

Zen Coding语法解析：

? 输入文档:

? 文档标签：(这些都可以在那个js源代码里面去看,抓规律)

? html:4t html4过度

? html:4s 4严格

? html:xt xhtml1.0 过度

? html:xs 严格

? html:xxs xhtml1.1 过度

? html:5 html5

? 一些标签记录:

? 输入html，再按chtl+e，便会将他自动转换成标签。其他的标签都是类似的。

? 输入a:link, a:mail 能自动加上属性。

? input：b 就是button。

? from:post

? style

? script:src

? a:mail[aa="a"]

转换成<a href="mailto:" aa="aaa"></a>

? link:css

<link rel="stylesheet" type="text/css" href="style.css" media="all" />

? link:print

<linkrel="stylesheet" type="text/css" href="print.css" media="print" />

? 'ol+':简写的 'ol>li'。这种简写在符合标签里面用到。

<ol>
<li></li>
</ol>

? ul+：

<ul>
<li></li>
</ul>

? ul#aa #表示id名

? ul.aa.bb .表示应用的class

? ul>a >表示子元素

? ul*5 *表示5个ul标签

? ul$*5 $表示数字自增。这句就是创建ul1--ul5 五个标签。

? a>b+b +表示兄弟

<a href="">
<b></b>
<b></b>
</a>

? 实例解析:

? div#header+div.name.app+div#content>div#foot 综合实例。

? CSS标签：

? 也能像算术运算那样加上括号。可以自己将复杂的命令保存备用。

? 要在出现CSS的地方，如style标签内（要在head里面）。

? @i @import url(|)

? @m @media print {\n\t|\n}

? ! !important

? CSS属性：

? fl float

? fl：l float：left

? pos

? pl

其他的内容，自己看看那个zen coding.js代码。

其他学习资源：

http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html

http://baike.baidu.com/view/3371595.htm