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

其他学习资源：

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

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