阅读本文，先仔细阅读网站文章。 Zen Coding 快速编写HTML/CSS代码的实现
复制代码 代码如下:
E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也 可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);

zen coding 替换展现'api'.

zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件，其安装也是非常简单，只要安装插件，然后在项目中拷贝js文件就可以。项目发布时，可删除js文件。它主要任务是把前端工程师从繁琐的html,css结构代码中解放出来，但是里边需要记忆的替换简写非常多，本着眼观十遍不如手动一遍的原则，只能边用边记。

其中的css替换功能也非常的不错。但是里边也有很多冗余无用的替换，本人正在一边使用一边修正原来作者定义在实际生产中不合理的替换。

稍后会一并把zen_settings文件发上来，并对替换的代码做简单的解释说明。

刚开始肯定有点不习惯，这结构还得一边写一边思考。但是习惯后，感觉是非常的便利，可以用“神速”两个字来概括书写时的心情。

至于其它心得体会，本人在使用后会慢慢发出来，以供借鉴。

zen特点是向css选择器进行了深刻的模仿。jquery选择器也是跟css选择符学习的，所以熟悉这二者技术的人会很快上手。其它详细信息关注来源网站。

其中html标签替换学习--源码在其包中zen-settings.js，我列出大部分是常用的，还有一些不常用的没有列出，参考源文件，上一行是手动输入，下一行是按快捷键(alt+E)后zen输出，环境为Aptana 2.0.2：
已经不存在了，文件不可下载。
此文件2009年度最后一次更新，这次更新的主要内容有：

1. width等值后添加单位。

2. 让常用的缩写更加人性化。

3. 还有几个新缩写的添加。

这两天对css替换功能做了疯狂的试验及完善，对其使用频率过高的替换做了简化，对难易记忆的，用重发音区分，这次的变化，也将扩展快捷键改为alt+s，因为本人平常QQ发消息是这两个键，比较习惯，ctlr + enter，左手ctrl 右手enter结合太麻烦，右手ctrl + enter完成时间过长，只好左手完成了。先将经验分享如下，单字母开始为原始元素，下一行为zen扩展输出后元素，依次类推：
在原来zen中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;

其它css类：
复制代码 代码如下:
m
margin:;
mt
margin-top:;
mr
margin-right:;
ml
margin-left:;
mb
margin-bottom:;

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');

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;

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

常用的快捷键修改为：

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。

注重版权，转载请注明出处http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html。
详细出处参考：http://www.jb51.net/article/25880.htm

Zen Coding css,html缩写替换大观 快速写出html,css的更多相关文章

  1. IDEA最常用快捷键汇总+快速写出Main函数

    IDEA可以说是当下Java程序员日常开发的神器,但是想要发挥这款神器的牛逼威力,必须得熟练使用它的各种快捷键才行.本篇总结下使用IDEA(也就是IntelliJ IDEA )进行日常开发中最常用的快 ...

  2. 用聚合数据API（苏州实时公交API）快速写出小程序

    利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如“苏州实时公交”小程序,选择的是苏州实时公交API. 苏州实时公交API文档:https://www ...

  3. 教你快速写出多线程Junit单元测试用例 - GroboUtils

    摘自: http://mushiqianmeng.blog.51cto.com/3970029/897786/ 本文出自One Coder博客,转载请务必注明出处: http://www.coderl ...

  4. 一个能快速写出实体类的Api文档管理工具

    今天各种MVC框架满天飞,大大降低了编码的难度,写实体类就没有办法回避的一件事了,花大把的时间去做一些重复而且繁琐的工作,实在不是一个优秀程序员的作风,所以多次查找和尝试后,找到一个工具类网站——Ap ...

  5. 如何快速写出高质量的 Go 代码？

    前言 团队协作开发中,必然存在着不同的代码风格,并且诸如 http body close,unhandled error 等低级错误不能完全避免.通过使用 ci lint 能够及早的发现并修复问题,提 ...

  6. Zen Coding in Visual Studio 2012

    http://www.johnpapa.net/zen-coding-in-visual-studio-2012 Zen Coding is a faster way to write HTML us ...

  7. 关于Zen Coding:css,html缩写

    zen coding 是一个俄罗斯人写的编辑器(支持大部分现下流行的编辑器)插件,其安装也是非常简单,只要安装插件,然后在项目中拷贝js文件就可以.像Webstorm6.0.2中已经包含这样的插件.什 ...

  8. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  9. zen coding一个牛的不行的html和css开发工具

    zen coding 是一种仿css选择器的语法来快速开发html和css的开源项目.现已更名为Emmet.可以到github上下载拜读.在这个都想偷懒的世界里,此方法可以极大的缩短开发人员的开发时间 ...

随机推荐

  1. iOS 单元測试之XCTest具体解释（一）

    原创blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS-SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...

  2. AntiXSS - 支持Html同时防止XSS攻击

    AntiXSS - 支持Html同时防止XSS攻击 跨站脚本攻击(XSS)已经不是什么新鲜的话题了,甚至很多大公司也为此吃尽苦头.最简单直接的防范方法,就是不允许任何html标签输入,对用户输入进行编 ...

  3. C++ Primer笔记7_STL之关联容器

    关联容器 与顺序容器不同,关联容器的元素是按keyword来訪问和保存的.而顺序容器中的元素是按他们在容器中的位置来顺序保存的. 关联容器最常见的是map.set.multimap.multiset ...

  4. ubuntu 搭建svn服务器

    1.安装Subversion sudo apt-get install subversion 2.创建资源库 cd /home/username/ svnserve -d -r /home/usern ...

  5. SpringMVC @ResponseBody 415错误处理

    在查看下面部分内容之前,请先检查你的请求蚕食是否正确,如果全部正确,请继续往下看 刚开始用SpringMVC, 页面要使用jQuery的ajax请求Controller. 但总是失败,主要表现为以下两 ...

  6. JAVA逆向&反混淆-追查Burpsuite的破解原理（转）

    0x00 摘要: 本系列文章通过对BurpLoader的几个版本的逆向分析,分析Burpsuite的破解原理,分析Burpsuite认证体系存在的安全漏洞. 0x01 JD-GUI的用途与缺陷: JD ...

  7. MySQL创建用户权限结果Trigger失败

    说来惭愧,MySQL我已经在只将用于,非常赞赏阶段. 甚至一些比较深层次的管理,不熟悉如何,我们要加强啊! 最近.系统测试,使用MySQL数据库,你需要在表上创建触发器.该数据库是安装在机.但.在任何 ...

  8. Nagios+pnp4nagios+rrdtool 安装配置nagios被监控端NRPE配置(二）

    NRPE监控插件基础 NRPE总共由两部分组成: (1).check_nrpe插件,运行在监控主机上. (2).NRPE daemon,运行在远程的linux主机上(通常就是被监控机) 整个的监控过程 ...

  9. 用C++语言开发Android程序 配置开发环境

    转自:http://www.cnblogs.com/yaotong/p/3622430.html 用C++语言开发Android程序 配置开发环境   如果你是一个C++语言的死忠,你喜欢C++语言到 ...

  10. Python学习入门基础教程(learning Python)--3.2 if-else分支语句

    if-else分支语句结构的特点是当conditon条件满足时,执行if下的语句块,当condition条件不满足时执行else下的语句块,也就是说根据条件来控制让某些语句执行,某些语句不被执行. i ...