Zen Coding - 写css html的超强工具

来源：互联网发布：vpn怎么修改域名编辑：程序博客网时间：2024/06/07 13:06

1. css

原来的p是padding，原zen为pos感觉太麻烦，所以缩减为pp，然后是其属性值。
ppa
position:absolute;

ppr
position:relative;

还有类似的：
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display:inline-block;
oh
overflow:hidden;

m
margin:;
mt
margin-top:;
mr
margin-right:;
ml
margin-left:;
mb
margin-bottom:;
p
padding:;
pt,pr,pb,pl同margin
bg
background:url() 0 0 no-repeat;
bg:n
background:none;
bg:x
background:url() 0 0 repeat-x;
bg:y
background:url() 0 0 repeat-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
b
border:1px solid #000;
bd:n
border:none;
bdc
border-color:#000;
c
color:#000;
d
display:block;
f
font-size:12px;
h:;
height:;
w
width:;
d:i
display:inline;
d:b
display:block;
fl
float:left;
fr
float:right;
cl
clear:both;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
top:;
bt
bottom:;
r
right:;
l
left:;
r
right:;
z
z-index:;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align:left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text-outline:none;
whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
opacity:;
c:p
cursor:pointer;

2. html

综合类：
div#a+div#b+div.c-$*5+li*10

<div id="a"></div><div id="b"></div><div class="c-11"></div><div class="c-22"></div><div class="c-33"></div><div class="c-44"></div><div class="c-55"></div><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>

div#width>p#a>p#a>p*10>p#a

<div id="width">    <p id="a">        <p id="a">            <p>                <p id="a"></p>            </p>            <p>                <p id="a"></p>            </p>        </p>    </p></div>

ul#a>li.c-$*5+li.0>a.title

<ul id="a">    <li class="c-1"></li>    <li class="c-2"></li>    <li class="c-3"></li>    <li class="c-4"></li>    <li class="c-5"></li>    <li class="0"><a href="" class="title"></a></li></ul>

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title></title>
    <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
    aaa
</body>
</html>
cc:ie6

cc:ie

cc:noie

    aa


link:css
<linkrel="stylesheet" type="text/css" href="style.css" media="all"/>
a:mail
<ahref="mailto:jikeytang
@163.com"></a>
meta:utf
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8"/>
link
<linkrel="stylesheet" href=""/>
style
<styletype="text/css">body{}</style>
script
<scripttype="text/javascript">//some coding</script>
script:src
<script type="text/javascript" src="/scripts/zen_settings.js"></script>
img
<imgsrc="/12" alt=""/>
iframe
<iframesrc="/12.html" frameborder="0"></iframe>
embed
<embedsrc="" type=""/>
object
<objectdata="" type=""></object>
param
<paramname="" value=""/>
map
<mapname=""></map>
area
<areashape="" coords="" href="" alt=""/>
form
<formaction=""></form>
form:get
<formaction="" method="get"></form>
form:post
<formaction="" method="post"></form>
label
<labelfor=""></label>
input
<inputtype=""/>
input:hidden
<inputtype="hidden" name=""/>
input:h
<inputtype="hidden" name=""/>
input:text
<inputtype="text" name="" id=""/>
input:t
<inputtype="text" name="" id=""/>
input:search
<inputtype="search" name="" id=""/>
input:email
<inputtype="email" name="" id=""/>
input:url
<inputtype="url" name="" id=""/>
input:p
<inputtype="password" name="" id=""/>
input:date
<inputtype="date" name="" id=""/>
input:datetime
<inputtype="datetime" name="" id=""/>
input:month
<inputtype="month"<
;/span> name="" id=""/>
input:week
<inputtype="week" name="" id=""/>
input:time
<inputtype="time" name="" id=""/>
input:number
<inputtype="number" name="" id=""/>
input:color
<inputtype="color" name="" id=""/>
input:checkbox
<inputtype="checkbox" name="" id=""/>
input:c
<inputtype="checkbox" name="" id=""/>
input:radio
<inputtype="radio" name="" id=""/>
input:r
<inputtype="radio" name="" id=""/>
input:f
<inputtype="file" name="" id=""/>
input:s
<inputtype="submit" value=""/>
input:i
<inputtype="image" src="" alt=""/>
input:reset
<inputtype="reset" value=""/>
input:button
<inputtype="button" value=""/>
input:b
<inputtype="button" value=""/>
select
<selectname="" id=""></select>
option
<optionvalue=""></option>
textarea
<textareaname="" id="" cols="30" rows="10"></textarea>
menu:c
<menutype="context"></menu>
bq
<blockquote></blockquote>
cap
<caption></caption>
optg
<optgroup></optgroup>
opt
<option></option>
fst
<fieldset></fieldset>
leg
<legend></legend>
sect
<section></section>
tarea
<textarea></textarea>
hdr
<header></header>

ol+
<ol>
    <li></li>
</ol>
ul+
<ul>
    <li></li>
</ul>
dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>
map+
<mapname=""><areashape="" coords="" href="" alt=""/></map>
table+
<table>
    <tr>
        <td></td>
    </tr>
</table>
tr+
<tr>
    <td></td>
</tr>
select
<selectname="" id=""></select>
optgroup+
<optgroup><optionvalue=""></option></optgroup>
optg+
<optgroup><optionvalue=""></option></optgroup>
empty
<empty></empty>

3. 常用的快捷键

常用的快捷键修改为：

Wrap with Abbreviation: alt+x

Toggle Comment: alt+1

Match pair:alt+D

Go to Matching Pair:alt+s

另外是推荐Aptana工具的理由如下：

1. 快捷键支持非常完善。

比如比较常用的删除单行： ctrl + D;

格式化：ctrl + shift + F;

复制单行：ctrl + alt+ pageup

移动单行：alt + pageup

2. js提示是在现下前台可以接受的工具里边是比较强悍的，还有另外一个特点，就是与Firefox中的firebug结合，断点跟踪程序执行流程，即时查看变量的值，是非常不错的。

3. 现下的推荐的最强悍的理由就是与zen coding结合，让你的工作神速如飞。

它的不好之处：

1. 由于工具比较强悍，需要大量的内存消耗，但是以现下的硬件价格，2G的内存基本可以接受。

2. 虽然现在最新版的2.0.2是纯绿色版的，但是安装之前必须要安装sun的jdk，这个东西比较头痛，配置比较多。纯前台人员肯定看的云里雾里的。

3. 内置提供的浏览方式比较慢，纯静态页面，何必那么复杂，直接本地浏览就OK。