html5新標簽布局應用指南

html5中為了便於設計者的網站布局新添加了一些標簽，本文主要講解這些標簽的實際應用方法。

大多數前端的朋友在設計網站時主要應用<div>標簽構造盒子進行布局，這是種非常高效的方法，可以將整體的布局分拆成為各個部分的布局。在html5中我們可以省去更多的時間對盒子的屬性進行設置。下面兩圖是對傳統方法與HTML5布局方法的對比，可以看出，兩種方法都能實現我們的設計思想。

  

<header>，<footer>:header常用於網站頭部的制作，footer常用於網站尾部的制作。

<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</header>

<footer>
&copy; 2011 Yoko's Kitchen
</footer>

網站的頭部基本都會包含導航，導航的設計在HTML5中由<nav>（navigation：導航）標簽完成。上面的代碼中nav就位於header中。

<artical>:這就是我們網站的主體部分了，用於作為放置網站主要元素的容器，雖然也的是artical，但是他真的是容器不是文章，官方介紹：the artical elements can acts as a container for any section of a page that could stand alone  and potentially syndicated。

<aside>:這就是我們網站的側邊欄了，比如常見網站的側邊導航欄。

<section>:其中文意思是模塊，其標簽內的元素應該是具有相同的功能的，比如音樂，電影，圖書各個模塊。

<a>:HTML5允許將一整塊元素變為鏈接，意思是<a>標簽內部可以再包含其他元素。這個常常被而惡意網站利用，用戶點擊的是關閉按鈕，卻打開了另外的一個惡意網站。

<a href="introduction.html">
<article>
<figure>
<img src="images/bok-choi.jpg"
alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>A five week introduction to traditional
Japanese vegetarian meals, teaching you a
selection of rice and noodle dishes.</p>
</article>
</a>

<figure>:figure提出的主要原因是在傳統的html語言中我們對內容的補充說明需要利用其它標簽，而figure與figcaption搭配使用可以增加代碼的可讀性（沒錯就是只有這個功能）

<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

這些新的元素在舊版本瀏覽器中會被當做行內元素，所以為了保證頁面的正常顯示，可以加入以下代碼：

css：
header, section, footer, aside, nav, article, figure
{
display: block;}
html：
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/ trunk/html5.js"></script> <![endif]-->

 HTML的主要有點是能夠讓開發者更加語義化的開發頁面，比如在HTML之前各個開發者對header都可能會按自己的習慣命名，而HTML5將頭部都統一的命名為了<header>,避免了開發者之間代碼的復雜性。