[分享] Zen Coding - 極速開發HTML最重要的利器之一

看板Web_Design作者kewang (浪費愛情)時間14年前 (2009/12/13 00:51)推噓11(11推 0噓 5→)

留言16則, 15人參與討論串1/1

網頁版：http://kewang.pixnet.net/blog/post/25418325 上個月看到一篇文章「Zen Coding: Generating HTML from selectors」，這真的是太酷了啦！只要你會CSS Selector，這個叫做Zen Coding的plugin就可以幫你用Selector完成各種的HTML。像你只要打了下面這一串 1 html:xt>div#header>div#logo+ul#nav>li.item-$*5>a 就會變成下面這個HTML了，很神奇吧！ 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 03 <head> 04 <title></title> 05 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 06 </head> 07 <body> 08 <div id="header"> 09 <div id="logo"></div> 10 <ul id="nav"> 11 <li class="item-1"><a href=""></a></li> 12 <li class="item-2"><a href=""></a></li> 13 <li class="item-3"><a href=""></a></li> 14 <li class="item-4"><a href=""></a></li> 15 <li class="item-5"><a href=""></a></li> 16 </ul> 17 </div> 18 </body> 19 </html> 有興趣的可以到這個地方玩玩看。其實現在已經有很多編輯器支援了，像是Aptana、 Visual Studio、TextMate......等，可是我沒看到vim跟PSPad呀！！！如果想要安裝Zen Coding在Visual Studio上面的話，可以看看這兩篇文章「ZenCoding Visual Studio AddIn」和「Zen Coding – a very fast way of generating (HTML) elements in your editor!」，步驟還蠻詳細的。我看Zen Coding應該也會跟jQuery一樣，很快就會盛行在撰寫HTML上面了吧！參考資料： Ajaxian >> Zen Coding: Generating HTML from selectors zen-coding - Project Hosting on Google Code Zen Coding plugin for editArea ZenCoding Visual Studio AddIn >> tech.einaregilsson.com Zen Coding - a very fast way of generating (HTML) elements in your editor! | w ww.netsi.dk -- 雜七雜八的kewang部落格 http://kewang.tw -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 118.167.131.112

→

PsMonkey

12/13 01:05, , 1^F

12/13 01:05, 1^F

→

nobody1

12/13 01:31, , 2^F

12/13 01:31, 2^F

→

lgzenith

12/13 01:44, , 3^F

12/13 01:44, 3^F