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

2020-03-24 19:13:29

字體：大中小

來源：轉載

供稿：網友

要了解和熟悉 HTML5 中的新的語義元素，最好的方式就是拿一經典的 HTML 文檔作例子，然后把 HTML5 的一些新鮮營養充實進入。如下就是我們要改造的頁面，該頁面很簡單，只包含一篇文章。ApocalypsePage_Original.html，這是一個格式非常規范的頁面，所有的樣式均來自于外部樣式表。XML/HTML Code復制內容到剪貼板
title ApocalypseNow /title linkrel= stylesheet href= ApocalypsePage_Original.css /head body div 'reprobablyfeelingprettygood.Afterall,lifeinthedevelopedworldiscomfortable span 'sbeenfortheaveragehumanbeingthroughoutallofrecordedhistory. /p p Butdon'tgettoosmug.There'sstillplentyofhorrificwaysitcouldallfallapart.Inthisarticle,you'lllearnaboutafewofourfavorites. /p h2 MayanDoomsday /h2 p SkepticssuggestthattheMayancalendarsimplyrollstoanew5,126-yeareraafter2012,anddoesn'tactuallypredictalife-endingapocalypse.Butgiventhatthelong-deadMayanswerewrongaboutvirtuallyeverythingelse,whyshouldwetrustthemonthis? /p h2 RobotTakeover /h2 p NotquiteasfrighteningasaVampireTakeoverorLiving-DeadTakeover,arobotrebellionisstilladisquietingthought.Wearealreadyoutnumberedbyourtechnologicalgadgets,andevenBillGatesfearsthedayhisJapaneserobotslaveturnshimoverbytheanklesandasks(inasuitablyroboticvoice) Who'syourdaddynow? /p h2 UnexplainedSingularity /h2 p Wedon'tknowhowtheuniversestarted,sowecan'tbesureitwon'tjustend,maybetoday,andmaybewithnothingmoreexcitingthanapuffofanti-matterandaslightfizzingnoise. /p h2 RunawayClimateChange /h2 p Dismissedbysome,AlGore'sprophecyofdoommaystillcometrue.Ifitdoes,wemayhavetocontendwithviciousstorms,widespreadfoodshortages,andsurlyairconditioningrepairmen. /p h2 GlobalEpidemic /h2 p Sometimeinthefuture,alethalviruscouldstrike.Predictionsdifferaboutthesourceofthedisease,butcandidatesincludemonkeysintheAfricanjungle,bioterrorists,birdsandpigswiththeflu,warriorsfromthefuture,analienrace,hospitalsthatusetoomanyantibiotics,vampires,theCIA,andunwashedbrusselsprouts.Whateverthesource,it'sclearlybadnews. /p /div !--endContent-- div >在不增加任何 CSS 樣式表之前，效果如下：

上面通過三個 div 將頁面分成了三個部分，頂部的頁眉，中部的內容和底部的頁腳。這個例子中的樣式表很簡單，整個頁面最大寬度設置為 800 像素，避免文本在寬屏顯示器上顯示過長。頁眉位于一個帶有藍色邊框的盒子中，內容區的兩側都增加了內邊距，而頁腳在整個頁面的底部居中。ApocalypsePage_Original.css樣式文件內容如下：XML/HTML Code復制內容到剪貼板
/*font-family要使用安全字體，按照先特殊后一般的原則，先給出你想要的字體，然后是保險一些的字體，最后以sans-serif字體結尾*/ font-family: LucidasansUnicode , LucidaGrande ,Geneva,sans-serif; max-width:800px;/*最大寬度不超過800像素*/ } /*頁面頂部的標題區樣式*/ .Header{ background-color:#7695FE;/*可接受任何顏色值*/ border:thin#336699solid;/*多合一的border屬性*/ padding:10px;/*10像素的內邊距，邊框與內容之間的距離*/ margin:10px;/*10像素的外邊距，邊框與周圍元素之間的距離*/ text-align:center;/*頭部文本居中*/ } /*頁眉中標題 h1 樣式*/ .Headerh1{ margin:0px; color:white; font-size:xx-large;/*精確控制可以用像素或者em單位*/ } /*頁眉中子標題樣式*/ .Header.Teaser{ margin:0px; font-weight:bold; } /*頁眉中署名行樣式*/ .Header.Byline{ font-style:italic; font-size:small; margin:0px; } .Content{ font-size:medium; font-family:Cambria,Cochin,Georgia, TimesNewRoman ,Times,serif; /*左右內邊距最大*/ padding-top:20px; padding-right:50px; padding-bottom:5px; padding-left:50px; line-height:120%;/*相鄰兩個文本行之間的距離*/ } .Content.LeadIn{ font-weight:bold; font-size:large; font-variant:small-caps; } .Content.h2{ color:#24486C; margin-bottom:2px; font-size:medium; } .Contentp{ margin-top:0px; } .Footer{ text-align:center; font-size:x-small; } .Footer.Disclaimer{ font-style:italic; } .Footerp{ margin:3px; }
這樣我們的樣式表就彎沉過了，現在去看看結果會怎樣呢？如下圖：

使用 HTML5 來構造頁面 div 目前仍舊是 Web 設計的必備元素，它是一個直觀、多用途的容器，可以通過它為頁面中的任何區塊應用樣式。但 div 的問題在于，它本身不反映與頁面相關的任何信息。要通過 HTML5 改進這種情況，可以把 div 替換成更具有描述性語義的元素。ApocalypsePage_Revised.html中已經將 class 屬性為 Header 和 Footer 兩個 div 替換為 header 和 footer ，部分代碼如下：XML/HTML Code復制內容到剪貼板
h1 HowtheWorldCouldEnd /h1 p >當然，對應的 ApocalypsePage_Revised.css 文件也需要進行修改，將其中的 .Header 和 .Footer 替換為 header 和 footer 。部分代碼如下：XML/HTML Code復制內容到剪貼板
header{ background-color:#7695FE;/*可接受任何顏色值*/ border:thin#336699solid;/*多合一的border屬性*/ padding:10px;/*10像素的內邊距，邊框與內容之間的距離*/ margin:10px;/*10像素的外邊距，邊框與周圍元素之間的距離*/ text-align:center;/*頭部文本居中*/ } /*頁眉中標題 h1 樣式*/ headerh1{ margin:0px; color:white; font-size:xx-large;/*精確控制可以用像素或者em單位*/ }
最后還有一個元素需要用在示例文件中，就是 article 元素，表示一個完整的、自成一體的內容。 ariticle 元素應該包含新聞報道或文章的內容，包括標題、署名和正文。因此添加了 article 元素后的結構如下：XML/HTML Code復制內容到剪貼板
h1 HowtheWorldCouldEnd /h1 p 'reprobablyfeelingprettygood.Afterall,lifeinthedevelopedworldiscomfortable span 'sbeenfortheaveragehumanbeingthroughoutallofrecordedhistory. /p ... /div !--endContent-- /article
用 figure 添加插圖很多頁面都是包含圖片的。但是，插圖 (figure) 與圖片的概念還不完全一樣。插圖雖然獨立于文本，但是文本中會提到它。一般來說插圖應該是浮動的，還會有浮動圖題。下面是在文章中添加插圖的 HTML 標記，在正文的第一段和第二段之間的位置，部分代碼如下：XML/HTML Code復制內容到剪貼板
div 're... /p div 'tgettoosmug.There's... /p ...
float:left; margin:0px20px0px0px; } .FloatFigurep{ max-width:300px; font-size:small; font-style:italic; margin-bottom:5px; }

下圖展示了這個示例的外觀，插圖恰好在第一段文本之后，浮動在后面文本的左側，圖題的文本的寬度我們限制住了，讓圖題顯示很充實、很優雅。
HTML5 中提供了一個 figure 元素，圖題可以放在 figure 中的 figcaption 元素里，經過改造，代碼如下：XML/HTML Code復制內容到剪貼板
float:left; margin:0px20px0px0px; } .FloatFigurefigcaption{ max-width:300px; font-size:small; font-style:italic; margin-bottom:5px; }

最后還有就是 img 元素中的 alt 屬性可以刪除掉，因為圖題中包含了圖片的完整說明。用 aside 添加附注新的 aside 元素表示與它周圍的文本沒有密切關系的內容?？梢酝ㄟ^它介紹另一個相關的話題，或者對主文檔中提出的某個觀點進行解釋。還可以用來放置廣告、相關內容鏈接。下面的示例中將用作醒目引文（pull quote），使用 div 元素可以創造這種效果，但是用 aside 元素讓標記更有意義：

部分代碼如下：XML/HTML Code復制內容到剪貼板
p ...(inasuitablyroboticvoice) Who'syourdaddynow? /p aside 'tknowhowtheuniversestarted,sowecan'tbesureitwon'tjustend,maybetoday. imgsrc= quotes_end.png alt= Endquote /aside h2 UnexplainedSingularity /h2
max-width:300px; border-top:thinblacksolid; border-bottom:thickblacksolid; font-size:30px; line-height:130%; font-style:italic; padding-top:5px; padding-bottom:5px; margin-left:15px; margin-bottom:10px; } .PullQuoteimg{ vertical-align:bottom; }html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML5 Canvas的事件處理介紹_0

下一篇：iOS4.2對支持HTML5新特性