HTML5 語意元素


語意= 意義.

語意元素= 元素的意義.

什麼是語意元素?

一個語意元素能夠清楚的描述其意義給瀏覽器和開發者。

無語意 元素實例: <div> 和<span> - 無需考慮內容.

語意元素實例: <form> ;, <table>, and <img> - 清楚的定義了它的內容.

瀏覽器支援

Internet Explorer

##Internet Explorer 9+, Firefox, Chrome, Safari 和Opera 支援語意元素。

注意: Internet Explorer 8及更早版本不支援該元素. 但是文章底部提供了相容的解決方法.

HTML5中新的語義元素

許多現有網站都包含以下HTML程式碼： <div id="nav">, <div class="header">, 或 <div id="footer">, 來指明導航連結, 頭部, 以及尾部.

HTML5提供了新的語意元素來明確一個Web頁面的不同部分:

  • < header>

  • <nav>

  • <section>

  • <article>

  • <aside>

  • #<figcaption>

  • <figure>

  • <footer>

#HTML5 <section> 元素

<section> 標籤定義文件中的節（section、區段）。例如章節、頁首、頁尾或文件中的其他部分。

根據W3C HTML5文件:  section 包含了一組內容及其標題。

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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> 標籤定義獨立的內容。 .

<article> 元素使用實例:

  • Forum post

    • ##Blog post

    • #News story

    • Comment


  • #實例

    <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<article>
  <h1>Internet Explorer 9</h1>
  <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>

</body>
</html>

    運行實例»
    點擊"運行實例"按鈕查看線上實例


HTML5 <nav> 元素

<nav> 標籤定義導覽連結的部分。

<nav> 元素用來定義頁面的導覽連結部分區域，但是，不是所有的連結都需要包含在<nav> 元素中!

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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>  標籤定義頁面主區域內容以外的內容（例如側邊欄）。

aside 標籤的內容應與主區域的內容相關.

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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>元素描述了文件的頭部區域

<header>元素注意用於定義內容的介紹展示區域.

#在頁面中你可以使用多個<header> 元素.

以下實例定義了文章的頭部:

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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发布的</p>
</article>

</body>
</html>

#運行實例»點擊"運行實例" 按鈕查看在線實例


HTML5 <footer> 元素

<footer> 元素描述了文件的底部區域.

#<footer>元素應該包含它的包含元素

一個頁腳通常包含文件的作者，著作權信息，連結的使用條款，聯絡資訊等

文件中你可以使用多個<footer>元素.

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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>標籤規定獨立的串流內容（圖像、圖表、照片、程式碼等等）。

<figure> 元素的內容應該與主內容相關，但如果被刪除，則不應對文件流產生影響。

<figcaption> 標籤定義<figure> 元素的標題.

<figcaption>元素應該被置於"figure" 元素的第一個或最後一個子元素的位置。

實例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(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>).

為了讓這些區塊及元素在所有版本的瀏覽器中生效，你需要在樣式表檔案中設定屬性(以下樣式程式碼可以讓舊版瀏覽器支援本章介紹的區塊級元素):

header, section, footer, aside, nav, article, figure
{
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/

#下載後，將下列程式碼放入的網頁中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上程式碼在瀏覽器小於IE9版本時會載入html5shiv.js檔案. 你必須將其放置於<head> 元素中，因為 IE瀏覽器需要在頭部載入後渲染這些HTML5的新元素

#
←
→