Zen Coding 让 Notepad++ 代码书写健步如飞.docx

《Zen Coding 让 Notepad++ 代码书写健步如飞.docx》由会员分享，可在线阅读，更多相关《Zen Coding 让 Notepad++ 代码书写健步如飞.docx（6页珍藏版）》请在三一办公上搜索。

1、Zen Coding 让 Notepad+ 代码书写健步如飞Zen Coding 让 Notepad+ 代码书写健步如飞 Notepad+ 是一款无比轻巧便捷的代码编辑工具。它无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配赢得了无数人的喜爱。 但，不知道有多少同学跟我一样，在coding 时被 Notepad+ 粗陋的代码自动补全折磨的体无完肤。虽然无比羡慕诸如Dreamweaver之类的代码自动完成，但固于上述提到的几点Notepad+的优秀之处，纠结中毅然依旧坚守Notepad+。而 Zen Coding 的横空出世，总算终结了这种纠结，让我们得以以一种无比帅气

2、的方式书写代码。 先看一段演示视频吧 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo. 为Notepad+安装 Zen Coding 插件 下载 Zen.Coding-Notepad+.v0.6.1.zip 解压 将解压所得的文件放入 Notepad+ 程序的安装目录下的plugins文件夹。 重启Notepad+，即可开始使用 Zen Coding。 Zen Coding 用法 首先，我们先学习一下 Zen Coding 的缩写规则 E 元素名 (div, p); E#id 带id的元素 (div#content, p#intro, span#

3、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 的精髓

4、展开缩写 比如写下 div#pagediv.logo+ulli*3a ，按一下 Ctrl+E，立马就可以转化成： 嵌套代码 比如，我们想让写好的 hello world ，想在外层再套一个div，只需按下，在弹出的对话框中输入： div.wrap，回车。此标签就能自动被嵌套。 甚至，我们可以玩的更炫一些，写好三行列表内容，全裸，此时没有任何标签。只需按下，输入ulli* ，回车。这三行内容就能自动被ul li 嵌套起来。 选中代码块 选中当前光标所在的代码块，长按可依次选中父块 转到上一个/下一个编辑点 按下可以依次跳到可输入内容的编辑点，省去了不停按方向键或鼠标来定位编辑点的麻烦。 合并行

5、将选中的多行代码合并为一行。压缩css、js代码为一行时，这个很方便。Ctrl+A，然后Ctrl+Alt+M，两下即可搞定，免去了动用压缩工具的麻烦。 添加、移除注释 注释掉光标所在的代码块 空标签转化 比如将 转化为 ， 反向亦可。 移除标签 比如将 hello world 移除div标签，留下hello world。 好了，目前 Notepad+ 的 Zen Coding 只有这几个快捷键，下面介绍一些常用到的缩写 不知道大家新建一个html 页面时，是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding，只需输入几个字母就能立马生成相应文档声明的 html 结构框架

6、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) head 中常用到的一些缩写 meta:utf, meta:compat style, link:css, link:print, link:favicon, link:rss, script, script:src body 中会常用到的缩写 诸如 div, p, a, ul, ol, input:t, input:r 等等

7、 其中，类似 ul+ 的形式可展开为 类似的还有 ol+, dl+, table+, tr+, select+, map+, optg+ 等 IE 条件注释： cc:ie6, cc:ie, cc:noie 下边是一些典型用法示例： div#name.one.two = title=Hello world rel = tdcolspan=2 = li.item$*3 = li.item$ = li.item-$-content*3 = #content.section = 如果你写了这么一串出来，那么一个页面的基本结构就出来了： div#page(div#headerul#navli*4a)+(

8、div#page(h1span)+p*2)+div#footer 此外 可以输出转义字符 div id=wrap div class=content p/p /div /div div#wrapdiv.contentp|e|e 可转化为： lt;div id=wrapgt; lt;div class=contentgt; lt;pgt;lt;/pgt; lt;/divgt; lt;/divgt; 以上介绍的仅仅是有关HTML的缩写，CSS的缩写就更多了，建议查看 Zen Coding 小抄，学习CSS 的 Zen Coding 方式 自己编写缩写规则 pluginsNppScriptingincludesZen Coding.js 在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。 即使你不编写自己的缩写规则，也强烈建议你阅读此文件，熟悉 Zen Coding 自带的一些缩写规则，让代码书写更加事半功倍 最后，Zen Coding 不仅有Notepad+版，Aptana、UltraEdit、Dreamweaver也有相应版本，速速前往 官方下载页查找是否有你常用的编辑器的Zen Coding插件吧