1.zen-coding是一款用于高效开发HTML和CSS的插件。
2.网址介绍:
zen-coding的项目首页:
http://code.google.com/p/zen-coding/
zen-coding的下载所支持的软件:
http://code.google.com/p/zen-coding/downloads/list
zen-coding的微维基列表:
http://code.google.com/p/zen-coding/w/list
3.zen-coding软件支持:
下载(完全支持):
Aptana(跨平台)
Coda,via TEA for Coda(Mac)
Espresso,via TEA for Espresso(Mac)
下载(部分支持,只支持"展开缩写")
TextMate(Mac)
TopStyle
Sublime Text
GEdit
Dreamweaver CS5
editArea在线编辑
4.zen-coding语法
知识要点:
(1)常用的缩写和HTML标记
(2)通过>+等创建不同层次结构的标记
(3)了解#id,.class,[title]选择器
(4)*N和$*N循环以及$$$补零
快捷键:
Ctrl + E 展开缩写
Ctrl + / 添加注释,再次操作取消注释
Ctrl + Alt + ] 跳到下一个编辑点
Ctrl + Alt + [ 跳到上一个编辑点
Ctrl + Shift + A 嵌套代码
缩写操作(常用):
(1)建立html格式文件:
html:xt
html:xs
html:xxs
html:5
(2)ie注释语句:
cc:ie6
cc:ie
cc:noie
(3)标签类(HTML常使用)
a
a:link
a:mail
a:link[title]
link
link:css
link:print
link:favicon
style
script
script:src
form
form:get
form:post
label
input
input:t
input:t[name="user"]#user
input:p
input:r
input:c
input:s
input:reset
input:b
ul+
ol+
dl+
(4)标签类(CSS常使用)
pos:s
pos:r
pos:f
pos:a
t
t:a
l
l:a
b:a
r:a
fl:n
fl:r
fl:l
m
m:a
m:4
ml
mr
mt
mr
p
pl
pt
pr
pb
fz
fw
fw:b
fs
fs:i
ta:c
td:n
ov:h
ov:a
ov:s
d
d:b
d:i
w
w:a
h
h:a
lh
maw
miw
mah
mih
bd
bdw
bdc
bds
bdc
bdt
bdw
bdl
bd+
bg
bgc
bgi
bgp
bga
bg+
4.zen-coding的小例子
缩写的代码:
html:xt>(div#wrapper.wrapper1.wrapper2[title="wrapper"]>div#header>h1#logo[title="Zen Coding"]+ul#nav>li.item-0$*5>a[title])+(div#content>div#col$*3)+(div#footer>p#copyright)
展开的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Zen Coding</title>
</head>
<body>
<div id="wrapper" class="wrapper1 wrapper2" title="wrapper">
<div id="header">
<h1 id="logo" title="Zen Coding"></h1>
<ul id="nav">
<li class="item-01"><a href="" title=""></a></li>
<li class="item-02"><a href="" title=""></a></li>
<li class="item-03"><a href="" title=""></a></li>
<li class="item-04"><a href="" title=""></a></li>
<li class="item-05"><a href="" title=""></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</div>
<div id="footer">
<p id="copyright"></p>
</div>
</body>
</html>