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
(完)
szxw 说:
这个似乎很类似于zend coding啊。。
2013年6月11日 17:34 | # | 引用
Rei 说:
slim 比 haml 更简洁。
2013年6月11日 17:35 | # | 引用
阮一峰 说:
haml的%号确实讨厌,但是slim在视觉上不区分标签和内容,我觉得也有问题。
Emmet就是Zen Coding的升级版。
2013年6月11日 17:43 | # | 引用
腹肌痉挛 说:
一直在用zen coding,能简要介绍一下相对于zen来说,emmet有什么特点吗
2013年6月11日 17:52 | # | 引用
怡红公子 说:
感觉...好不习惯的样子...感觉还是比较习惯手打标签...
2013年6月11日 17:53 | # | 引用
腹肌痉挛 说:
去github看了看,原来zen coding好久没更新了,emmet就是从zen fork出来的
原来的基本上都保留了,而且还多了一些新的有用的特性,比较注目的是标签内自动添加隐含tagname和css的模糊搜索
标签内识别举个例子,zen的话,在<div>.test</div>的test后面展开得到的是<div><.test></.test></div>, emmet得到的是<div><div class="test"></div></div>。如果是table下,自动添加tr,tr下自动添加td,以此类推
css的话,以前要得到float:none,必须用fl:n展开,多一个字母少一个都不行,现在用fl:n, flat:e, flo:ne都可以,非常的实用
主页还有更细致的介绍,总的来说,如果之前用zen的,完全可以升级,有过之而无不及
zen code时最麻烦的就是记各种css别名,比html麻烦多了,现在有了模糊搜索实用性大幅度提高了
2013年6月11日 18:43 | # | 引用
ushuz 说:
emment名字好难看
2013年6月11日 19:19 | # | 引用
岳宗坤 说:
是emmet,哈哈
2013年6月11日 19:46 | # | 引用
Iven 说:
这个问题可以用语法高亮来解决…… vim-slim 之类的。
2013年6月11日 20:22 | # | 引用
badapple126 说:
一直不停地从文章中索取营养,非常感谢 :)
2013年6月11日 22:52 | # | 引用
simon 说:
这个看上去要方便很多
2013年6月12日 01:51 | # | 引用
土木坛子 说:
这也不简单啊,我觉得如果能以像写纯文本那样,才叫简洁,不用考虑格式。
2013年6月12日 14:52 | # | 引用
emit 说:
Python 里面我用过jade,我觉得很简洁。
2013年6月12日 15:58 | # | 引用
ppwwyyxx 说:
作为模版考虑可读性和易写性,jade,slim 只要有语法高亮都能完爆haml吧
2013年6月12日 22:41 | # | 引用
水色 说:
/blog/2013/05/boyer-moore_string_search_algorithm.html
/blog/2013/05/jquery-free.html
好奇问一个细节,你怎么区分这两种方式(_ 与 -)的试用
2013年6月13日 14:58 | # | 引用
大名 说:
还是比较喜欢Haml
2013年6月14日 00:50 | # | 引用
jack 说:
zen coding 改为Emmet 好像是团队操作了!
emmet插件好有问题,还是zen coding 好用,怎么感觉团队操作了变得垃圾了?
2013年6月14日 12:12 | # | 引用
sunshine 说:
基本上emacs的yasnippet都搞定了,所有的标签都有模板,何必浪费时间学这些简写法呢????
2013年6月14日 12:14 | # | 引用
逗你玩:) 说:
想用什么功能,都可以找到不断出现的新插件搞定,何必浪费时间学习emacs呢?
2013年6月14日 12:53 | # | 引用
万年木头 说:
原来还可以这么写代码,受教了
2013年6月14日 13:57 | # | 引用
ForEcho 说:
2013年6月14日 14:26 | # | 引用
zzcoding 说:
从效率上想请问zend coding 和 markdown 有什么区别啊
2013年6月14日 18:26 | # | 引用
qiangtou 说:
mardown专注于文字本身,纯为了写文字而生,不用关注排版样式等。转化后生成的html仅支持h1,h2,h3,img,a,code,strong等少量常用的标签。
而zendcoding是一个写html,css代码的简化工具,使用标签的简写方式再加上特定的快捷键来生成冗长的html标签,支持的标签非常多,几乎常用的标签都支持。
2013年6月15日 14:50 | # | 引用
kollocc 说:
用过jade,node.js 的express.js框架默认用的就是jade,语法有些类似。
2013年6月15日 21:43 | # | 引用
jace 说:
就是zencoding,改名为emmet了
2013年6月20日 19:08 | # | 引用
jack 说:
再配合snippetmate插件就更好了,
2013年7月 1日 00:10 | # | 引用
jin 说:
请问修改emmet快捷键怎么弄啊,高了半天都不行
我在vimrc里面加入
let g:user_zen_settings = {
\ 'indentation' : ' ',
\ 'perl' : {
\ 'aliases' : {
\ 'req' : 'require '
\ },
\ 'snippets' : {
\ 'use' : "use strict\nuse warnings\n\n",
\ 'warn' : "warn \"|\";",
\ }
\ }
\}
let g:user_zen_expandabbr_key = ''
let g:use_zen_complete_tag = 1
怎么没用啊
2013年9月11日 11:23 | # | 引用
徐牛 说:
Visual Studio号称最NB的IDE,但是却不支持Emmet CSS(vs的插件中有类似支持Emmet html的)这一直让我觉得难受啊,毕竟emmet的简写用起来能减少不少输入。不过本文中提到了Haml让我觉得似乎确实可以更换html模板(好像称作引擎?)来解决。
2013年9月15日 19:02 | # | 引用
darasion 说:
这些东西貌似真的很蛋疼,人类为了实现网页简单而发明了HTML,本身就很简便了。
推测然后会出现:
HTML代码简写法的简写法;
HTML代码简写法的简写法的简写法;
HTML代码简写法的简写法的简写法的简写法;
HTML代码简写法的简写法的简写法的简写法的简写法;
....
2013年10月 1日 00:36 | # | 引用
valaxy 说:
@darasion:
为了更高的生产力, HTML还可以更简便, 因为熟练的程序员可以处理比HTML更抽象的东西
2013年12月26日 22:35 | # | 引用
chenx 说:
在html中,不能使用css快捷写法了; 不知道是怎么了;
2014年1月14日 14:24 | # | 引用
iiixxxiii 说:
这是进步
2014年3月12日 11:46 | # | 引用
多厘 说:
emmet 前身 zencoding
2014年5月27日 12:05 | # | 引用
viztor 说:
改名字了
2014年6月 8日 02:37 | # | 引用
spring 说:
指出几个问题: 在vs2013中
ul^div 为ul的同级元素div
table>(thead>tr>th*5)(tbody>tr>td*5) 这个例子,明显thead与tbody之间要有"+"
不知道是编辑器不同导致的还是lz的错误……
2014年10月11日 20:37 | # | 引用
xgqfrms 说:
Sublime Text 3 (Windows 10 pro)
Emmet 快速生成HTML5结构:!+ Tab 或者 !+ Ctrl+E
2016年3月16日 17:33 | # | 引用
hahaUU 说:
打个比方来说,新手一天写一个页面,相同的页面熟手可以写3个,甚至是一个网站。这就是区别。
当你是个新手时,你什么都不会,就用HTML代码,入门快,可用全部功能,缺点是浪费时间,容易出错。其后每一次改进都是效率的飞跃。
2016年5月16日 15:43 | # | 引用
邓家旺 说:
atom编辑器自动补全很好用啊
2017年5月12日 15:46 | # | 引用
四喜丸子 说:
table>(thead>tr>th*5)(tbody>tr>td*5)
阮老师, 您好
这行代码的两个小括号之间应该有个加号"+"吧
2018年4月25日 19:33 | # | 引用