要了解和熟悉 HTML5 中的新的语义元素，最好的方式就是拿一经典的 HTML 文档作例子，然后把 HTML5 的一些新鲜营养充实进入。如下就是我们要改造的页面，该页面很简单，只包含一篇文章。
ApocalypsePage_Original.html，这是一个格式非常规范的页面，所有的样式均来自于外部样式表。
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="utf-8"> <title>ApocalypseNow</title> <linkrel="stylesheet"href="ApocalypsePage_Original.css"> </head> <body> <divclass="Header"> <h1>HowtheWorldCouldEnd</h1> <pclass="Teaser">Scenariosthatspelltheendoflifeasweknow</p> <pclass="Byline">byRayN.Carnation</p> </div><> <divclass="Content"> <p><spanclass="LeadIn">Rightnow</span>,you'reprobablyfeelingprettygood.Afterall,lifeinthedevelopedworldiscomfortable<spanclass="style1">—</span>probablymorecomfortablethanit'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><> <divclass="Footer"> <pclass="Disclaimer">Theseapocalypticpredictionsdonotreflecttheviewsoftheauthor.</p> <p> <ahref="AboutUs.html">AboutUs</a> <ahref="Disclaimer.html">Disclaimer</a> <ahref="ContactUs.html">ContactUs</a> </p> <p>Copyright©2014</p> </div><> </body> </html>
在不增加任何 CSS 样式表之前，效果如下：
上面通过三个 <div> 将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。
这个例子中的样式表很简单，整个页面最大宽度设置为 800 像素，避免文本在宽屏显示器上显示过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。
ApocalypsePage_Original.css样式文件内容如下：
XML/HTML Code复制内容到剪贴板 @charset"utf-8"; /*CSSDocument*/ body{ /*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复制内容到剪贴板 <header> <h1>HowtheWorldCouldEnd</h1> <pclass="Teaser">Scenariosthatspelltheendoflifeasweknow</p> <pclass="Byline">byRayN.Carnation</p> </header> ... <footer> <pclass="Disclaimer">Theseapocalypticpredictionsdonotreflecttheviewsoftheauthor.</p> <p> <ahref="AboutUs.html">AboutUs</a> ... </p> <p>Copyright©2014</p> </footer>
当然，对应的 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复制内容到剪贴板 <article> <header> <h1>HowtheWorldCouldEnd</h1> <pclass="Teaser">Scenariosthatspelltheendoflifeasweknow</p> <pclass="Byline">byRayN.Carnation</p> </header> <divclass="Content"> <p><spanclass="LeadIn">Rightnow</span>,you'reprobablyfeelingprettygood.Afterall,lifeinthedevelopedworldiscomfortable<spanclass="style1">—</span>probablymorecomfortablethanit'sbeenfortheaveragehumanbeingthroughoutallofrecordedhistory.</p> ... </div><> </article>
重新设计后，页面结构如下：
用 <figure> 添加插图
很多页面都是包含图片的。但是，插图 (figure) 与图片的概念还不完全一样。插图虽然独立于文本，但是文本中会提到它。
一般来说插图应该是浮动的，还会有浮动图题。下面是在文章中添加插图的 HTML 标记，在正文的第一段和第二段之间的位置，部分代码如下：
XML/HTML Code复制内容到剪贴板 ... <divclass="Content"> <p><spanclass="LeadIn">Rightnow</span>,you're...</p> <divclass="FloatFigure"> <imgsrc="human_skull.jpg"alt="Humanskull"> <p>Willyoubethelastpersonstandingifoneoftheseapocalyptic scenariosplaysout?</p> </div> <p>Butdon'tgettoosmug.There's...</p> ...
相应的 样式表规则如下：
XML/HTML Code复制内容到剪贴板 .FloatFigure{ float:left; margin:0px20px0px0px; } .FloatFigurep{ max-width:300px; font-size:small; font-style:italic; margin-bottom:5px; }
下图展示了这个示例的外观，插图恰好在第一段文本之后，浮动在后面文本的左侧，图题的文本的宽度我们限制住了，让图题显示很充实、很优雅。
HTML5 中提供了一个 <figure> 元素，图题可以放在 <figure> 中的 <figcaption> 元素里，经过改造，代码如下：
XML/HTML Code复制内容到剪贴板 <figureclass="FloatFigure"> <imgsrc="human_skull.jpg"alt="Humanskull"> <figcaption>Willyoubethelastpersonstandingifoneoftheseapocalyptic scenariosplaysout?</figcaption> </figure>
当然样式表中的选择符，相应修改一下即可。
XML/HTML Code复制内容到剪贴板 .FloatFigure{ 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> <asideclass="PullQuote"> <imgsrc="quotes_start.png"alt="Quote"> Wedon'tknowhowtheuniversestarted,sowecan'tbesureitwon'tjustend,maybetoday. <imgsrc="quotes_end.png"alt="Endquote"> </aside> <h2>UnexplainedSingularity</h2>
对应的样式表内容如下：
XML/HTML Code复制内容到剪贴板 .PullQuote{ float:right; 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; }
【HTML5几个设计和修改的页面范例分享】相关文章：
★ HTML5 input placeholder 颜色修改示例