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的上级元素。
请看下面的例子。
pp#main.itema[href=http://wikipedia.org]{维基百科}div>pdiv+pp>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>adiv#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+footertable>(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注释。
HTML的快速写法：Emmet和Haml的更多相关文章
- HTML代码简写法：Emmet和Haml
http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html?bsh_bid=657901854 HTML代码简写法:Emmet和Haml ...
- HTML代码简写法：Emmet和Haml（转）
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- ios 几种快速写法
//NSString .... NSString *str1 = @"str1"; NSLog(@"str %@",str1); //NSArray NSArr ...
- 今天发现新大陆：haml和Emmet
其实一开始小渣渣我只是想接触一下(css预处理器)sass,可是突然冒出一个haml. 原文是酱紫的. Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟 ...
- 使用Emmet 快速生成HTML代码
在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...
- 工欲善其事必先利其器，用Emmet提高HTML编写速度
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板,在别人写好的骨架内,填入自己的内容.还有一种很炫的方法----简写法. 常用的简写法,目前主要是Emmet和Haml两种.这两种简写 ...
- 前端学习笔记之HTML/CSS 速写神器 Emmet
HTML/CSS 速写神器:Emmet 在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet, ...
- 转载：HTML/CSS 速写神器：Emmet
转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...
随机推荐
- 前端 解决swiper js 手动滑动一下后不能自动播放
用户操作swiper之后,是否禁止autoplay.默认为true:停止.如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay.操作包括触碰,拖动,点击pa ...
- Ninject学习笔记<二>
本文转载自kuangkro 如果给您带来不便请联系博主 一.控制反转和依赖注入 Ninject是一个轻量级的基于.Net平台的依赖注入(IOC)框架.所谓的IOC,即控制反转(Inversion of ...
- python提取百万数据到csv文件
转自:http://www.2cto.com/kf/201311/258112.html 今天有需求,需要把系统所有用户注册的id和邮箱等信息导出来提供给他们,在mysql里面count了下,大概有3 ...
- glGetFloatv (GL_MODELVIEW_MATRIX, mat)
这个函数的作用是取出GL_MODELVIEW_MATRIX,然后存储在mat这个矩阵中,用于逆变换等.
- 天使之城（codevs 2821）
2821 天使之城 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 天使城有一个火车站,每辆火车 ...
- 组合数（codevs 1631）
1631 组合数 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 组合数C(N, K)表示 ...
- 防止黑客对服务器IP地址的攻击
下面的参数都是系统默认的: [root@ok etc]# cat /proc/sys/net/ipv4/conf/eth0/accept_source_route [root@ok etc]# cat ...
- 2016国产开源软件TOP100（Q1）
随着互联网的发展.开放标准的普及和虚拟化技术的应用等诸多IT新领域的创新及拓展,开源技术凭借其开放性.低成本.稳定性.灵活性.安全性和技术创新性等特点迅速走向成熟,逐步发展成为一种主流模式,日益改变着 ...
- Entity Framework 使用
1.EF中Include方法的使用使用Include方法,告诉EF连接查询哪个外键属性,生成Inner join连接 //必须引用using System.Data.Entity;才能用Include ...
- OAuth2 通用组件源码下载(支持新浪微博、QQ、淘宝)(转载)
转载地址:http://www.cyqdata.com/download/article-detail-54302 OAuth2 社区通用组件说明: 源码为C#(.NET)写成,目前支持新浪微博. ...