什么是語(yǔ)義元素：
一個(gè)語(yǔ)義元素能夠清楚的描述其意義給瀏覽器和開(kāi)發(fā)者
無(wú)語(yǔ)意 元素實(shí)例<div>和<apan> 無(wú)需考慮內(nèi)容
語(yǔ)義元素實(shí)例：<from> <table> <img> 清楚的定義了他的內(nèi)容
HTML5中新的語(yǔ)義元素
HTML5 提供了新的語(yǔ)義元素來(lái)明確一個(gè)Web頁(yè)面的不同部分:
- <header> 頁(yè)面頭部
- <nav> 導(dǎo)航
- <section>
- <article>
- <aside>
- <figcaption>
- <figure>
- <footer> 尾部
HTML5 <section>元素
<section>標(biāo)簽定義文檔中的節(jié)（section朋截， 區(qū)段）蹄咖，比如章節(jié)肛响，頁(yè)眉铆农，頁(yè)腳或文檔中的其他部分
根據(jù)W3C HTML5文檔：section包含了一組內(nèi)容及標(biāo)題
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
</body>
</html>
HTML5 <article>元素
<article>標(biāo)簽定義獨(dú)立的內(nèi)容
<article>元素使用實(shí)例：
Forum post
Blog post
News stroy
Comment
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p> Windows Internet Explorer 9(縮寫(xiě)為 IE9 )在2011年3月14日21:00 發(fā)布弯蚜。</p>
</article>
</body>
</html>
HTML5 <nav>元素
<nav>標(biāo)簽定義導(dǎo)航鏈接的部分
<nav>元素用于定義頁(yè)面的導(dǎo)航鏈接部分區(qū)域惕鼓，到那時(shí)蟆肆，不是所有的鏈接都需要包含在<nav>元素中
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>
HTML5 <aside>元素
<aside>標(biāo)簽定義頁(yè)面主區(qū)域之外的內(nèi)容（比如側(cè)邊欄）
aside標(biāo)簽的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān)
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body>
</html>
HTML5 <header>元素
<header>元素描述了文檔的頭部區(qū)域
<header>元素主要用于定義內(nèi)容的介紹展示區(qū)域
一下實(shí)例定義了文章的頭部
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p> Windows Internet Explorer 9(縮寫(xiě)為 IE9 )是在2011年3月14日21:00發(fā)布的</p>
</article>
</body>
</html>
HTML5<footer>元素
<footer>元素描述了文檔的底部區(qū)域
<footer>元素應(yīng)該包含特德包含元素
一個(gè)頁(yè)腳通常包含文檔的作者，著作權(quán)信息掉奄，鏈接的使用條款规个，聯(lián)系信息等
文檔中你可以使用多個(gè)<footer>元素
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>
</body>
</html>
HTML5 <figure> 和 <figcaption>元素
<figure>標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像，圖表，照片绰姻，代碼等等）
<figure>元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)枉侧，但如果被刪除引瀑，則不應(yīng)對(duì)文檔流產(chǎn)生影響
<figcaption>標(biāo)簽定義<figure>元素的標(biāo)題
<figcaption>元素被置于"figure"元素的第一個(gè)或最后一個(gè)子元素的位置
實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<body>
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>
</body>
</html>
以上的元素都是塊元素（除了（figcaption））
未來(lái)讓這些塊及元素在所有版本的瀏覽器中生效狂芋，需要在樣式表文件中設(shè)置一下屬性（一下演樣式代碼可以讓舊版本瀏覽器支持本章介紹的塊級(jí)元素）
header, section, footer, aside, nav, article, figure
{
display: block;
}
Internet Explorer 8 及更早IE版本中的問(wèn)題
IE8 及更早IE版本無(wú)法在這些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
解決辦法: 你可以使用HTML5 Shiv Javascript腳本來(lái)解決IE的兼容問(wèn)題憨栽。HTML5 Shiv下載地址：http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js
下載后帜矾，將以下代碼放入到網(wǎng)頁(yè)中：
以上代碼在瀏覽器小于IE9版本時(shí)會(huì)加載html5shiv.js文件. 你必須將其放置于<head> 元素中，因?yàn)?IE瀏覽器需要在頭部加載后渲染這些HTML5的新元素
