標籤：http 使用 os 檔案 width 2014
HTML代碼寫起來很費事，因為它的標籤多。
一種解決方案是採用模板， 在別人寫好的骨架內，填入自己的內容。還有一種就是我今天想要介紹的方法—-簡寫法。
常用的簡寫法，目前主要是Emmet和Haml兩種，本文都將加以介紹。
這兩種簡寫法，功能相近，各有特點。考慮到Haml基於Ruby語言，我建議Ruby/Rails項目使用Haml，其他項目使用Emmet。
一、Emmet的用法
Emmet是一個編輯器外掛程式，官方網站提供多編輯器支援。我一般使用vim，下面就以vim外掛程式舉例。
首先，按照vim外掛程式文檔進行安裝。然後，建立一個文字檔，鍵入
html:5
按一下”<Ctr+y>,”（先按ctrl鍵+y鍵，然後再按逗號鍵，不同的編輯器有不同的轉化鍵），這一行就立刻變成下面的樣子。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body></body></html>
這就是Emmet的基本用法：先寫簡寫形式，然後用”<Ctrl+y>,”將其轉成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的上階項目。
請看下面的例子。
pp#main.itema[href=http://wikipedia.org]{維基百科}div>pdiv+pp>span^div
對應的HTML代碼為：
<p></p><p id="main" class="item"></p><a href="http://wikipedia.org">維基百科</a><div><p></p></div><div></div><p></p><p><span></span></p><div></div>
Emmet還提供了連寫（E*N）和自動編號（E$*N）功能。
li*3>adiv#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>
下面是另外一些簡寫的例子，讀者可以自行測試，看看它們轉化成怎樣的HTML代碼。
header+main+footertable>(thead>tr>th*5)(tbody>tr>td*5)nav>ul>(li>a[href=#]{Link})*5
Emmet使用按鍵”<Ctrl+y>/”，讓一個代碼塊變成HTML注釋。更多功能請參考以下連結：
* Zeno Rocha, Goodbye, Zen Coding. Hello, Emmet!
* Sergey Chikuyonok, Zen Coding: A Speedy Way To Write HTML/CSS Code
* Joshua Johnson, 7 Awesome Emmet HTML Time-Saving Tips
* Zen-coding vim tutorial
二、Haml的用法
Haml不同於emmet，它是一個命令列工具。需要先安裝Ruby語言，再安裝Haml。
gem install haml
使用時，用命令列將haml檔案一次性轉為html檔案。
haml input.haml output.html
haml的簡化規則如下：
1. !!! 5 代表 <!DOCTYPE html>2. %E 代表HTML標籤。3. %E#id 代表id屬性。4. %E.class 代表class屬性。5. %E(attr="xxx") 代表某一個特定屬性。6. %E XXX 代表插入標籤的內容。7. %E %N 代表N是E的子項目。N如果寫在第二行，需要縮排。
下面是Haml的程式碼範例，代碼塊的層級關係用縮排表示。
!!! 5%html{lang: ‘en‘}%head%title Haml Demo%body%h1 Hello World%a(href="http://wikipedia.org" title="Wikipedia") 維基百科
對應的HTML代碼為：
<!DOCTYPE html><html lang=‘en‘><head><title>Haml Demo</title></head><body><h1>Hello World</h1><a href=‘http://wikipedia.org‘ title=‘Wikipedia‘>維基百科</a></body></html>
在Haml中，”/ “起首的行表示HTML注釋，”-# “起首的行表示Haml注釋。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
