`
qw232144
  • 浏览: 33809 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

html简化haml补全录

 
阅读更多

        前段时间写了一个html简化成haml的概述，但写的不全面，随着我自己用了将近一个月的实践我来把它补充一下。

       首先haml和html最大的区别在于haml简化了html的写法，省略了结束符，'<'  '>'符号也用%来表示。haml和html各有优劣，html的优点是它能够很清楚的显示一个标签的开头和结尾，是整个代码页面显得很清楚。但不停地写'<','>'和结尾符号显得过于麻烦，对于我这种懒人我更喜欢haml这种简化版的代码。

        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中没有复杂的开始结束符，只用一个%加标签名就可以了，但它也有一个缺点，就是如果使用haml就必须注意格式，因为haml没有结尾福，所以不能像html那样随便写。例如：

<div><a></a></div>           //html ,<div>标签中包含了一个<a>标签

<div>
<a></a></div>               //html ,<div>标签中包含了一个<a>标签
<div>
 
<div>
<a></a>
</div>      //html ,<div>标签中包含了一个<a>标签

%div %a         //haml,<div>标签中包含了一个<a>标签
%div 
  %a            ////haml,<div>标签中包含了一个<a>标签，注意写在第二行要缩进

%div
%a            //haml,<div>标签和<a>标签是并列关系

在我们用编程工具写html，js，css等代码有一个快捷键可以整理代码，Ctrl+Alt+Win+L，在haml编写中也不起作用，所以要想用haml编写程序，就要注意格式。

       下面我来介绍也谢haml的用法。

       首先就是标签本某些特定的属性用%xx{:xxx=>"xxxx”}表示，如：

<div width="100%">     //html,div的宽度设为100%

%div{:style=>"width: 100%"}   //haml,div的宽度设为100%

//如果想多调用几个style,就用;隔开
%div{:style=>"width: 100%;height:100px"} 
//若果同时有多条特性,各属性之间用'，'隔开

%div{:style=>"width: 100%",onclick=>"function()",herf=>"xxxxxxxxxxxxx"}

       当然了我们通常是采用外部调用的，这里只是简单介绍一下。

       下面来说调用函数，html一般都是用<script></script>标签来实现的,把函数放在<head>或<body>标签中，然后用onclick调用，例如：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

      而haml就省略了这些，直接在标签中onclick调用写在js文件中的function。例如:

%button{:onclick=>"Myfunction（）“}

     这也是我喜欢haml的原因之一。

    而且在haml中我们可以不用写hade，body等标签，直接用div块来完成整个页面。

 

     当你需要调用较多时用，分隔开如：

%button{:class=>"mystyle",onclick=>"myfunction（）"}

    haml想要显示文本内容，直接在标签后加入文本就可以了，例如：

%h1 这是一个标题
%button提交       //一个提交文本的按钮

    用haml给标签一个id有两种方法：

 //给div一个id为name

%div#name   
%div{:id=>"name"}

 其实任何编程语言之间的变换都是有规律的，只要你掌握了规律很快就能掌握一门编程语言。

分享到：
| 微信支付js api
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics