百分号字符放在每一行的开头，后面紧跟一个标签名，标签名后加一个空格，后跟要在此标签内部显示的文本，例如：
%one
%two
%three Hey there将被编译为：
<one>
<two>
<three>Hey there</three>
</two>
</one>说明：%特殊符号在每个标签名的开头，one、two、three为标签名，标签three后有一个空格，Hey there是要在标签three内部显示的文本。Haml编译后，会自动生成开始标签和结束标签。
标签的属性使用大括号{}包裹起来，:后紧跟该标签的属性，=>后紧跟该标签属性的值，看一个例子：
%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}将被编译为：
<html xmlns=‘http://www.w3.org/1999/xhtml‘ xml:lang=‘en‘ lang=‘en‘></html>属性可以写在多行，属性与属性之间用逗号,分隔，例子：
%script{:type => "text/javascript",
:src => "javascripts/script_#{2 + 7}"}编译后：
<script src=‘javascripts/script_9‘ type=‘text/javascript‘></script>说明：#{...}这种写法，{...}中的是表达式或者变量，最终的值是表达式或者变量的值。
:class和:id属性:class和:id属性可以被定义为一个Ruby的数组，数组中的元素最终会被join方法连接为字符串。:class指定的数组中的元素会被" "空格连接，而:id指定的数组会被"_"字符串连接。例子：
%div{:id => [@item.type, @item.number], :class => [@item.type, @item.urgency]}等价于
%div{:id => "#{@item.type}_#{@item.number}", :class => "#{@item.type} #{@item.urgency}"}说明：可以看到，:id指定的数组[@item.type, @item.number]的元素被"_"下划线字符串连接成"#{@item.type}_#{@item.number}"，@符号后跟的是变量。变量或表达式的值为false的的元素将会被移除，剩下的才会被转换为字符串，例如：
%div{:class => [@item.type, @item == @sortcol && [:sort, @sortdir]] } Contents根据变量和表达式最终的值是true还是false，class会有不同的编译结果:
<div class="numeric sort ascending">Contents</div>
<div class="numeric">Contents</div>
<div class="sort descending">Contents</div>
<div>Contents</div>根据@item.type是否是numeric还是null，@item==@sortcol是否为真，@sortdir是ascending还是descending，会得到不同的结果。
另一个例子：
.item{:class => @item.is_empty? && "empty"}可能的编译结果：
class="item"
class="item empty"之前的例子可以使用简洁的写法：
%html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en")%a(title=@title href=href) Stuff等价于
%a{:title => @title, :href => href} Stuff简洁的写法由于没有逗号分隔属性，因此，不能使用复杂的表达式。要使用表达式，最好使用非简洁写法，并且你可以混用简洁与非简洁形势，例子：
%a(title=@title){:href => @link.href} Stuff使用#{}来插入表达，例子：
%span(class="widget_#{@widget.number}")简洁形势也可以多行书写：
%script(type="text/javascript"
src="javascripts/script_#{2 + 7}")诸如input标签的checked，options的selected属性，例子：
html写法
<input selected>haml写法：
%input{:selected => true}在xhtml中，会被编译为：
<input selected=‘selected‘>将布尔属性设置为false：
%input{:selected => false}编译后：
<input>简洁写法：
%input(selected)设置为true或者false:
%input(selected=true)Class和ID：.和#类似CSS中的class和id选择器，使用.后跟class名来表示标签的class，使用#后跟id名来表示标签的id。多个class可以链式写法，例子：
%div#things
%span#rice Chicken Fried
%p.beans{ :food => ‘true‘ } The magical fruit
%h1.class.otherclass#id La La La编译后
<div id=‘things‘>
<span id=‘rice‘>Chicken Fried</span>
<p class=‘beans‘ food=‘true‘>The magical fruit</p>
<h1 class=‘class otherclass‘ id=‘id‘>La La La</h1>
</div>另一个例子：
%div#content
%div.articles
%div.article.title Doogie Howser Comes Out
%div.article.date 2006-11-05
%div.article.entry
Neil Patrick Harris would like to dispel any rumors that he is straight编译后
<div id=‘content‘>
<div class=‘articles‘>
<div class=‘article title‘>Doogie Howser Comes Out</div>
<div class=‘article date‘>2006-11-05</div>
<div class=‘article entry‘>
Neil Patrick Harris would like to dispel any rumors that he is straight
</div>
</div>
</div>data属性例子：
%a{:href=>"/posts", :data => {:author_id => 123}} Posts By Author编译后
<a data-author-id=‘123‘ href=‘/posts‘>Posts By Author</a>注意：authod_id的下划线被连字符-替换了，如果不希望这样的行为，可以设置haml的hyphenate_data_attrs option为false，输出结果为：
<a data-author_id=‘123‘ href=‘/posts‘>Posts By Author</a>使用HTML5的自定义data属性，根据存储的数据，可以根据数据来选择性的添加某些属性，class等。
div由于div标签经常被使用，因此在不指定标签名的时候，默认的标签为div。例子：
#collection
.item
.description What a cool item!等价于
%div#collection
%div.item
%div.description What a cool item!编译后
<div id=‘collection‘>
<div class=‘item‘>
<div class=‘description‘>What a cool item!</div>
</div>
</div><和>符号>，移除标签两侧的空白；
<，移除标签内部的空白。
它们放置的位置在标签后，class、id、属性后。例子：
%blockquote<
%div
Foo!编译后
<blockquote><div>
Foo!
</div></blockquote>另一个例子：
%img
%img>
%img编译后
<img /><img /><img />又一个例子：
%img
%pre><
foo
bar
%img编译后
<img /><pre>foo
bar</pre><img />Doctype: !!!描述HTML文档类型，例子：
!!! XML
!!!
%html
%head
%title Myspace
%body
%h1 I am the international space station
%p Sign my guestbook编译后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Myspace</title>
</head>
<body>
<h1>I am the international space station</h1>
<p>Sign my guestbook</p>
</body>
</html>通过以下方式定义不同的文档类型
!!!
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
!!! Strict
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
!!! Frameset
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
!!! 5
XHTML 5
<!DOCTYPE html>
!!! 1.1
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
!!! Basic
XHTML Basic 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
!!! Mobile
XHTML Mobile 1.2
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
!!! RDFa
XHTML+RDFa 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">HTML注释:/，例子：
%peanutbutterjelly
/ This is the peanutbutterjelly element
I like sandwiches!编译后
<peanutbutterjelly>
<!-- This is the peanutbutterjelly element -->
I like sandwiches!
</peanutbutterjelly>前置的/可以注释整个缩进的代码块，例子：
/
%p This doesn‘t render...
%div
%h1 Because it‘s commented out!编译后
<!--
<p>This doesn‘t render...</p>
<div>
<h1>Because it‘s commented out!</h1>
</div>
-->条件注释:/[]，例子:
/[if IE]
%a{ :href => ‘http://www.mozilla.com/en-US/firefox/‘ }
%h1 Get Firefox编译后
<!--[if IE]>
<a href=‘http://www.mozilla.com/en-US/firefox/‘>
<h1>Get Firefox</h1>
</a>
<![endif]-->Haml注释:-#
注释的内容再最终编译后不会显示，例子：
%p foo
-# This is a comment
%p bar编译后
<p>foo</p>
<p>bar</p>也可以注释嵌套的内容，所有嵌套的内容最终都不会显示。
%p foo
-#
This won‘t be displayed
Nor will this
Nor will this.
%p bar编译后
<p>foo</p>
<p>bar</p>上述就是脱离Ruby语言的一些用法，一般使用也够用了，还有些用法需要Ruby语言支持。
原文地址：http://blog.csdn.net/sspeed5cm/article/details/45644387
