HTML代码简写法：Emmet和Haml -

36kr

浏览: 10038 次

最近访客更多访客>>

Qq123q

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (9)

社区版块

存档分类

HTML代码简写法：Emmet和Haml

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

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://" title="Wiki pedia") 维基百科

对应的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注释。更多功能请参考以下链接。

分享到：