使用Zen coding高效编写html代码
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
<div id="wrap">
<div class="content">
<p></p>
</div>
</div>
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代码的更多相关文章
- 结合Zen Coding快速编写HTML代码(sublime text2篇)
首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...
- Zen Coding 快速编写HTML/CSS代码的实现
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...
- Zen Coding css,html缩写替换大观 快速写出html,css
阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...
- 前端代码新写法——Zen Coding
是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...
- 编写高效的Android代码
编写高效的Android代码 毫无疑问,基于Android平台的设备一定是嵌入式设备.现代的手持设备不仅仅是一部电话那么简单,它还是一个小型的手持电脑,但是,即使是最快的最高端的手持设备也远远比不上一 ...
- 编写高效的jQuery代码
http://www.css88.com/jqapi-1.9/ 编写高效的jQuery代码 最近写了很多的js,虽然效果都实现了,但是总感觉自己写的js在性能上还能有很大的提升.本文我计划总结一些网上 ...
- 如何在Android上编写高效的Java代码
转自:http://www.ituring.com.cn/article/177180 作者/ Erik Hellman Factor10咨询公司资深移动开发顾问,曾任索尼公司Android团队首席架 ...
- 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/ ...
- phpstorm使用zen coding 快速编辑补全html/css代码
百科定义: 使用仿CSS选择器的语法来快速开发HTML和CSS ——由Sergey Chikuyonok开发. Zen Coding由两个核心组件组成:一个缩写扩展器(缩写为像CSS一样的选择器)和上 ...
随机推荐
- 初学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 ...
- EF执行存储过程
//执行strSql/procSql //返回受影响的行数 int i = dbsql.Database.ExecuteSqlCommand("exec getActionUrlId @na ...
- andriod之摄像头驱动流程
camera成像原理: 景物通过镜头生产光学图像投射到sensor表面上,然后转为模拟电信号,经过数模变成数字图像信号,在经过DSP加工出来,然后在通过IO接口传输到CPU处理. 由于摄像头满足总线. ...
- sscanf的用法(转)
队长做上海邀请赛的I题时遇到一个棘手的问题,字符串的处理很麻烦,按传统的gets全部读入的话还要做N多处理,太浪费时间. 回来之后搜了一下sscanf的用法发现可以很好的解决这一类问题,各种百度,转来 ...
- ubuntu 14.0.04 通过自启动脚本实现主机和虚拟机的文件夹共享
首先要先设置主机ip为固定ip: 1.vi /etc/rc.local,进入vi界面,在尾部增加一行代码: mount -t cifs -o username=share,password=12345 ...
- D3.js 插入元素,删除元素
插入元素涉及的函数有两个: 一.append():在选择集末尾插入元素 假设有三个段落元素 <p>Apple</p> <p>Pear</p> <p ...
- Android监听Button和ImageButton控件的点击事件
一.onClick事件 Button和ImageButton都有一个onClick事件,通过自身的.setOnClickListener(OnClickListener)方法添加点击事件 所有的控件都 ...
- hdfs namenode -initializeSharedEdits 和 hdfs namenode -bootstrapStandby
hdfs namenode -initializeSharedEdits 将所有journal node的元文件的VERSION文件的参数修改成与namenode的元数据相同 hdfs namenod ...
- java源程序---可执行文件(.exe)----安装包
众所周知,java源程序都可以导出为(executable jar file)可执行的.jar文件,但是该.jar文件需要在jre环境下才能执行. 那么如何能在没有装jre的电脑上运行呢?(那就要顺带 ...
- Http简析
HTTP协议 属于应用层的面向对象的协议 HTTP协议的主要特点 支持C/S(客户/服务器)模式. 简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST ...