要了解和熟悉 HTML5 中的新的語(yǔ)義元素，最好的方式就是拿一經(jīng)典的 HTML 文檔作例子，然后把 HTML5 的一些新鮮營(yíng)養(yǎng)充實(shí)進(jìn)入。如下就是我們要改造的頁(yè)面，該頁(yè)面很簡(jiǎn)單，只包含一篇文章。

ApocalypsePage_Original.html，這是一個(gè)格式非常規(guī)范的頁(yè)面，所有的樣式均來(lái)自于外部樣式表。

在不增加任何 CSS 樣式表之前，效果如下：

上面通過(guò)三個(gè) <div> 將頁(yè)面分成了三個(gè)部分，頂部的頁(yè)眉，中部的內(nèi)容和底部的頁(yè)腳。

這個(gè)例子中的樣式表很簡(jiǎn)單，整個(gè)頁(yè)面最大寬度設(shè)置為 800 像素，避免文本在寬屏顯示器上顯示過(guò)長(zhǎng)。頁(yè)眉位于一個(gè)帶有藍(lán)色邊框的盒子中，內(nèi)容區(qū)的兩側(cè)都增加了內(nèi)邊距，而頁(yè)腳在整個(gè)頁(yè)面的底部居中。

ApocalypsePage_Original.css樣式文件內(nèi)容如下：

這樣我們的樣式表就彎沉過(guò)了，現(xiàn)在去看看結(jié)果會(huì)怎樣呢？如下圖：

使用 HTML5 來(lái)構(gòu)造頁(yè)面

<div> 目前仍舊是 Web 設(shè)計(jì)的必備元素，它是一個(gè)直觀、多用途的容器，可以通過(guò)它為頁(yè)面中的任何區(qū)塊應(yīng)用樣式。但 <div> 的問(wèn)題在于，它本身不反映與頁(yè)面相關(guān)的任何信息。

要通過(guò) HTML5 改進(jìn)這種情況，可以把 <div> 替換成更具有描述性語(yǔ)義的元素。

ApocalypsePage_Revised.html中已經(jīng)將 class 屬性為 Header 和 Footer 兩個(gè) <div> 替換為 <header> 和 <footer>， 部分代碼如下：

當(dāng)然，對(duì)應(yīng)的 ApocalypsePage_Revised.css 文件也需要進(jìn)行修改，將其中的 .Header 和 .Footer 替換為 header 和 footer 。部分代碼如下：

最后還有一個(gè)元素需要用在示例文件中，就是 <article> 元素，表示一個(gè)完整的、自成一體的內(nèi)容。

<ariticle>元素應(yīng)該包含新聞報(bào)道或文章的內(nèi)容，包括標(biāo)題、署名和正文。因此添加了 <article> 元素后的結(jié)構(gòu)如下：

重新設(shè)計(jì)后，頁(yè)面結(jié)構(gòu)如下：

用 <figure> 添加插圖

很多頁(yè)面都是包含圖片的。但是，插圖 (figure) 與圖片的概念還不完全一樣。插圖雖然獨(dú)立于文本，但是文本中會(huì)提到它。

一般來(lái)說(shuō)插圖應(yīng)該是浮動(dòng)的，還會(huì)有浮動(dòng)圖題。下面是在文章中添加插圖的 HTML 標(biāo)記，在正文的第一段和第二段之間的位置，部分代碼如下：

相應(yīng)的 樣式表規(guī)則如下：

下圖展示了這個(gè)示例的外觀，插圖恰好在第一段文本之后，浮動(dòng)在后面文本的左側(cè)，圖題的文本的寬度我們限制住了，讓圖題顯示很充實(shí)、很優(yōu)雅。

HTML5 中提供了一個(gè) <figure> 元素，圖題可以放在 <figure> 中的 <figcaption> 元素里，經(jīng)過(guò)改造，代碼如下：

當(dāng)然樣式表中的選擇符，相應(yīng)修改一下即可。

最后還有就是 <img> 元素中的 alt 屬性可以刪除掉，因?yàn)閳D題中包含了圖片的完整說(shuō)明。

用 <aside> 添加附注

新的 <aside> 元素表示與它周圍的文本沒(méi)有密切關(guān)系的內(nèi)容。可以通過(guò)它介紹另一個(gè)相關(guān)的話題，或者對(duì)主文檔中提出的某個(gè)觀點(diǎn)進(jìn)行解釋。還可以用來(lái)放置廣告、相關(guān)內(nèi)容鏈接。

下面的示例中將用作醒目引文（pull quote），使用 <div> 元素可以創(chuàng)造這種效果，但是用 <aside> 元素讓標(biāo)記更有意義：

部分代碼如下：

對(duì)應(yīng)的樣式表內(nèi)容如下：