http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854

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

　　

下面是另外一些简写的例子，读者可以自行测试，看看它们转化成怎样的HTML代码。



　　header+main+footer

　　

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

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

　　* Ian Oxley, An Introduction to Haml

　　* Haml Reference

（完）

HTML代码简写法：Emmet和Haml的更多相关文章

  1. HTML代码简写法：Emmet和Haml（转）

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...

  2. HTML的快速写法：Emmet和Haml

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法—-简写法. 常用的简写法,目前主要是Emmet和Haml两种 ...

  3. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  4. c#字符串加载wpf控件模板代码 - 简书

    原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...

  5. Hibernate事务代码规范写法

    ----------------siwuxie095 事务相关概念 1.什么是事务 逻辑上的一组操作,构成这组操作的各个单元,要么一起成功, 要么一起失败 2.事务的四个特性 1)原子性 2)一致性 ...

  6. OpenStack之虚机冷迁移代码简析

    OpenStack之虚机冷迁移代码简析 前不久我们看了openstack的热迁移代码,并进行了简单的分析.真的,很简单的分析.现在天气凉了,为了应时令,再简析下虚机冷迁移的代码. 还是老样子,前端的H ...

  7. 前端代码新写法——Zen Coding

    是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...

  8. 背景图片等比缩放的写法background-size简写法

    1.背景图片或图标也可像img一样给其宽高就能指定其缩放大小了. 比如一个实际宽高36*28的图标,要缩小一半引用进来的写法就是: background:rgba(0, 0, 0, 0) url(&q ...

  9. WinForm 自动完成控件实例代码简析

    在Web的应用方面有js的插件实现自动完成(或叫智能提示)功能,但在WinForm窗体应用方面就没那么好了. TextBox控件本身是提供了一个自动提示功能,只要用上这三个属性: AutoComple ...

随机推荐

  1. Node.js 基础库

    全局对象 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global对象的属性. 我们在 Node.js 中能够直接访问到对象通常都是 global ...

  2. 移动APP的开发迭代离不开测试，你搞清楚其中的关键点了吗？

    App测试的一个要求是一个beta测试环境.为此,操作系统制造商要么提供他们自己的测试环境,比如:Testflight (iOS),要么可以使用任一商用工具,如:HockeyApp (Android) ...

  3. MYSQL 模糊查询

    下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] ...

  4. Vim插件管理器Vundle使用

    参考地址:http://www.linuxidc.com/Linux/2012-12/75684.htm Vundle(Vim bundle) 是一个vim的插件管理器. 其Github地址为: ht ...

  5. 用excel做分组散点图

    散点图主要观察两组变量间的趋势和分布,如果变量多于两组,仍旧使用散点图的话,那所有点都会集中在同一显示区域内,使人无法准确判断,此时一般使用散点图矩阵进行两两比较.除此之外,如果并不关心组与组之间的关 ...

  6. JAVA04类与对象之课后问题解决

    1.验证ClassAndObjectTest.java(使用自定义类) public class ClassAndObjectTest { public static void main(String ...

  7. springMVC拦截器和过滤器总结

    拦截器: 用来对访问的url进行拦截处理 用处: 权限验证,乱码设置等 spring-mvc.xml文件中的配置: <beans xmlns="http://www.springfra ...

  8. js效果-多选只能选两项,如果超出自动取消第一次选的

    这个效果很有意思,个人觉得难点在于点击选中状态的多选的数组操作,以下是代码,感谢落梨 <!DOCTYPE> <html> <head> <title> ...

  9. b/s 读取多个FTP文件（图片，视频）压缩到服务器 下载到客户端

    其实需求是这样, 要做一键导出, 有图片,有照片,youhtml,存在不同的文件夹,每次下载都必须下载最新数据,因为FTP是随时更新的. 1.这要是一直下载下载,浏览器一直跳窗口,蛋疼的我都看不下去. ...

  10. iOS沙盒（sandbox）

    iOS沙盒 每个ios应用都有自己的应用沙盒,应用沙盒就是文件系统目录,默认下iOS应用只能访问自己的沙盒 extenaion是iOS8新开放的一种对几个固定系统区域的扩展机制,它可以在一定程度上弥补 ...