[Tools] Zen Coding : Generating HTML from selectors 使用選擇器產生HTML

2010年12月2日星期四

[Tools] Zen Coding : Generating HTML from selectors 使用選擇器產生HTML

顧名思義就是用來自動產生HTML, 第一次用也是覺得超酷, 用習慣真的能增加工作效率

直接看範例, 我是用Aptana, 打下面的selectors

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

按下Ctrl+Alt+E後會自動產生成下列的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
</head>
<body>
 <div id="header">
  <div id="logo"></div>
  <ul id="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>
</body>
</html>

Reference:
Zen Coding: Generating HTML from selectors
Zen Coding: A Speedy Way To Write HTML/CSS Code