Zen Coding - 写css html的超强工具

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">

< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" >
< head >
    < title ></ title >
    < meta http-equiv ="Content-Type" content ="text/html;charset=UTF-8" />
</ head >
< body >
    aaa
</ body >
</ html >
cc:ie6
<!-- [if lte IE 6]>
    aa
<![endif] -->
cc:ie
<!-- [if IE]>
   
<![endif] -->
cc:noie
<!-- [if !IE]><! -->
    aa
<!-- <![endif] -->

link:css
< link rel ="stylesheet" type ="text/css" href ="style.css" media ="all" />
a:mail
< a href ="mailto:jikeytang
@163.com" ></ a >
meta:utf
< meta http-equiv ="Content-Type" content ="text/html;charset=UTF-8" />
link
< link rel ="stylesheet" href ="" />
style
< style type ="text/css" > body {} </ style >
script
< script type ="text/javascript" > // some coding</script>
script:src
< script type = " text/javascript " src = " /scripts/zen_settings.js " > </ script >
img
< img src ="/12" alt ="" />
iframe
< iframe src ="/12.html" frameborder ="0" ></ iframe >
embed
< embed src ="" type ="" />
object
< object data ="" type ="" ></ object >
param
< param name ="" value ="" />
map
< map name ="" ></ map >
area
< area shape ="" coords ="" href ="" alt ="" />
form
< form action ="" ></ form >
form:get
< form action ="" method ="get" ></ form >
form:post
< form action ="" method ="post" ></ form >
label
< label for ="" ></ label >
input
< input type ="" />
input:hidden
< input type ="hidden" name ="" />
input:h
< input type ="hidden" name ="" />
input:text
< input type ="text" name ="" id ="" />
input:t
< input type ="text" name ="" id ="" />
input:search
< input type ="search" name ="" id ="" />
input:email
< input type ="email" name ="" id ="" />
input:url
< input type ="url" name ="" id ="" />
input:p
< input type ="password" name ="" id ="" />
input:date
< input type ="date" name ="" id ="" />
input:datetime
< input type ="datetime" name ="" id ="" />
input:month
< input type ="month"<
;/span> name="" id="" />
input:week
<input type="week" name="" id="" />
input:time
<input type="time" name="" id="" />
input:number
<input type="number" name="" id="" />
input:color
<input type="color" name="" id="" />
input:checkbox
<input type="checkbox" name="" id="" />
input:c
<input type="checkbox" name="" id="" />
input:radio
<input type="radio" name="" id="" />
input:r
<input type="radio" name="" id="" />
input:f
<input type="file" name="" id="" />
input:s
<input type="submit" value="" />
input:i
<input type="image" src="" alt="" />
input:reset
<input type="reset" value="" />
input:button
<input type="button" value="" />
input:b
<input type="button" value="" />
select
<select name="" id=""></select>
option
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
menu:c
<menu type="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>
<!-- expands -->
ol+
<ol>
    <li></li>
</ol>
ul+
<ul>
    <li></li>
</ul>
dl+
<dl>
    <dt></dt>
    <dd></dd>
</dl>
map+
<map name=""><area shape="" coords="" href="" alt="" /></map>
table+
<table>
    <tr>
        <td></td>
    </tr>
</table>
tr+
<tr>
    <td></td>
</tr>
select
<select name="" id=""></select>
optgroup+
<optgroup><option value=""></option></optgroup>
optg+
<optgroup><option value=""></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。