Notepad++中ZenCoding插件的快捷键.docx

郑州亚龙软件 软件开发 E网中国 准妈妈网 女士乐园Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。但，不知道有多少同学跟我一样，在coding 时被 Notepad++ 粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述 提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。为Notepad++安装 Zen Coding 插件下载?Zen.Coding-Notepad++.v0.6.1.zip 解压将解压所得的文件放入 Notepad++ 程序的安装目录下的plugins文件夹。重启Notepad++，即可开始使用 Zen Coding。Zen Coding 用法首先，我们先学习一下 Zen Coding 的缩写规则 （其实就是CSS选择器）E元素名 (div, p);E#id带id的元素 (div#content, p#intro, span#error);E.class带class的元素 (div.header, p.error.critial). id 和 class 可以连写，如： div#content.column.width;EN子元素 (divp, div#footerpspan);E+N兄弟元素 (h1+p, div#header+div#content+div#footer);E*N多项元素 (ul#navli*5a);E$*N带序号的元素 (ul#navli.item-$*5);接下来，我们来熟悉 Zen Coding for Notepad++ 的快捷键，也是 Zen Coding 的精髓【Ctrl+E】 展开缩写（Expand Abbreviation）比如写下?div#pagediv.logo+ulli*3a ，按一下 Ctrl+E，立马就可以转化成：div id=pagediv/divul id=navigationlia href=/a/lilia href=/a/lilia href=/a/li/ul/div【Ctrl+Shift+A】 嵌套代码（Wrap with Abbreviation）比如，我们想让写好的?phello world/p ，想在外层再套一个div，只需按下【Ctrl+Shift+A】，在弹出的对话框中输入：?div.wrap，回车。此标签就能自动被嵌套。甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下【Ctrl+Shift+A】，输入ulli* ，回车。这三行内容就能自动被ul li 嵌套起来。（不仅限于 li 列表哦）【Ctrl+Shift+D】选中代码块（Balance Tag Inward/Outward）选中当前光标所在的代码块，长按可依次选中父块【Ctrl+Alt+[ , Ctrl+Alt+]】 转到上一个/下一个编辑点（Go to Next/Previous Edit Point）按下可以依次跳到可输入内容的编辑点，省去了不停按方向键或鼠标来定位编辑点的麻烦。【Ctrl+Alt+M 】合并行（Merge Lines）将选中的多行代码合并为一行。压缩css、js代码为一行时，这个很方便。Ctrl+A，然后Ctrl+Alt+M，两下即可搞定，免去了动用压缩工具的麻烦。（当然这个只是简单地将代码合并为一行，并不能做更深入的代码压缩）【Alt+/ 】添加、移除注释（Toggle Comment）注释掉光标所在的代码块 （Notepad++ 自带的Ctrl+Shift+Q也可以用来注释代码）【Ctrl+’ 】空标签转化（Split/Join Tag）比如将?div/div 转化为?div/， 反向亦可。【Ctrl+Shift+’ 】移除标签（Remove Tag）比如将?divhello world/div 移除div标签，留下hello world。好了，目前 Notepad++ 的 Zen Coding 只有这几个快捷键，下面介绍一些常用到的缩写不知道大家新建一个html 页面时，是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding，只需输入几个字母就能立马生成相应文档声明的 html 结构框架html:4t (HTML 4.01 Transitional)html:4s (HTML 4.01)html:xt (XHTML 1.0)html:xs (XHTML 1.0 Strict)html:xxs