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