zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器。 zen-Coding插件支持多种编辑器,在editplus中是默认自带了这个插件,另外其他如UltraEdit,Notepad++等可以自行安装。

zen-Conding下载地址:http://code.google.com/p/zen-coding/downloads/list (进入下载页,选择相应的编辑器插件下载)

一、Notepad++安装zen-Coding

1.下载zen-Coding的Notepad++插件;(zen-Coding for Notepad++)
2.解压后将压缩包中的文件放入Notepad++安装目录下的plugins文件夹中;
3.重新启动Notepad++编辑器就能看到菜单栏上增加了一项Zen Coding。如下图所示:

二、Editplus中自带zen-coding插件

三、zen-Coding的使用

zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉,就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。打开Notepad++编辑器,输入以下代码:

div#name

然后接着按一下快捷键ctrl+E,就会自动生成如下的HTML代码:

<div id="name"></div>

接下来看一个更高效的例子

div#header>div#logo+ul.nav>li.item-$*5>a

按ctrl+E生成如下代码

<div id="header">
<div id="logo"></div>
<ul class="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>

Zend Coding语法

1.E | E#name | E.name

这里E表示元素,如p,div等。#name和.name分别表示ID和class属性。例:

div

<div></div>

div#main

<div id="main"></div>

ul.item

<li class="item"></li>

如要显示一个id和多个class属性时,可以这样写

ul#nav.one.two

<ul id="nav" class="one two"></ul>

2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name

>表示父级嵌套子级。例:

div>span

<div><span></span></div>

div#nav>ul.main

<div id="nav">
<ul class="main"></ul>
</div>

3.E+E | E#name+E#name | E.#name+E.name | E.name+E.name

+号表示兄弟关系。例:

p+p

<p></p>
<p></p>

div#header+div#content+div#footer

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

E+  (+号表示会生成默认的子元素)

table+

<table>
<tr>
<td></td>
</tr>
</table>

ul+

<ul>
<li></li>
</ul>

dl+

<dl>
<dt></dt>
<dd></dd>
</dl>

4.E*N

N:表示某个元素需要重复的次数。例:

p*3

<p></p>
<p></p>
<p></p>

ul#nav>li.item*4

<ul id="nav">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>

5.E*N$

$:表示序号。例:

ul#nav>li.item-$*4

<ul id="nav">
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
<li class="item-4"></li>
</ul>

6.E[attr]

attr:表示元素属性。例:

a[title]

<a href="" title=""></a>

td[colspan=2]

<td colspan="2"></td>

7.E|filter

E|e

|e输出转义字符

div#wrap>div.content>p|e

&lt;div id="wrap"&gt;
    &lt;div class="content"&gt;
        &lt;p&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

 8.( )控制嵌套分组关系

div#header>(h1.logo>a)+ul.nav>li.item*5>a

<div id="header">
<h1 class="logo"><a href=""></a></h1> /*h1和ul是兄弟关系*/
<ul class="nav">
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
</ul>
</div>

div#header>h1.logo>a+ul.nav>li.item*5>a

<div id="header">
<h1 class="logo"> /*h1和ul是父子关系*/
<a href=""></a>
<ul class="nav">
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
</ul>
</h1>
</div>

以上两种写法得到的结构是不一样的。 请大家注意观察。

练习:将以下代码用zen-coding写出来。

<div id="page">
<div id="header">
<ul id="nav">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div id="page">
<h1><span></span></h1>
<p></p>
<p></p>
</div>
<div id="footer"></div>
</div>

答案:(选中下一空行试试)
div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

三、Notepad++中zen-coding的使用

Expand Abbreviation(Ctrl+E):展开缩写

用法:输入缩写代码后,在代码末尾直接按快捷键得到完整代码。

Wrap with Abbreviation(Ctrl+Shift+A):嵌套父级元素

用法:选中需要嵌套父级元素的标签,按快捷键,在弹出的对话框中输入父级标签回车即可。例:

list1
list2
list3
list4
list5

选中以上内容,然后按【Ctrl+Shift+A】在弹出的对话框中输入ul.nav>li.item-$*>a[title]后按【Enter】键,就会生成如下代码

<ul class="nav">
<li class="item-1"><a href="" title="">list1</a></li>
<li class="item-2"><a href="" title="">list2</a></li>
<li class="item-3"><a href="" title="">list3</a></li>
<li class="item-4"><a href="" title="">list4</a></li>
<li class="item-5"><a href="" title="">list5</a></li>
</ul>

Balance TagInward/Outward(Ctrl+Shift+D):选中代码块

选中当前光标所在的标记,再次按下可以依次选中其父标签。

Go to Next/Previous Edit Point( Ctrl+Alt+]  / Ctrl+Alt+[ ):转到下一个/上一个编辑点

Merge Lines(Ctrl+Alt+M):合并行

将选中的多行代码合并为一行。压缩css、js代码为一行时,这个很方便。Ctrl+A,然后Ctrl+Alt+M,两下即可搞定,免去了动用压缩工具的麻烦。(当然这个只是简单地将代码合并为一行,并不能做更深入的代码压缩)

Toggle Comment(Alt+/):添加、移除注释

注释掉光标所在的代码块 (Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码)

Split/Join Tag(Ctrl+’ ):空标签转化

比如将 <div></div> 转化为 <div/>, 反向亦可。

Remove Tag(Ctrl+Shift+’ ):移除标签

比如将 <div>hello world</div> 移除div标签,留下hello world。

zen-coding常用缩写

html:4t (HTML 4.01 Transitional)
html:4s (HTML 4.01)
html:xt (XHTML 1.0)
html:xs (XHTML 1.0 Strict)
html:xxs (XHTML 1.1)
html:5 (HTML5) meta:utf, meta:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src div, p, a, ul, ol, input:t, input:r ol+, dl+, table+, tr+, select+, map+, optg+ cc:ie6, cc:ie, cc:noie

可以打开plugins\NppScripting\includes\Zen Coding.js这个JS文件看一看,熟悉Zen Coding自带的一些缩写规则。

使用Zen coding高效编写html代码的更多相关文章

  1. 结合Zen Coding快速编写HTML代码(sublime text2篇)

    首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...

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

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

  3. Zen Coding css,html缩写替换大观 快速写出html,css

    阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...

  4. 前端代码新写法——Zen Coding

    是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...

  5. 编写高效的Android代码

    编写高效的Android代码 毫无疑问,基于Android平台的设备一定是嵌入式设备.现代的手持设备不仅仅是一部电话那么简单,它还是一个小型的手持电脑,但是,即使是最快的最高端的手持设备也远远比不上一 ...

  6. 编写高效的jQuery代码

    http://www.css88.com/jqapi-1.9/ 编写高效的jQuery代码 最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上 ...

  7. 如何在Android上编写高效的Java代码

    转自:http://www.ituring.com.cn/article/177180 作者/ Erik Hellman Factor10咨询公司资深移动开发顾问,曾任索尼公司Android团队首席架 ...

  8. C#7.2——编写安全高效的C#代码 c# 中模拟一个模式匹配及匹配值抽取 走进 LINQ 的世界 移除Excel工作表密码保护小工具含C#源代码 腾讯QQ会员中心g_tk32算法【C#版】

    C#7.2——编写安全高效的C#代码 2018-11-07 18:59 by 沉睡的木木夕, 123 阅读, 0 评论, 收藏, 编辑 原文地址:https://docs.microsoft.com/ ...

  9. phpstorm使用zen coding 快速编辑补全html/css代码

    百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...

随机推荐

  1. 初学CDQ分治-NEU1702

    关于CDQ分治,首先需要明白分治的复杂度. T(n) = 2T(n/2)+O(kn), T(n) = O(knlogn) T(n) = 2T(n/2)+O(knlogn), T(n) = O(knlo ...

  2. EF执行存储过程

    //执行strSql/procSql //返回受影响的行数 int i = dbsql.Database.ExecuteSqlCommand("exec getActionUrlId @na ...

  3. andriod之摄像头驱动流程

    camera成像原理: 景物通过镜头生产光学图像投射到sensor表面上,然后转为模拟电信号,经过数模变成数字图像信号,在经过DSP加工出来,然后在通过IO接口传输到CPU处理. 由于摄像头满足总线. ...

  4. sscanf的用法(转)

    队长做上海邀请赛的I题时遇到一个棘手的问题,字符串的处理很麻烦,按传统的gets全部读入的话还要做N多处理,太浪费时间. 回来之后搜了一下sscanf的用法发现可以很好的解决这一类问题,各种百度,转来 ...

  5. ubuntu 14.0.04 通过自启动脚本实现主机和虚拟机的文件夹共享

    首先要先设置主机ip为固定ip: 1.vi /etc/rc.local,进入vi界面,在尾部增加一行代码: mount -t cifs -o username=share,password=12345 ...

  6. D3.js 插入元素,删除元素

    插入元素涉及的函数有两个: 一.append():在选择集末尾插入元素 假设有三个段落元素 <p>Apple</p> <p>Pear</p> <p ...

  7. Android监听Button和ImageButton控件的点击事件

    一.onClick事件 Button和ImageButton都有一个onClick事件,通过自身的.setOnClickListener(OnClickListener)方法添加点击事件 所有的控件都 ...

  8. hdfs namenode -initializeSharedEdits 和 hdfs namenode -bootstrapStandby

    hdfs namenode -initializeSharedEdits 将所有journal node的元文件的VERSION文件的参数修改成与namenode的元数据相同 hdfs namenod ...

  9. java源程序---可执行文件(.exe)----安装包

    众所周知,java源程序都可以导出为(executable jar file)可执行的.jar文件,但是该.jar文件需要在jre环境下才能执行. 那么如何能在没有装jre的电脑上运行呢?(那就要顺带 ...

  10. Http简析

    HTTP协议 属于应用层的面向对象的协议 HTTP协议的主要特点 支持C/S(客户/服务器)模式. 简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST ...