zen-Coding的使用

zen-Coding的使用

zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。打开Notepad++编辑器，输入以下代码：
div#name

然后接着按一下快捷键ctrl+E，就会自动生成如下的HTML代码：

<div id="name"></div>

接下来看一个更高效的例子

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

按ctrl+E生成如下代码

<div id="header">
<div id="logo"></div>
<ul class="nav">
<li class="item-1"><a href=""></a></li>
<li class="item-2"><a href=""></a></li>
<li class="item-3"><a href=""></a></li>
<li class="item-4"><a href=""></a></li>
<li class="item-5"><a href=""></a></li>
</ul>
</div>

其他指令可以百度：ZenCodingCheatSheet.pdf  获得全部简写指令

zen-Coding在Notepad++中的使用参考如下文档

http://www.cnblogs.com/cobby/archive/2012/05/09/2492473.html

EditPlus 3.7 内置 zen-Coding插件 所以只需要配置相应的快捷键即可