HTML代碼寫起來很費事，因為它的標簽多。
一種解決方法是采用模板，在別人寫好的骨架內，填入自己的內容。還有一種很炫的方法----簡寫法。
常用的簡寫法，目前主要是Emmet和Haml兩種。這兩種簡寫法，功能相近，各有特點。考慮到Haml基于Ruby語言，建議Ruby/Rails項目使用Haml，其他項目使用Emmet。
本文主要介紹Emmet。
本人使用的編輯器是sublime text，下面就以sublime text舉例。
一、安裝Emmet插件：
1.安裝Package Control組件（之前若安裝過，此步驟可以省略）
按Ctrl+`調出console
粘貼以下代碼到底部命令行并回車：
import urllib2,os;pf='PackageControl.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())
重啟SublimeText 2。
如果在Perferences->packagesettings中看到packagecontrol這一項，則安裝成功。
如果這種方法不能安裝成功，可以到這里下載文件手動安裝：http://wbond.net/sublime_packages/package_control/installation。
2、安裝Emmet插件：
按下Ctrl+Shift+P調出命令面板
輸入install調出 Install Package 選項并回車，然后在列表中選中Emmet，或直接輸入Emmet。
安裝成功后，重啟Sublime Text 2。
二、Emmet的用法
新建一個文本文件，鍵入
html:5
按一下"Ctr+E"，這一行就立刻變成下面的樣子。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
這就是Emmet的基本用法：先寫簡寫形式，然后用"Ctr+E"將其轉成HTML代碼。
Emmet支持的簡寫規則，類似于CSS選擇器（大寫的E代表一個HTML標簽）：
1. E 代表HTML標簽。
2.E#id 代表id屬性。
3.E.class 代表class屬性。
4.E[attr=foo] 代表某一個特定屬性。
5.E{foo} 代表標簽包含的內容是foo。
6.E>N 代表N是E的子元素。
7.E+N 代表N是E的同級元素。
8.E^N 代表N是E的上級元素。
請看下面的例子。
p
p#main.item
a[href=http://daybook.diandian.com/]{水牛兒}
div>p
div+p
p>span^div
對應的HTML代碼為：
<p></p>
<p id="main" class="item"></p>
<a href="http://daybook.diandian.com/">水牛兒</a>
<div>
<p></p>
</div>
<div></div>
<p></p>
<p><span></span></p>
<div></div>
Emmet還提供了連寫（E*N）和自動編號（E$*N）功能。
li*3>a
div#item$.class$$*3
對應的HTML代碼為
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<div id="item1" class="class01"></div>
<div id="item2" class="class02"></div>
<div id="item3" class="class03"></div>
參考資料：
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html
http://www.qianduan.net/essential-to-sublime-the-text-2-plugins.html
文章列表
留言列表
