好用的zen-coding

woff

如果需要手工刻css+html時，你的編輯器剛好有支援，那就省事了。
雖然方便，但前提是你已經熟悉css selector，不然恐怕還是一頭霧水。

這個工具可以讓你用css selector語法反向產出html！例如，你在編輯器中輸入：   

1. div[onclick="Module.panelhandler"]#panel.class1>p.section1+p.section1

複製代碼

他可以幫你展開成html：   

1. <div onclick="Module.panelhandler" id="panel" class="class1">  
   
2.         <p class="section1"></p>  
   
3.         <p class="section1"></p>  
   
4.     </div>

複製代碼

如果要產生一串list：

1. ul.menu>li.item*5

複製代碼

他就幫你展開：

1. # <ul class="menu">  
   
2.      <li class="item"></li>  
   
3.      <li class="item"></li>  
   
4.      <li class="item"></li>  
   
5.      <li class="item"></li>  
   
6.      <li class="item"></li>  
   
7. </ul>

複製代碼

等等，還有許多好用的語法，可以上官網：http://code.google.com/p/zen-coding/找找看使用方式。裡面也可以找到支援的編輯器列表...（嗯嗯，Notepad++有支援，其他還有很多，可惜我常用的ultraedit有點跛腳...）

更進階的功能據說還可以讓你把內容與selector做matching，然後組出完整的html，不過好像還在開發中。