HTML代码简写法：Emmet和Haml
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
二、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
（完）
HTML代码简写法：Emmet和Haml的更多相关文章
- HTML代码简写法：Emmet和Haml（转）
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml ...
- HTML的快速写法：Emmet和Haml
HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法—-简写法. 常用的简写法,目前主要是Emmet和Haml两种 ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- c#字符串加载wpf控件模板代码 - 简书
原文:c#字符串加载wpf控件模板代码 - 简书 ResourceManager resManagerA = new ResourceManager("cn.qssq666.Properti ...
- Hibernate事务代码规范写法
----------------siwuxie095 事务相关概念 1.什么是事务 逻辑上的一组操作,构成这组操作的各个单元,要么一起成功, 要么一起失败 2.事务的四个特性 1)原子性 2)一致性 ...
- OpenStack之虚机冷迁移代码简析
OpenStack之虚机冷迁移代码简析 前不久我们看了openstack的热迁移代码,并进行了简单的分析.真的,很简单的分析.现在天气凉了,为了应时令,再简析下虚机冷迁移的代码. 还是老样子,前端的H ...
- 前端代码新写法——Zen Coding
是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...
- 背景图片等比缩放的写法background-size简写法
1.背景图片或图标也可像img一样给其宽高就能指定其缩放大小了. 比如一个实际宽高36*28的图标,要缩小一半引用进来的写法就是: background:rgba(0, 0, 0, 0) url(&q ...
- WinForm 自动完成控件实例代码简析
在Web的应用方面有js的插件实现自动完成(或叫智能提示)功能,但在WinForm窗体应用方面就没那么好了. TextBox控件本身是提供了一个自动提示功能,只要用上这三个属性: AutoComple ...
随机推荐
- 运行Shell脚本的几种方式解析
1 给脚本加上执行权限chmod u+x a.sh, 而后就可以直接用全路径来执行脚本了,比如当前文件夹下用./a.sh, 如果脚本所在目录在PATH环境变量之中, 则直接用a.sh即可 2 sh/b ...
- an interview question(1)
声明:本文为博主原创文章,未经博主允许不得转载. 以下是英文翻译: warnning: Copyright!you can't reprint this blog when you not get b ...
- 【Java】异常处理_学习笔记
异常: 1.格式1: try { //业务代码 } catch(Exception e) { //异常处理代码 } 说明: a. 异常抛出:执行try里的代码,系统会自动生成一个异常对象,该对象会 ...
- Js Map 实现
/* * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, v ...
- bootstrap 实战入门教程（一）
说起响应式前端框架,比较而言,bootstrap还是不错的,虽然可能很多文档都是英文的.今天就整理下自己在学习及使用bootstrap3时的重要知识点和使用案例 参考资料: runoob的bootst ...
- ToolBar 修改边距
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android ...
- VS后台程序无法调用App_Code里的公共类解决方案
在Web应用程序中不能通过右键项目-〉”添加“-〉”添加ASP.NET文件夹“方式添加 .因为Web应用程序中App_Code就不存在 .不过可以通过手动的方式创建,添加一个文件夹命名为App_Cod ...
- Sql获取周、月、年的首尾时间。
,) -- 本周周一 ,,,)) -- 本周周末 ,) -- 本月月初 ,,,)) -- 本月月末 ,,) -- 上月月初 ,,)) -- 上月月末 ,) -- 本年年初 ,,,)) -- 本年年末 ...
- 使用requestAnimationFrame做动画效果二
3月是个好日子,渐渐地开始忙起来了,我做事还是不够细心,加上感冒,没精神,今天差点又出事了,做过的事情还是要检查一遍才行,哎呀. 使用requestAnimationFrame做动画,我做了很久,终于 ...
- Tomcat（免安装版）的安装与配置
一.下载Tomcat Tomcat可以从http://tomcat.apache.org/网站下载,选择任意版本,在 Binary Distributions 下的zip包既是. 二.配置Tomcat ...