HTML的快速写法：Emmet和Haml

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

时间： 2024-07-29 04:11:56

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

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两种,本文都将加以介绍. 这两种简写法,功能相近,各有特点

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

HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法----简写法. 常用的简写法,目前主要是Emmet和Haml两种,本文都将加以介绍. 这两种简写法,功能相近,各有特点.考虑到Haml基于Ruby语言,我建议Ruby/Rails项目使用Haml,其他项目使用Emmet. 一.Emmet的用法 Emmet是一个编辑器插件,官方网站提供多编辑器支持.我一般使用vim,下面就以vim插件举例. 首先,按照vim插

快速安装Emmet插件

最近痴迷于sublime的性感不可自拔,然后在了解到Emmet插件的强大之后果断的去寻找Emmet插件来安装,可是在网上搜了大半天都没有特别满意的,最后在github上找到了想要的资源,看了网上的安装步骤之后,喜欢简单粗暴的我觉得方法实在是复杂的让人有种想退缩的欲望,所以就写下这篇文章,和大家分享一下我的安装步骤,不简单不要钱!! 1.首先百度Emmet关键词,出来的第一个词条便是我们要的东西,进入之后是Emmet首页,直接点击sublime然后就会进入github网页中去(全英的表示看不懂啊.

ios 几种快速写法

//NSString .... NSString *str1 = @"str1"; NSLog(@"str %@",str1); //NSArray NSArray *arr1 = @[@"one",@"two",@"three",@"four",@YES,@(NO),@1,@(2)]; NSLog(@"count %d",arr1.count); NSLog(@&q

C++ 结构体多元素sort排序调用时的写法

//总结一下,结构体数据排序的快速写法 //以后在遇到需要写的时候,不要迟疑快速写完 struct node { int u, v, w; }a[10000]; //假设该结构体有3个元素 //现在仅实现结构体数组按照w的值从小到大的排序 //1.基于C++的重载写法,写在结构体的定义内 如下: struct node { int u, v, w; bool operator <(const node &x)const { return w<x.w; //升序排列 } }; //现在提

Atom编辑器折腾记_(7)Emmet实例教程

题外话 Atom的emmet插件有些功能给阉割了 说阉割倒不如说atom本身自带的一些功能替代了atom的拓展功能 教程主要是常用的基础知识,在最后我会附上emmet完整简写表,大伙可以把图片在新页面打开另存为 何为Emmet 简言之,Emmet的前身是大名鼎鼎的Zen coding; 功能 snippet(代码片段,不如用专门的片段插件) abbreviation expand(简写展开) 目的 只有一个,加快web开发(编码速度) Emmet基础 知识预备 HTML/CSS标签熟悉掌握 -

haml语法

元素名: % 百分号字符放在每一行的开头,后面紧跟一个标签名,标签名后加一个空格,后跟要在此标签内部显示的文本,例如: %one %two %three Hey there 将被编译为: <one> <two> <three>Hey there</three> </two> </one> 说明:%特殊符号在每个标签名的开头,one.two.three为标签名,标签three后有一个空格,Hey there是要在标签three内部显示的

【转载】前端学习路径

前端学习路径 什么是前端工程师? 总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术,在工作中配合设计师实现用户界面,和后端工程师进行数据对接,完成Web应用开发的职位. 开发工具 设计软件 前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码,所以我们要学习一些设计软件的基础操作和切图方法. Photoshop 运用最广泛的设计软件,大部分人都在用它,很有必要学习一下 前端工程师必备的PS技能——切图篇 Sketch 轻量且功能强大,切图迅速高效,为UI设计而生

前端学习路径

作者:余博伦链接:https://zhuanlan.zhihu.com/p/21935921来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 什么是前端工程师? 总而言之前端工程师就是运用HTML/CSS/JavaScript等Web技术,在工作中配合设计师实现用户界面,和后端工程师进行数据对接,完成Web应用开发的职位. 阅读更多有关前端工程师 开发工具 设计软件 前端工程师最首要的任务就是把设计师的设计图切好并翻译成代码,所以我们要学习一些设计软件的基础操作和切