HTML5 語義元素
語義= 意義.
語義元素 = 元素的意義.
什么是語義元素?
一個語義元素能夠清楚的描述其意義給瀏覽器和開發(fā)者。
無語義 元素實例: <div> 和 <span> - 無需考慮內(nèi)容.
語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內(nèi)容.
瀏覽器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持語義元素。
注意: Internet Explorer 8及更早版本不支持該元素. 但是文章底部提供了兼容的解決方法.
HTML5中新的語義元素
許多現(xiàn)有網(wǎng)站都包含以下HTML代碼： <div id="nav">, <div class="header">, 或者 <div id="footer">, 來指明導(dǎo)航鏈接, 頭部, 以及尾部.
HTML5提供了新的語義元素來明確一個Web頁面的不同部分:
<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>
HTML5 <section> 元素
<section> 標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
根據(jù)W3C HTML5文檔: section 包含了一組內(nèi)容及其標(biāo)題。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</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)簽定義獨立的內(nèi)容。.
<article> 元素使用實例:
Forum post
Blog post
News story
Comment
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <article> <h1>Internet Explorer 9</h1> <p> Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發(fā)布。</p> </article> </body> </html>
運行實例 ?點擊 "運行實例" 按鈕查看在線實例
HTML5 <nav> 元素
<nav> 標(biāo)簽定義導(dǎo)航鏈接的部分。
<nav> 元素用于定義頁面的導(dǎo)航鏈接部分區(qū)域，但是，不是所有的鏈接都需要包含在 <nav> 元素中!
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <nav> <a href="#">HTML</a> | <a href="#">CSS</a> | <a href="#">JavaScript</a> | <a href="#">jQuery</a> </nav> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
HTML5 <aside> 元素
<aside> 標(biāo)簽定義頁面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）。
aside 標(biāo)簽的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān).
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</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ū)域.
在頁面中你可以使用多個<header> 元素.
以下實例定義了文章的頭部:
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</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(縮寫為 IE9 )是在2011年3月14日21:00發(fā)布的</p> </article> </body> </html>
運行實例 ?
點擊 "運行實例" 按鈕查看在線實例
HTML5 <footer> 元素
<footer> 元素描述了文檔的底部區(qū)域.
<footer> 元素應(yīng)該包含它的包含元素
一個頁腳通常包含文檔的作者，著作權(quán)信息，鏈接的使用條款，聯(lián)系信息等
文檔中你可以使用多個 <footer>元素.
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</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ī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）。
<figure> 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對文檔流產(chǎn)生影響。
<figcaption> 標(biāo)簽定義 <figure> 元素的標(biāo)題.
<figcaption>元素應(yīng)該被置于 "figure" 元素的第一個或最后一個子元素的位置。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</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>).
為了讓這些塊及元素在所有版本的瀏覽器中生效，你需要在樣式表文件中設(shè)置一下屬性 (以下樣式代碼可以讓舊版本瀏覽器支持本章介紹的塊級元素):
{
display: block;
}
Internet Explorer 8 及更早IE版本中的問題
IE8 及更早IE版本無法在這些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, 或者其他的HTML5 elements.
解決辦法:你可以使用HTML5 Shiv Javascript腳本來解決IE的兼容問題。HTML5 Shiv下載地址：http://code.google.com/p/html5shiv/
下載后，將以下代碼放入的網(wǎng)頁中：
<script src="html5shiv.js"></script>
<![endif]-->
以上代碼在瀏覽器小于IE9版本時會加載html5shiv.js文件. 你必須將其放置于<head> 元素中，因為 IE瀏覽器需要在頭部加載后渲染這些HTML5的新元素