用html5新佈局元素代替div元素佈局頁面
html5新佈局元素：
1. header 用於設定一個頁面的標題部分，通常會包含標題、logo、導航
3. article元素用於定義一個獨立的內容區塊，比如一篇文章、一篇部落格、一個帖子、論壇的一段使用者評論，一篇新聞訊息等
article元素內可以巢狀其他元素，它可以有自己的頭、尾部、主題內容。使用時要特別注意內容的獨立性，一般對獨立完整的內容才使用article元素，如果一段內容的話應該使用section元素
4. section元素用來定義文章中的章節，用來定義文件中特定的區塊，可視為一個區域分組元素，用來給頁面上的內容分塊。
5. aside元素通常用來設定側邊欄，用於定義元素之外的內容，前提是這些內容與article元素內的內容相關，同時也可作為article內部元素使用，作為主要內容的附屬資訊，比如與主內容有關的參考資料，名詞解釋
6. nav用來定義導航欄、目錄、超連結，並非所有超連結都放在nav中，通常只把一個文件中的主導航欄放在nav中，在文章頁面nav還可以用來給文字做一個目錄的超連結
與div佈局比較，使用header、footer、aside、section這些新佈局元素可以簡化程式碼，要用css樣式的時候不用寫多幾個id來區分，而是直接用元素名稱來定義樣式，相比於div佈局，新佈局元素更有利於搜尋引擎的檢索，減少屬性的使用，從而程式碼看起來就更加簡潔。比如如下的div佈局程式碼及其效果可以用新佈局元素來代替：
div佈局程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用新佈局元素代替div元素佈局</title>
<style>
#div1{
width: 100%;height: 640px;
}
#div2{
height: 20%;background-color: #303040;
}
#div3{
width: 30%;height: 70%;float: left;background-color: #403030;
}
#div4{
width: 70%;height: 70%;float: left;background-color: #305070;
}
#div5{
height: 10%;clear: left;background-color: #705030;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<p>這是頭部</p>
</div>
<div id="div3">
<p>這是側邊欄</p>
</div>
<div id="div4">
<p>這是主內</p>
</div>
<div id="div5">
<p>這是底部</p>
</div>
</div>
</body>
</html> 
新佈局元素程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新佈局元素</title>
<style>
body{
height: 640px;
}
header{
height: 20%;background-color: #303040;
}
aside{
width: 30%;height: 70%;float: left;background-color: #403030;
}
section{
width: 70%;height: 70%;float: left;background-color: #305070;
}
footer{
height: 10%;clear: left;background-color: #705030;
}
</style>
</head>
<body>
<header>
這是頭部
</header>
<aside>
這是側邊欄
</aside>
<section>
這是主內
</section>
<footer>
這是底部
</footer>
</body>
</html> 效果與div佈局的一樣：
把nav元素寫進頭部，對列表、超連結樣式進行設定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新佈局元素</title>
<style>
body{
height: 640px;
}
header{
height: 20%;background-color: #303040;
}
aside{
width: 30%;height: 70%;float: left;background-color: #403030;
}
section{
width: 70%;height: 70%;float: left;background-color: #305070;
}
footer{
height: 10%;clear: left;background-color: #705030;
}
nav{
width: 100%;height: 70%;background: #403020;text-align: center;padding-top: 25px;
}
li{
display: inline;
}
a{
text-decoration: none;color: #008080;
}
</style>
</head>
<body>
<header>
header
<nav>
<ul>
<li>
<a href="http://act.mogujie.com/dongridapeizhinanpc?acm=3.mce.1_10_1evv0.19221.0.5jJjoqzajOyN6.m_347210-pos_5-mf_15261_643574-idx_17-mfs_21&ptp=1._mf1_1239_15261.0.0.7IATgOz">首頁</a>
</li>
<li>
<a href="http://act.mogujie.com/mogunew17pcnz?acm=3.mce.1_10_1evuq.19221.0.5jJjoqzajOyN6.m_347205-pos_0-mf_15261_643574-idx_25-mfs_33&ptp=1._mf1_1239_15261.0.0.7IATgOz">電影</a>
</li>
<li>
<a href="http://act.mogujie.com/sports11?acm=3.mce.1_10_1evuy.19221.0.5jJjoqzajOyN6.m_347209-pos_4-mf_15261_643574-idx_40-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz">音樂</a>
</li>
<li>
<a href="http://act.mogujie.com/qiudongdapeigoupc?acm=3.mce.1_10_1evuu.19221.0.5jJjoqzajOyN6.m_347207-pos_2-mf_15261_643574-idx_38-mfs_45&ptp=1._mf1_1239_15261.0.0.7IATgOz">小說</a>
</li>
</ul>
</nav>
</header>
<aside>
這是側邊欄
</aside>
<section>
這是主內
</section>
<footer>
這是底部
</footer>
</body>
</html>效果如下：
7.hgroup通常放在header裡，作用是方便為標題使用樣式，減少使用id的次數
8.address元素通常用來說明郵件資訊、地址聯絡方式等
9. figure元素是一個媒體組合元素，也就是對其他的媒體元素進行組合，比如影象、圖表等；figcaptio元素用來對figure元素定義標題
<section>
<figure>
<img src="時尚用品.jpg" alt="出錯，無法開啟圖片">
<img src="桌面物件.jpg" alt="出錯，無法開啟圖片">
</figure>
</section>
<footer>
<address>
e-mail:[email protected] 地址:********** 聯絡方式：***********
</address>
</footer><style>
hgroup{
color: #008080;
}
address{
padding-top: 25px;text-align: center;color: #008080;
}
img{
width: 400px;height: 400px;
}
</style>效果：
