HTML代码写起来很费事，因为它的标签多。

一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法—-简写法。

常用的简写法，目前主要是Emmet和Haml两种，本文都将加以介绍。

这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，我建议Ruby/Rails项目使用Haml，其他项目使用Emmet。

一、Emmet的用法

Emmet是一个编辑器插件，官方网站提供多编辑器支持。我一般使用vim，下面就以vim插件举例。

首先，按照vim插件文档进行安装。然后，新建一个文本文件，键入

  2. 　　html:5

按一下”<Ctr+y>,”（先按ctrl键+y键，然后再按逗号键，不同的编辑器有不同的转化键），这一行就立刻变成下面的样子。

  2. 　　<!DOCTYPE html>
  3. 　　<html lang="en">
  4. 　　<head>
  5. 　　　　<meta charset="UTF-8">
  6. 　　　　<title></title>
  7. 　　</head>
  8. 　　<body>
  10. 　　</body>
  11. 　　</html>

这就是Emmet的基本用法：先写简写形式，然后用”<Ctrl+y>,”将其转成HTML代码。

Emmet支持的简写规则，类似于CSS选择器（大写的E代表一个HTML标签）：

  2. 　　1. E 代表HTML标签。
  3. 　　2. E#id 代表id属性。
  4. 　　3. E.class 代表class属性。
  5. 　　4. E[attr=foo] 代表某一个特定属性。
  6. 　　5. E{foo} 代表标签包含的内容是foo。
  7. 　　6. E>N 代表N是E的子元素。
  8. 　　7. E+N 代表N是E的同级元素。
  9. 　　8. E^N 代表N是E的上级元素。

请看下面的例子。

  2. 　　p
  4. 　　p#main.item
  6. 　　a[href=http://wikipedia.org]{维基百科}
  8. 　　div>p
  10. 　　div+p
  12. 　　p>span^div

对应的HTML代码为：

  2. 　　<p></p>
  4. 　　<p id="main" class="item"></p>
  6. 　　<a href="http://wikipedia.org">维基百科</a>
  8. 　　<div>
  9. 　　　　<p></p>
  10. 　　</div>
  12. 　　<div></div>
  13. 　　<p></p>
  15. 　　<p><span></span></p>
  16. 　　<div></div>

Emmet还提供了连写（E*N）和自动编号（E$*N）功能。

  2. 　　li*3>a
  4. 　　div#item$.class$$*3

对应的HTML代码为

  2. 　　<li><a href=""></a></li>
  3. 　　<li><a href=""></a></li>
  4. 　　<li><a href=""></a></li>
  6. 　　<div id="item1" class="class01"></div>
  7. 　　<div id="item2" class="class02"></div>
  8. 　　<div id="item3" class="class03"></div>

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

  2. 　　header+main+footer
  4. 　　table>(thead>tr>th*5)(tbody>tr>td*5)
  6. 　　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。

  2. 　　gem install haml

使用时，用命令行将haml文件一次性转为html文件。

  2. 　　haml input.haml output.html

haml的简化规则如下：

  2. 　　1. !!! 5 代表 <!DOCTYPE html>
  3. 　　2. %E 代表HTML标签。
  4. 　　3. %E#id 代表id属性。
  5. 　　4. %E.class 代表class属性。
  6. 　　5. %E(attr="xxx") 代表某一个特定属性。
  7. 　　6. %E XXX 代表插入标签的内容。
  8. 　　7. %E %N 代表N是E的子元素。N如果写在第二行，需要缩进。

下面是Haml的代码示例，代码块的层级关系用缩进表示。

  2. 　　!!! 5
  3. 　　%html{lang: 'en'}
  4. 　　　　%head
  5. 　　　　　　%title Haml Demo
  6. 　　　　%body
  7. 　　　　　　%h1 Hello World
  8. 　　　　　　%a(href="http://wikipedia.org" title="Wikipedia") 维基百科

对应的HTML代码为：

  2. 　　<!DOCTYPE html>
  3. 　　<html lang='en'>
  4. 　　　　<head>
  5. 　　　　　　<title>Haml Demo</title>
  6. 　　　　</head>
  7. 　　　　<body>
  8. 　　　　　　<h1>Hello World</h1>
  9. 　　　　　　<a href='http://wikipedia.org' title='Wikipedia'>维基百科</a>
  10. 　　　　</body>
  11. 　　</html>

在Haml中，”/ “起首的行表示HTML注释，”-# “起首的行表示Haml注释。

HTML的快速写法：Emmet和Haml的更多相关文章

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

    http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml   ...

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

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

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

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

  4. ios 几种快速写法

    //NSString .... NSString *str1 = @"str1"; NSLog(@"str %@",str1); //NSArray NSArr ...

  5. 今天发现新大陆：haml和Emmet

    其实一开始小渣渣我只是想接触一下(css预处理器)sass,可是突然冒出一个haml. 原文是酱紫的. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟 ...

  6. 使用Emmet 快速生成HTML代码

    在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...

  7. 工欲善其事必先利其器，用Emmet提高HTML编写速度

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

  8. 前端学习笔记之HTML/CSS 速写神器 Emmet

    HTML/CSS 速写神器:Emmet 在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet, ...

  9. 转载：HTML/CSS 速写神器：Emmet

    转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...

随机推荐

  1. 《第一行代码》（三： Android 百度地图 SDK v3.0.0）

    百度地图的SDK变化较大,第一行代码里的demo已经不能用了,一直以为是代码类错误,害我花了很多时间,可以参考这位博主的:http://blog.csdn.net/lmj623565791/artic ...

  2. 杭电hdoj题目分类

    HDOJ 题目分类 //分类不是绝对的 //"*" 表示好题,需要多次回味 //"?"表示结论是正确的,但还停留在模块阶 段,需要理解,证明. //简单题看到就 ...

  3. ASP.NET 画图与图像处理－如何直接输出到页面

    有时候我们生成的图片并不需要保存到磁盘中,而是直接输出到页面,比如验证码.实时报表等,如何做呢?请参考如下:     protected void Page_Load(object sender, E ...

  4. 局域网所有机器都能连接MySQL数据库的设置命令

    Sql代码: grant all privileges on *.* to root@"%" identified by 'abc' with grant option; flus ...

  5. 【leetcode】Combination Sum II

    Combination Sum II Given a collection of candidate numbers (C) and a target number (T), find all uni ...

  6. Expected MultipartHttpServletRequest: is a MultipartResolver configured?

    2015-05-05 19:09:47.510::WARN: /purchase/long-term-contract/uploading.htmjava.lang.IllegalArgumentEx ...

  7. TestPointer

     C++ Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

  8. php扩展开发初探

    2015年2月26日 15:44:41 原因: 想用PHP实现一个布隆过滤器算法, 其中要用到位运算, 但是PHP的内置的int类型不给力, 不能支持大整数的位运算 数据一旦太大, 就会变为浮点数表示 ...

  9. php开发网站编码统一问题

    一个良好的网站代码整洁,注释适当是最基本的,也是好的习惯,这可以避免以后的非常乱了自己感觉都乱,一旦重构麻烦就大了耗时耗力,其中网站整个体系的编码是最重要的一个方面,为了网站的稳定性建议php程序,H ...

  10. 2.django笔记之缓存,session,cookie,ajax

    一.django缓存 1.缓存 缓存的意义在于把昂贵的计算结果保存起来一遍下次的访问,有缓存的站点的流程大概是这样子的: 给定一个url,检查页面是否在缓存中 如果在,返回缓存的页面 否则,生成该页面 ...