HTML代碼簡寫法：Emmet和Haml
HTML 代碼寫起來很費事，因為它的標簽多。
一種解決方法是采用模板， 在別人寫好的骨架內，填入自己的內容。還有一種就是我今天想要介紹的方法----簡寫法。
常用的簡寫法，目前主要是 Emmet 和 Haml 兩種，本文都將加以介紹。
這兩種簡寫法，功能相近，各有特點。考慮到 Haml 基于 Ruby 語言，我建議 Ruby/Rails 項目使用 Haml，其他項目使用 Emmet。
一、Emmet 的用法
Emmet 是一個編輯器插件，官方網站提供多編輯器支持。我一般使用 vim，下面就以 vim 插件舉例。 首先，按照 vim 插件文檔進行安裝。然后，新建一個文本文件，鍵入
html:5
</blockquote>按一下"<Ctr+y>,"（先按 ctrl 鍵 +y 鍵，然后再按逗號鍵，不同的編輯器有不同的轉化鍵），這一行就立刻變成下面的樣子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
</blockquote>這就是 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的上級元素。
</blockquote>請看下面的例子。
p
p#main.item
a[href=http://wikipedia.org]{維基百科}
div>p
div+p
p>span^div
</blockquote>對應的 HTML 代碼為：
<p></p>
<p ></p>
<a >維基百科</a>
<div>
<p></p>
</div>
<div></div>
<p></p>
<p><span></span></p>
<div></div>
</blockquote>Emmet 還提供了連寫（E*N）和自動編號（E$*N）功能。
li*3>a
div#item$.class$*3
</blockquote>對應的 HTML 代碼為
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<div ></div>
<div ></div>
<div ></div>
</blockquote>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
</blockquote>二、Haml 的用法
Haml 不同于 emmet，它是一個命令行工具。需要先安裝 Ruby 語言，再安裝 Haml。
gem install haml
</blockquote>使用時，用命令行將 haml 文件一次性轉為 html 文件。
haml input.haml output.html
</blockquote>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如果寫在第二行，需要縮進。
</blockquote>下面是 Haml 的代碼示例，代碼塊的層級關系用縮進表示。
!!! 5
%html{lang: 'en'}
%head
%title Haml Demo
%body
%h1 Hello World
%a( title="Wikipedia") 維基百科
</blockquote>對應的 HTML 代碼為：
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Haml Demo</title>
</head>
<body>
<h1>Hello World</h1>
<a title='Wikipedia'>維基百科</a>
</body>
</html>
</blockquote>在 Haml 中，"/ "起首的行表示 HTML 注釋，"-# "起首的行表示 Haml 注釋。 更多功能請參考以下鏈接。
* Nick Walsh, Craft cleaner, more concise HTML with Haml
* Ian Oxley， An Introduction to Haml
</blockquote>來自: 阮一峰的網絡日志本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！