HTML代码写起来很费事，因为它的标签多。
一种解决方法是采用模板， 在别人写好的骨架内，填入自己的内容。还有一种就是我今天想要介绍的方法—-简写法。
常用的简写法，目前主要是Emmet和Haml两种，本文都将加以介绍。
这两种简写法，功能相近，各有特点。考虑到Haml基于Ruby语言，我建议Ruby/Rails项目使用Haml，其他项目使用Emmet。
一、Emmet的用法
Emmet是一个编辑器插件，官方网站提供多编辑器支持。我一般使用vim，下面就以vim插件举例。
首先，按照vim插件文档进行安装。然后，新建一个文本文件，键入
按一下”,”(先按ctrl键+y键，然后再按逗号键，不同的编辑器有不同的转化键)，这一行就立刻变成下面的样子。
这就是Emmet的基本用法：先写简写形式，然后用”,”将其转成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代码为：
Emmet还提供了连写(E*N)和自动编号(E$*N)功能。
li*3>a
div#item$.class$$*3
对应的HTML代码为
下面是另外一些简写的例子，读者可以自行测试，看看它们转化成怎样的HTML代码。
header+main+footer
table>(thead>tr>th*5)(tbody>tr>td*5)
nav>ul>(li>a[href=#]{Link})*5
Emmet使用按键”/”，让一个代码块变成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 代表
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代码为：
Haml DemoHello World
在Haml中，”/ “起首的行表示HTML注释，”-# “起首的行表示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/ 在前端开发的过程中,一个最繁琐的工作就 ...
随机推荐
JavaScript系列文章：自动类型转换-续
在上一篇文章中,我们详细讲解了JavaScript中的自动类型转换,由于篇幅限制,没能覆盖到所有的转换规则,这次准备详细讲解一下. 上次我们提到了对象类型参与运算时转换规则: 1). 在逻辑环境中执行 ...
android 腾讯x5内核 浏览器
1.浏览器内核: 主流浏览器内核介绍(前端开发值得了解的浏览器内核历史) 浏览器内核历史介绍: 在android 4.4之前,浏览器用的还是webkit 在android 4.4之后,google就抛 ...
如何获取byte的各个bit值以及常见位操作
项目中通过信号采集板的数据获取车上仪表盘指示灯的信息,将接收到的数据转成byte后,还要将每一个Byte的各个Bit值分离出来,这样才知道每个bit的值代表的具体信息.这里记录下如何获取byte的各个 ...
Html5 学习系列(五)Canvas绘图API快速入门(1)
引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...
在Apache+php中使用json来通讯
示例代码: <?php // 获取输入的内容 $request = http_get_request_body(); // 按json格式解析成一个 php对象 $json_obj = json ...
ZOJ1463
题意:给一个括号字符串,求解最少添加的字符能使整个字符串匹配. 输入: s(未匹配的字符串) 输出: S(匹配后的字符串) 思路:绝壁超级坑的一道题,格式我不想说什么了,特坑,然后就是对给定的字符串, ...
VB6之写注册表
难免会遇到写注册表的情况,写了个实用点的RegWrite函数.为了减少代码量,用WScript.Shell取代了API来实现. 使用方式就在注释中了,就不再过多解释了.PS:注释比实现代码要丰富多了, ...
新概念英语(1-25)Mrs. Smith&#39;s Kitchen
What colour is the electric cooker? Mrs. Smith's Kitchen is small. There is a refrigerator in the ki ...
基本数据类型 异常 数组排序 JVM区域划分
Day01 1.基本数据类型各占几个字节 Byte 1 short2 int4 long8 float4 double6 char2 boolean1 Byte b1=3,b2= ...
QT出现应用程序无法正常启动0xc000007b的错误
最近做了一个成绩管理系统,打包好后,运行他的exe可执行文件时,出现了如下图的错误提示: 在网上查阅了很多资料,其中有篇文章给了我很大的启示和帮助,文章地址http://www.cnblogs.com ...
扫一扫
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
