阅读本文，先仔细阅读网站文章。 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

转载于:https://www.cnblogs.com/simadi/p/3143926.html

Zen Coding css,html缩写替换大观 快速写出html,css相关推荐

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

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

  2. c++如何快速写出get set_如何快速写出一篇合格的毕业论文

    从自己毕业时艰难的才能在三个月内完成一篇,到如今十天内就可以整出来一篇,不需要加班的那种.本人的专业是法律硕士,在此仅以法律专业为例,如何快速写出一篇合格的毕业论文.事实告诉你,完全不用20天时间. ...

  3. 用聚合数据API快速写出小程序

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

  4. 掌握这几点 让你快速写出优质电影解说文案！

    掌握这几点 让你快速写出优质电影解说文案! 大家好,今天和小伙伴们聊聊我如何快速写出一篇电影解说方案. 电影解说文案可以通过五步来写:1.选电影.2.找线或点.3.把线或点串起来.4.润色文案.5.故 ...

  5. 如何通俗理解并快速写出麦克斯韦方程组？

    引言 所谓"当初电磁学的烂,原理用时火葬场",哈?你问我说快速写出麦克斯韦方程组除了研究生复试时还能有啥用又不是小学生?这种圣经你光电学生不得烂熟于心关键时刻装逼用吗?ヽ(`Д´) ...

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

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

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

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

  8. 如何快速写出一篇核心论文？

    论文的创作对于每个人来说都是一件难事,因为论文是一个人对自己学过的知识的总结.论文的创作需要熟悉掌握一定的专业知识,要能将这些理论知识应用到论文中.在学习生活中你可以发现有些同学写论文需要好长时间,有 ...

  9. html如何使用聚合数据,用聚合数据API快速写出小程序

    利件览客需和下于有快都业视的事一房望站是有用聚合数据API快速写出小程序,过程简抖要支圈者器说是事天开的.年后编定功口小发还单. 1.申请小程遇新是直朋能到分览序账号 2.进入开发 3.调友,记基开前 ...

最新文章

  1. 西农计算机考研专业课压分,考研：西农大计算机初试第一名被淘汰，倒数第一成功逆袭...
  2. JavaBean笔记
  3. B+树（加强版多路平衡查找树）
  4. fileoutputstream 文件不存在_总结Java中创建并写文件的5种方式
  5. 主定理（Master Theorem）与时间复杂度
  6. 用Arduino远程控制车库门开关
  7. mysql 从中英文混合串中截取字符
  8. Android中的Builder模式
  9. 经典圣诞老人题----同步与互斥
  10. installshield 安装mysql数据库_使用 InstallShield 安装和卸载SQL Server 数据库
  11. photoshop多选文字_60多个Photoshop文字效果教程
  12. 东莞地铁1号线黄江北站主体结构全面封顶
  13. kuka机器人三种运动编程
  14. iOS 常用动画第三方
  15. 等保（公安部82号令）
  16. ［android开发必备］Android开发者社区汇总
  17. 串口、终端应用程序 API termios
  18. 三重积分为何不能直接带入积分区域？搞懂这些，重积分基本可以了
  19. Unity答题系统3.0版本（增加题目导航栏和提交后显示题目正误标识功能）
  20. android 情景模式设置

热门文章

  1. python安装百度aip_PIL+百度aip
  2. Syszuxpin中文输入法移植
  3. 电脑组装与维护教程_小白不会装机？教你如何自己组装一台电脑。装机图文教程...
  4. word 常用快捷键
  5. TensorRT学习笔记6 - IPlugin
  6. Ubuntu复制相同的目录结构（不复制文件）
  7. uvalive5983(二分+dp)
  8. BZOJ 3277 串 BZOJ 3473 字符串 (广义后缀自动机、时间复杂度分析)
  9. eclipse热部署_Spring Boot Devtools热部署
  10. 8s pod 查看 的yaml_Kubernetes入门到实战（五）深入浅出详解Pod