html的简化写法-haml和emmet的简单介绍

最新推荐文章于 2024-02-09 23:24:45 发布

DDDDemo

最新推荐文章于 2024-02-09 23:24:45 发布

阅读量1.4k

点赞数 1

分类专栏： php

php 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

关于HAML和HTML

下面是一个html的范例：

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= h current_user.bio %></div>
  </div>
</div>

你可以看见，这只是标准的HTML/ERb的代码片断。对于你来说，这可能不会那么刺激审美神经。然而，正如Grigsby在他的文章中巧妙地解释到的，不仅仅里面会存在许多重复，而且也会出现很多不必要的字符。Hampton认为，标识语言应该是赏心悦目的，而且不是所有能赏心悦目的东西都很好，他认为能优雅到让你开发速度更快，这才是最好的。因此，从这点出发，输出同样结果的代码片段子Haml看起来应该是这样的：

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= h(current_user.bio)

这看起来可能会有点奇怪，不过你不得不承认的是，这代码瘦下来好多。值得注意的是，代码中大量使用了空格来消除HTML的闭合标签，并使用CSS风格的语法来描述div的id和class，而且消除了难看的<%= %>标签。如果你比较一下两个版本字符数的大小，你会发现范例中Haml版本的字符数是HTML版本的64%。这就意味着你可以少输入36%的字符、少读36%的字符。归根到底就是少了36%的碍眼的东西。Antoine de Saint-Exupery对Haml给于了高度评价：“在没有什么可以去除，而不是什么都加不进去的时候，十全十美的目标就达到了。”

关于EMMET和HTML

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>

本文参考：

http://www.bianceng.cn/web/Html/201411/46562.htm

http://www.infoq.com/cn/news/2007/05/haml-beauty-of-efficiency/

DDDDemo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的简化写法-haml和emmet的简单介绍

关于HAML和HTML下面是一个html的范例：你可以看见，这只是标准的HTML/ERb的代码片断。对于你来说，这可能不会那么刺激审美神经。然而，正如Grigsby在他的文章中巧妙地解释到的，不仅仅里面会存在许多重复，而且也会出现很多不必要的字符。Hampton认为，标识语言应该是赏心悦目的，而且不是所有能赏心悦目的东西都很好，他认为能优
复制链接

扫一扫