First, let's see a sample layout file in rails, and explain it step by step:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
</head>
<body>
<div class="container">
<header>
<%= image_tag("logo.png", :alt => "Sample App", :class => "round") %>
<nav class="round">
<ul>
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</header>
<section class="round">
<%= yield %>
</section>
</div>
</body>
</html>
1. rails 3 use html5 as default, as indicated in <!DOCTYPE html>
2. since html5 is too new, some old IE browsers like IE8 don't support totally support it, so we include some javascript code (known as "html5shiv")to work around it.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
this code piece is weird.
it means, this line of script including will only be included if IE version is less than IE9.
[if lt IE 9] is not rails, it is conditional comment supported only by IE. This purpose is just supplying a way to provide code that only work in IE, not any other browsers. This is very useful
3. then
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
works the same way, if current browser less than IE8, it will include another css file.
This css file fixed many IE-only issues.
4. next, we include another css file, called "custom", to put your custom css, we haven't created it yet.
css is forgiving, even if there is no this file, our page still work fine.
5.next, we put all the contents in to a container div,
<div class="container">
</div>
This is needed by blueprint,
the div tag in html is a generic division, it does nothing but divding the doc into distinct part.
in older html, div tags are used for nearly all site divisions, but html5 adds the "header", "nav" and "section" elements, for divisions common to many apps.
then, there are header and section elements, the header contains the site navigation(nav),
the section element contains the site's main content.
all html elements, including divs and the new html5 elements, can be assigned classed and ids.
these are merely labels, and are useful for styling with CSS. The main differences between classes and ids is that classed can be used multiple times on a page, but ids can only be use once.
<img alt="Sample App" class="round" src="/images/logo.png" />
6. inside the header is a rails helper called "image_tag"
<%= image_tag("logo.png", :alt => "Sample App", :class => "round")%>
note, we also passed a hash as second param,
let's see the html generated:
<img alt="Sample App" class="round" src="/images/logo.png" />
the alt attr is what will be displayed if there is no image.
a. you can see for a img tag, it is not <img></img>
instead, it is <img ....... />
this kind of tag are known as self-closing tags.
b. the alt attr is optional, if you don't specify this param, rails will auto use the file name of the image file, if image doesn't display.
c. rails helpers ofter take options hashes in this way, giving us the flexibility to add arbitrary html options without ever leaving Rails!
7. next is a list of navigation links, using unordered list tag <ul>
link_to is a rails helper to creat links, which will create <a href="" target="_blank" rel="external nofollow" ></a> as html.
the 1st argument is the link text.
the 2nd argument is the url, for now we just use "#" means blank link, link to itself. we will fill it with useful url later.
the generated html will be
<nav class="round">
<ul>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Home</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Help</a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >Sign in</a></li>
</ul>
</nav>
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)