《Notepad++中Zen Coding 插件的快捷键》.docx

郑州亚龙软件 软件开发 E网中国 准妈妈网 女士乐园Notepad++ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。 但，不知道有多少同学跟我一样，在coding 时被 Notepad++ 粗陋的代码自动补全折磨的体无完肤（Notepad++那甚至不能叫自动完成）。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述 提到的几点Notepad++的优秀之处，纠结中毅然依旧坚守Notepad++。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气的方式书写代码。 为Notepad++安装 Zen Coding 插件 下载? HYPERLINK /files/Zen.Coding-Notepad%2B%2B.v0.6.1.zip 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=page div/div ul id=navigation lia href=/a/li lia href=/a/li lia 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，只需输入几个字母就能立马生成相应文档