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:get

• 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代码。

其他学习资源：

/article/4789219.html

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