<header>標(biāo)簽
<header>標(biāo)簽定義文檔的頁眉(介紹信息),用法:
<header><h1>阿邦Dreamweaver專欄</h1></header>
<nav>標(biāo)簽
<nav> 標(biāo)簽定義導(dǎo)航鏈接的部分,用法:
<nav>
<ul>
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
</ul>
</nav>
<section> 標(biāo)簽
<section> 標(biāo)簽定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分,用法:
<section>
<h1>標(biāo)題一</h1>
<p>文章段落內(nèi)容</p>
</section>
<article> 標(biāo)簽
<article> 標(biāo)簽定義外部的內(nèi)容。
外部內(nèi)容可以是來自一個(gè)外部的新聞提供者的一篇新的文章,或者來自blog的文本,或者是來自論壇的文本。亦或是來自其他外部源內(nèi)容。總之,可以理解為article所表示的就是文章內(nèi)容。用法:
<article>
<a href="#">文章內(nèi)鏈接</a><br />文章內(nèi)容文章內(nèi)容文章內(nèi)容
</article>
<aside> 標(biāo)簽
<aside>標(biāo)簽定義article以外的內(nèi)容。aside的內(nèi)容應(yīng)該與article的內(nèi)容相關(guān),如上圖所示,它類似于布局中的輔助側(cè)邊欄。用法:
<aside>
<h4>小標(biāo)題</h4>
段落內(nèi)容段落內(nèi)容
</aside>
<footer> 標(biāo)簽
<footer> 標(biāo)簽定義section或document的頁腳。在典型情況下,該元素會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息,也就是類似于版權(quán)信息的東西。用法:
<footer>頁腳文字,版權(quán)信息等</footer>
如果要達(dá)成上圖的效果,整體的Html5代碼應(yīng)該如下:
<!DOCTYPE html>
<html>
<head>
<title>Html5示范文檔</title>
</head>
<body> <header>
<h1><a href="#">阿邦Dreamweaver專欄-Html5布局示范文檔</a></h1>
</header>
<nav>
<ul>
<li><a href="#">菜單一</a></li>
<li><a href="#">菜單二</a></li>
<li><a href="#">菜單三</a></li>
<li><a href="#">菜單四</a></li>
</ul>
</nav>
<section>
<header>內(nèi)容標(biāo)題</header>
<article>文章內(nèi)容</article>
<footer>文章版權(quán)內(nèi)容</footer>
</section>
<aside>相關(guān)內(nèi)容</aside>
<footer>頁腳、頁面版權(quán)內(nèi)容</footer>
</body>
</html>
完整的Html5代碼如上所列,但它只是Html的代碼結(jié)構(gòu),如果讓它變成上圖那種樣式,仍需要CSS代碼支持,這時(shí)候可以用到CSS3。