HTML代码简写法:Emmet和Haml

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

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

常用的简写法,目前主要是EmmetHaml两种,本文都将加以介绍。

这两种简写法,功能相近,各有特点。考虑到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   * 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注释。 更多功能请参考以下链接。

  * Nick Walsh, Craft cleaner, more concise HTML with Haml   * Ian Oxley, An Introduction to Haml   * Haml Reference

(完)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

理工男图解零维到十维空间,烧脑已过度,受不了啦!

让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

34330
来自专栏怀英的自我修炼

考研英语-1-导学

英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

12110
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

18230
来自专栏钱塘大数据

中国互联网协会发布:《2018中国互联网发展报告》

在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

13750
来自专栏微信公众号:小白课代表

不只是软件,在线也可以免费下载百度文库了。

不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

44630
来自专栏腾讯社交用户体验设计

ISUX Xcube智能一键生成H5

51420
来自专栏前端桃园

知识体系解决迷茫的你

最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

22240
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.2K20
来自专栏腾讯高校合作

【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

15920
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

29940

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励