Notepad++中zen-Coding使用

1. notePad 下载 官网：

https://www.notepad-plus-plus.org/

2. zen-coding 下载

zen-Coding是一款快速编写HTML,CSS（或其他格式化语言）代码的编辑器插件，这个插件可以用缩写方式完成大量重复的编码工作，是web前端从业者的利器。 zen-Coding插件支持多种编辑器，如UltraEdit，Notepad++等。

Notepad++安装zen-Coding

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

51CTO网站的去下载

3. 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;
• E>N 
  子元素 (div>p, div#footer>p>span);
• E+N 
  兄弟元素 (h1+p, div#header+div#content+div#footer);
• E*N 
  多项元素 (ul#nav>li*5>a);
• E$*N 
  带序号的元素 (ul#nav>li.item-$*5);
• E[attr] attr:表示元素属性。例: 

  a[title]   <a href=""title=""></a>td[colspan=2]<tdcolspan="2"></td>

• E|filterE|e， |e输出转义字符 

  div#wrap>div.content>p|e

  1

  2

  3

  4

  5

  <div id="wrap">

      <div class="content">

          <p></p>

      </div>

  </div>

  


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

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

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  <divid="header">

      <h1class="logo"><ahref=""></a></h1> /*h1和ul是兄弟关系*/

      <ulclass="nav">

          <liclass="item"><ahref=""></a></li>

          <liclass="item"><ahref=""></a></li>

          <liclass="item"><ahref=""></a></li>

          <liclass="item"><ahref=""></a></li>

          <liclass="item"><ahref=""></a></li>

      </ul>

  </div>

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

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  11

  12

  <divid="header">

      <h1class="logo">      /*h1和ul是父子关系*/

          <ahref=""></a>

          <ulclass="nav">

              <liclass="item"><ahref=""></a></li>

              <liclass="item"><ahref=""></a></li>

              <liclass="item"><ahref=""></a></li>

              <liclass="item"><ahref=""></a></li>

              <liclass="item"><ahref=""></a></li>

          </ul>

      </h1>

  </div>

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

  
  

【Ctrl+E】 展开缩写（Expand Abbreviation） 用法：输入缩写代码后，在代码末尾直接按快捷键得到完整代码

比如写下 div#page>div.logo+ul>li*3>a ，按一下 Ctrl+E，立马就可以转化成：

<div id="page"><div class="logo"></div><ul id="navigation"><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li></ul></div>

【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 class="test"></div> 转化为 <div class="test"/>， 反向亦可

【Ctrl+Shift+’ 】移除标签（Remove Tag）

比如将 <div class="test">hello 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 (XHTML 1.1)html:5 (HTML5)

head 中常用到的一些缩写

meta:utf, meta:compatstyle, link:css, link:print, link:favicon, link:rss,script, script:src

body 中会常用到的缩写

诸如 div, p, a, ul, ol, input:t, input:r 等等

其中，类似 ul+ 的形式可展开为（+号可自动生产默认的子元素）

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

类似的还有 ol+, dl+, table+, tr+, select+, map+, optg+ 等

IE 条件注释：

cc:ie6, cc:ie, cc:noie

下边是一些典型用法示例：

div#name.one.two => <div id="name" class="one two"></div>

li.item$*3  =><li class="item1"></li><li class="item2"></li><li class="item3"></li> 

li.item$$$ =><li class="item001"></li>

li.item-$-content*3 => <li class="item-1-content"></li><li class="item-2-content"></li><li class="item-3-content"></li> 

#content>.section => <div id="content"><div class="section"></div></div>

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer 带括号的结果

<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>

此外【|e】 可以输出转义字符

<div id="wrap">    <div class="content">        <p></p>    </div></div>

div#wrap>div.content>p|e|e 可转化为：

<div id="wrap">    <div class="content">        <p></p>    </div></div>

以上介绍的仅仅是有关HTML的缩写，CSS的缩写就更多了，建议查看 Zen Coding 小抄，学习CSS 的 Zen Coding 方式

自己编写缩写规则

plugins\NppScripting\includes\Zen Coding.js

在其中对应位置仿照已有规则添加自己的缩写规则。也可以修改缩写规则更符合自己的习惯。

即使你不编写自己的缩写规则，也强烈建议你阅读此文件，熟悉 Zen Coding 自带的一些缩写规则，让代码书写更加事半功倍~