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插件 因此只须要配置相应的快捷键便可