結合Zen Coding快速編寫HTML代碼（sublime text2篇）

首先說下，如何在sublime text2加上zen coding插件

按 Ctrl+`(就是~這個鍵) 複製下面的代碼 確認 從新啓動sublime text2

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

                           

重啓看到如上圖所示，表明Package Control 安裝成功 

接下來就是暫時分享下本身還不是那麼熟悉的zen coding的語法

 

1.新建html

不知道你們新建一個html 頁面時，是如何輸入文檔聲明和 head 那一坨東西的。如今有了Zen Coding，只需輸入幾個字母就能立馬生成相應文檔聲明的 html 結構框架

html:4t (HTML 4.01 Transitional)
html:4s (HTML 4.01)
html:xt (XHTML 1.0)
html:xs (XHTML 1.0 Strict) 
html:xxs (XHTML 1.1)
html:5 (HTML5)

而後按上ctrl+E，立刻就能夠新建成功

 

2.如果你對CSS的選擇器比較熟悉，就能夠得用簡短的相似於CSS選擇器的代碼高效的編寫出HTML代碼。

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

接着按一下快捷鍵ctr+E，就會自動生成以下的HTML代碼：

<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>

3.head 中經常使用到的一些縮寫

meta:utf, meta:compat
style, link:css, link:print, link:favicon, link:rss,
script, script:src

 以上介紹的僅僅是有關HTML的縮寫，CSS的縮寫就更多了，建議查看 Zen Coding 小抄，學習CSS 的 Zen Coding 方式

相關連接：http://rpsh.net/archives/zen-coding-npp/

              http://www.cn-sass.com/blog/32.html