HTML代碼簡寫法：Emmet和Haml

作者：阮一峰

日期： 2013年6月11日

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的上級元素，

請看下面的例子，


　　p
　　
　　p#main.item
　　
　　a[href=http://wikipedia.org]{維基百科}
　　
　　div>p
　　
　　div+p
　　
　　p>span^div

對應的HTML代碼為：


　　<p></p>
　　
　　<p id="main" ></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>a
　　
　　div#item$.class$$*3

對應的HTML代碼為


　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　
　　<div id="item1" ></div>
　　<div id="item2" ></div>
　　<div id="item3" ></div>

下面是另外一些簡寫的例子，讀者可以自行測驗，看看它們轉化成怎樣的HTML代碼，


　　header+main+footer
　　
　　table>(thead>tr>th*5)(tbody>tr>td*5)
　　
　　nav>ul>(li>a[href=https://www.cnblogs.com/dollar/p/#]{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注釋，更多功能請參考以下鏈接，

　　* Nick Walsh, Craft cleaner, more concise HTML with Haml

　　* Ian Oxley, An Introduction to Haml

　　* Haml Reference

（完）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/523205.html

標籤：Html/Css

上一篇：函式自呼叫與閉包(詳解)

下一篇：1.2 仿百度Web Day2

轉載：HTML代碼簡寫法：Emmet和Haml

HTML代碼簡寫法：Emmet和Haml