HTML5幾個設計和修改的頁面范例分享

投稿有獎

由 金聰采編 分享 時間：2017-09-05 加入收藏 我要投稿 點贊 侵權舉報/版權申訴

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

ApocalypsePage_Original.html，這是一個格式非常規范的頁面，所有的樣式均來自于外部樣式表。

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

上面通過三個 <div> 將頁面分成了三個部分，頂部的頁眉，中部的內容和底部的頁腳。

這個例子中的樣式表很簡單，整個頁面最大寬度設置為 800 像素，避免文本在寬屏顯示器上顯示過長。頁眉位于一個帶有藍色邊框的盒子中，內容區的兩側都增加了內邊距，而頁腳在整個頁面的底部居中。

ApocalypsePage_Original.css樣式文件內容如下：

這樣我們的樣式表就彎沉過了，現在去看看結果會怎樣呢？如下圖：

使用 HTML5 來構造頁面

<div> 目前仍舊是 Web 設計的必備元素，它是一個直觀、多用途的容器，可以通過它為頁面中的任何區塊應用樣式。但 <div> 的問題在于，它本身不反映與頁面相關的任何信息。

要通過 HTML5 改進這種情況，可以把 <div> 替換成更具有描述性語義的元素。

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

當然，對應的 ApocalypsePage_Revised.css 文件也需要進行修改，將其中的 .Header 和 .Footer 替換為 header 和 footer 。部分代碼如下：

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

<ariticle>元素應該包含新聞報道或文章的內容，包括標題、署名和正文。因此添加了 <article> 元素后的結構如下：

重新設計后，頁面結構如下：

用 <figure> 添加插圖

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

一般來說插圖應該是浮動的，還會有浮動圖題。下面是在文章中添加插圖的 HTML 標記，在正文的第一段和第二段之間的位置，部分代碼如下：

相應的 樣式表規則如下：

下圖展示了這個示例的外觀，插圖恰好在第一段文本之后，浮動在后面文本的左側，圖題的文本的寬度我們限制住了，讓圖題顯示很充實、很優雅。

HTML5 中提供了一個 <figure> 元素，圖題可以放在 <figure> 中的 <figcaption> 元素里，經過改造，代碼如下：

當然樣式表中的選擇符，相應修改一下即可。

最后還有就是 <img> 元素中的 alt 屬性可以刪除掉，因為圖題中包含了圖片的完整說明。

用 <aside> 添加附注

新的 <aside> 元素表示與它周圍的文本沒有密切關系的內容。可以通過它介紹另一個相關的話題，或者對主文檔中提出的某個觀點進行解釋。還可以用來放置廣告、相關內容鏈接。

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

部分代碼如下：

對應的樣式表內容如下：