要了解和熟悉 html5 中的新的語義元素，最好的方式就是拿一經典的 html 文件作例子，然後把 html5 的一些新鮮營養充實進入。如下就是我們要改造的頁面，該頁面很簡單，只包含一篇文章。
apocalypsepage_original.html，這是乙個格式非常規範的頁面，所有的樣式均來自於外部樣式表。
xml/html code複製內容到剪貼簿
在不增加任何 css 樣式表之前，效果如下：
上面通過三個
將頁面分成了三個部分，頂部的頁首，中部的內容和底部的頁尾。
這個例子中的樣式表很簡單，整個頁面最大寬度設定為 800 畫素，避免文字在寬屏顯示器上顯示過長。頁首位於乙個帶有藍色邊框的盒子中，內容區的兩側都增加了內邊距，而頁尾在整個頁面的底部居中。
apocalypsepage_original.css樣式檔案內容如下：
xml/html code複製內容到剪貼簿
這樣我們的樣式表就彎沉過了，現在去看看結果會怎樣呢？如下圖：
使用 html5 來構造頁面
目前仍舊是 web 設計的必備元素，它是乙個直觀、多用途的容器，可以通過它為頁面中的任何區塊應用樣式。但 的問題在於，它本身不反映與頁面相關的任何資訊。
要通過 html5 改進這種情況，可以把
替換成更具有描述性語義的元素。
apocalypsepage_revised.html中已經將 class 屬性為 header 和 footer 兩個
替換為 和 ， 部分**如下：
xml/html code複製內容到剪貼簿
當然，對應的 apocalypsepage_revised.css 檔案也需要進行修改，將其中的 .header 和 .footer 替換為 header 和 footer 。部分**如下：
xml/html code複製內容到剪貼簿
最後還有乙個元素需要用在示例檔案中，就是 元素，表示乙個完整的、自成一體的內容。
元素應該包含新聞報道或文章的內容，包括標題、署名和正文。因此新增了 元素後的結構如下：
xml/html code複製內容到剪貼簿
重新設計後，頁面結構如下：
用 新增插圖
很多頁面都是包含的。但是，插圖 (figure) 與的概念還不完全一樣。插圖雖然獨立於文字，但是文字中會提到它。
一般來說插圖應該是浮動的，還會有浮**題。下面是在文章中新增插圖的 html 標記，在正文的第一段和第二段之間的位置，部分**如下：
xml/html code複製內容到剪貼簿
相應的 樣式表規則如下：
xml/html code複製內容到剪貼簿
下圖展示了這個示例的外觀，插圖恰好在第一段文字之後，浮動在後面文字的左側，圖題的文字的寬度我們限制住了，讓圖題顯示很充實、很優雅。
html5 中提供了乙個 元素，圖題可以放在 中的 元素裡，經過改造，**如下：
xml/html code複製內容到剪貼簿
當然樣式表中的選擇符，相應修改一下即可。
xml/html code複製內容到剪貼簿
最後還有就是
元素中的 alt 屬性可以刪除掉，因為圖題中包含了的完整說明。
用 新增附註
新的 元素表示與它周圍的文字沒有密切關係的內容。可以通過它介紹另乙個相關的話題，或者對主文件中提出的某個觀點進行解釋。還可以用來放置廣告、相關內容鏈結。
下面的示例中將用作醒目引文（pull quote），使用
元素可以創造這種效果，但是用 元素讓標記更有意義：
部分**如下：
xml/html code複製內容到剪貼簿
對應的樣式表內容如下：
xml/html code複製內容到剪貼簿
本文標題: html5幾個設計和修改的頁面範例分享
本文位址: /web/html5/9530.html
點讚打賞
分享如果認為本文對您有所幫助請贊助本站
宣告：凡註明"本站原創"的所有文字等資料，版權均屬程式設計客棧所有，歡迎**，但務請註明出處。
標籤：html5
分享29個基於bootstrap的html5響應式網頁設計模板html5 deviceorientation實現手機**搖一搖功能**例項
您可能感興趣的文章:
廣告贊助
廣告贊助
最新發布
全站最新
廣而告之
Html5標籤頁面
新增加的html5標籤 html5 新增加的html5標籤 定義 article 定義頁面內容之外的內容。定義聲音內容。定義影象。定義命名按鈕 定義數列 tree list 中的資料 定義下拉列表。定義外部互動內容或外掛程式 定義section或page的頁尾。html5 ios中忽略將數字變為 號...
html5標籤 頁面結構和表單
1.新增加的標籤 結構性元素 定義artical 定義section 定義導航鏈結 定義頁尾 定義頁首 語義性的塊元素 定義頁面內容之外的內容 定義對話 定義媒介內容的分組 語義性內聯元素 定義有記號的文字 定義日期時間 定義預定義範圍內的度量 web頁面互動體驗新元素 定義數列表中的資料 定義數下...
html5充值頁面（Vue）
可直接複製到html中檢視效果 lang en charset utf 8 加油卡充值title src script src script name viewport content width device width,initial scale 1.0,maximum scale 1.0,us...