notepad++ 插件Zen Coding

Notepad++ 是一款无比轻巧便捷的代码编辑工具。它拥有无可挑剔的启动速度，优秀的语法高亮，干净整齐的代码缩进，便捷的括号高亮匹配。但是其提示功能真的是不怎么好用

Zen Coding–一款使用仿CSS选择器的语法来快速开发HTML和CSS的插件。以智能简洁高效的缩短输入，带给你超快速地书写各种复杂而枯燥的 HTML 和 CSS 代码的体验

Zen Coding语法

E | E#name | E.name

这里E表示元素，如p,div等。#name和.name分别表示ID和class属性。

 div#main

<div id="main"></div>

 ul.item

<ul class="item"></ul>

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>

E+E | E#name+E#name | E.#name+E.name | E.name+E.name

+号表示兄弟关系。

p+p

<p></p> 
<p></p>

E+ 

+号表示会生成默认的子元素

table+
<table> 
<tr> 
<td></td> 
</tr> 
</table>
ul+
<ul> 
<li></li> 
</ul>
dl+
<dl> 
<dt></dt> 
<dd></dd> 
</dl>

E*N

N:表示某个元素需要重复的次数。

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>

E[attr]

attr:表示元素属性

Zen Coding的使用

Ctrl+E:展开缩写

用法：输入缩写代码后，在代码末尾直接按快捷键得到完整代码

Ctrl+Shift+A:嵌套父级元素

用法：选中需要嵌套父级元素的标签，按快捷键，在弹出的对话框中输入父级标签回车即可

Ctrl+Shift+D:选中代码块

选中当前光标所在的标记，再次按下可以依次选中其父标签。

Ctrl+Alt+] / Ctrl+Alt+[:转到下一个/上一个编辑点

Ctrl+Alt+M:合并行

Alt+/:添加、移除注释

Ctrl+’:空标签转化

Ctrl+Shift+’:移除标签

下面介绍一些常用到的缩写

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