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插件 因此只須要配置相應的快捷鍵便可