Zen Coding 是個文本編輯器的插件。在使用Zen Coding的文本編輯器中,可以用簡短的代碼來書寫常規的HTML代碼,這個工具極大的簡化了HTML編寫。 例如以下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 title /title meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / /head body div id="header" div id="logo" /div ul id="nav" li a href="" /a /li li a href="" /a /li li a href="" /a /li li a href="" /a /li li a href="" /a /li /ul /div /body /html
通過Zen Coding,一行即可:
復制代碼代碼如下: html:xt div#header div#logo+ul#nav li.item-$*5 a
這里是在線DEMO(快捷鍵不起作用的,請檢查可能的快捷鍵沖突。如搜狗輸入法會占用 Ctrl+, ) Zen Coding的縮寫規則有些類似CSS選擇器: id和class:如 div#main.list.item 表示的是 div id= main "ext" href="http://code.google.com/p/zen-coding/wiki/Filters" target="_blank" rel="nofollow" jquery1294070642046="30">Filters支持,使用不同的參數,將得到完全不同的結果 其他主要功能 默認的除了HTML/XML/XSL/CSS/HAML縮寫外,Zen Coding 還提供了其他一些方便代碼編寫的功能。 簡寫包裹(Wrap with Abbreviation)。 根據光標的位置或文本選擇情況,輸入代碼簡寫后得到想要的最終代碼。
復制代碼代碼如下: You walk into the room With your pencil in your hand You see somebody naked And you say, Who is that man? You try so hard But you don't understand Just what you'll say When you get home Because something is happening here But you don't know what it is Do you, Mister Jones?
以上文字用 ul li* span 包裹后會得到下面的代碼:
復制代碼代碼如下: ul li span You walk into the room /span /li li span With your pencil in your hand /span /li li span You see somebody naked /span /li li span And you say, Who is that man? /span /li li span You try so hard /span /li li span But you don't understand /span /li li span Just what you'll say /span /li li span When you get home /span /li li span Because something is happening here /span /li li span But you don't know what it is /span /li li span Do you, Mister Jones? /span /li /ul