HTML5几个设计和修改的页面范例分享

网络
它是那样的舒展，那样高雅。特别是盛夏时节，热青奔放，有粉的，白的，紫的……，互不相让，竟相开放，它们好象正在表演一场时装表演。在巨大的碧绿的荷叶上，小水珠滚来滚去，偶尔一些小青蛙跳上一片荷叶，把荷叶当做歌台。在陽光的照耀下，水珠闪闪发光，显得楚楚动人。

要了解和熟悉 HTML5 中的新的语义元素，最好的方式就是拿一经典的 HTML 文档作例子，然后把 HTML5 的一些新鲜营养充实进入。如下就是我们要改造的页面，该页面很简单，只包含一篇文章。

ApocalypsePage_Original.html，这是一个格式非常规范的页面，所有的样式均来自于外部样式表。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="zh-CN">
  3. <head>
  4. <metacharset="utf-8">
  5. <title>ApocalypseNow</title>
  6. <linkrel="stylesheet"rel="nofollow noopener noreferrer" href="ApocalypsePage_Original.css">
  7. </head>
  9. <body>
  10. <divclass="Header">
  11. <h1>HowtheWorldCouldEnd</h1>
  12. <pclass="Teaser">Scenariosthatspelltheendoflifeasweknow</p>
  13. <pclass="Byline">byRayN.Carnation</p>
  14. </div><!--endHeader-->
  16. <divclass="Content">
  17. <p><spanclass="LeadIn">Rightnow</span>,you'reprobablyfeelingprettygood.Afterall,lifeinthedevelopedworldiscomfortable<spanclass="style1">—</span>probablymorecomfortablethanit'sbeenfortheaveragehumanbeingthroughoutallofrecordedhistory.</p>
  18. <p>Butdon'tgettoosmug.There'sstillplentyofhorrificwaysitcouldallfallapart.Inthisarticle,you'lllearnaboutafewofourfavorites.</p>
  20. <h2>MayanDoomsday</h2>
  21. <p>SkepticssuggestthattheMayancalendarsimplyrollstoanew5,126-yeareraafter2012,anddoesn'tactuallypredictalife-endingapocalypse.Butgiventhatthelong-deadMayanswerewrongaboutvirtuallyeverythingelse,whyshouldwetrustthemonthis?</p>
  23. <h2>RobotTakeover</h2>
  24. <p>NotquiteasfrighteningasaVampireTakeoverorLiving-DeadTakeover,arobotrebellionisstilladisquietingthought.Wearealreadyoutnumberedbyourtechnologicalgadgets,andevenBillGatesfearsthedayhisJapaneserobotslaveturnshimoverbytheanklesandasks(inasuitablyroboticvoice)"Who'syourdaddynow?"</p>
  26. <h2>UnexplainedSingularity</h2>
  27. <p>Wedon'tknowhowtheuniversestarted,sowecan'tbesureitwon'tjustend,maybetoday,andmaybewithnothingmoreexcitingthanapuffofanti-matterandaslightfizzingnoise.</p>
  29. <h2>RunawayClimateChange</h2>
  30. <p>Dismissedbysome,AlGore'sprophecyofdoommaystillcometrue.Ifitdoes,wemayhavetocontendwithviciousstorms,widespreadfoodshortages,andsurlyairconditioningrepairmen.</p>
  32. <h2>GlobalEpidemic</h2>
  33. <p>Sometimeinthefuture,alethalviruscouldstrike.Predictionsdifferaboutthesourceofthedisease,butcandidatesincludemonkeysintheAfricanjungle,bioterrorists,birdsandpigswiththeflu,warriorsfromthefuture,analienrace,hospitalsthatusetoomanyantibiotics,vampires,theCIA,andunwashedbrusselsprouts.Whateverthesource,it'sclearlybadnews.</p>
  35. </div><!--endContent-->
  37. <divclass="Footer">
  38. <pclass="Disclaimer">Theseapocalypticpredictionsdonotreflecttheviewsoftheauthor.</p>
  39. <p>
  40. <arel="nofollow noopener noreferrer" href="AboutUs.html">AboutUs</a>
  41. <arel="nofollow noopener noreferrer" href="Disclaimer.html">Disclaimer</a>
  42. <arel="nofollow noopener noreferrer" href="ContactUs.html">ContactUs</a>
  43. </p>
  44. <p>Copyright©2014</p>
  45. </div><!--endFooter-->
  46. </body>
  47. </html>

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

上面通过三个 <div> 将页面分成了三个部分，顶部的页眉，中部的内容和底部的页脚。

这个例子中的样式表很简单，整个页面最大宽度设置为 800 像素，避免文本在宽屏显示器上显示过长。页眉位于一个带有蓝色边框的盒子中，内容区的两侧都增加了内边距，而页脚在整个页面的底部居中。

ApocalypsePage_Original.css样式文件内容如下：

XML/HTML Code复制内容到剪贴板
  1. @charset"utf-8";
  2. /*CSSDocument*/
  3. body{
  4. /*font-family要使用安全字体，按照先特殊后一般的原则，
  5. 先给出你想要的字体，然后是保险一些的字体，
  6. 最后以sans-serif字体结尾*/
  7. font-family:"LucidasansUnicode","LucidaGrande",Geneva,sans-serif;
  8. max-width:800px;/*最大宽度不超过800像素*/
  9. }
  10. /*页面顶部的标题区样式*/
  11. .Header{
  12. background-color:#7695FE;/*可接受任何颜色值*/
  13. border:thin#336699solid;/*多合一的border属性*/
  14. padding:10px;/*10像素的内边距，边框与内容之间的距离*/
  15. margin:10px;/*10像素的外边距，边框与周围元素之间的距离*/
  16. text-align:center;/*头部文本居中*/
  17. }
  18. /*页眉中标题<h1>样式*/
  19. .Headerh1{
  20. margin:0px;
  21. color:white;
  22. font-size:xx-large;/*精确控制可以用像素或者em单位*/
  23. }
  24. /*页眉中子标题样式*/
  25. .Header.Teaser{
  26. margin:0px;
  27. font-weight:bold;
  28. }
  29. /*页眉中署名行样式*/
  30. .Header.Byline{
  31. font-style:italic;
  32. font-size:small;
  33. margin:0px;
  34. }
  35. .Content{
  36. font-size:medium;
  37. font-family:Cambria,Cochin,Georgia,"TimesNewRoman",Times,serif;
  38. /*左右内边距最大*/
  39. padding-top:20px;
  40. padding-right:50px;
  41. padding-bottom:5px;
  42. padding-left:50px;
  43. line-height:120%;/*相邻两个文本行之间的距离*/
  44. }
  45. .Content.LeadIn{
  46. font-weight:bold;
  47. font-size:large;
  48. font-variant:small-caps;
  49. }
  50. .Content.h2{
  51. color:#24486C;
  52. margin-bottom:2px;
  53. font-size:medium;
  54. }
  55. .Contentp{
  56. margin-top:0px;
  57. }
  58. .Footer{
  59. text-align:center;
  60. font-size:x-small;
  61. }
  62. .Footer.Disclaimer{
  63. font-style:italic;
  64. }
  65. .Footerp{
  66. margin:3px;
  67. }

这样我们的样式表就弯沉过了，现在去看看结果会怎样呢？如下图：

使用 HTML5 来构造页面

<div> 目前仍旧是 Web 设计的必备元素，它是一个直观、多用途的容器，可以通过它为页面中的任何区块应用样式。但 <div> 的问题在于，它本身不反映与页面相关的任何信息。

要通过 HTML5 改进这种情况，可以把 <div> 替换成更具有描述性语义的元素。

ApocalypsePage_Revised.html中已经将 class 属性为 Header 和 Footer 两个 <div> 替换为 <header> 和 <footer>， 部分代码如下：

XML/HTML Code复制内容到剪贴板
  1. <header>
  2. <h1>HowtheWorldCouldEnd</h1>
  3. <pclass="Teaser">Scenariosthatspelltheendoflifeasweknow</p>
  4. <pclass="Byline">byRayN.Carnation</p>
  5. </header>
  6. ...
  7. <footer>
  8. <pclass="Disclaimer">Theseapocalypticpredictionsdonotreflecttheviewsoftheauthor.</p>
  9. <p>
  10. <arel="nofollow noopener noreferrer" href="AboutUs.html">AboutUs</a>
  11. ...
  12. </p>
  13. <p>Copyright©2014</p>
  14. </footer>

当然，对应的 ApocalypsePage_Revised.css 文件也需要进行修改，将其中的 .Header 和 .Footer 替换为 header 和 footer 。部分代码如下：

XML/HTML Code复制内容到剪贴板
  1. /*页面顶部的标题区样式*/
  2. header{
  3. background-color:#7695FE;/*可接受任何颜色值*/
  4. border:thin#336699solid;/*多合一的border属性*/
  5. padding:10px;/*10像素的内边距，边框与内容之间的距离*/
  6. margin:10px;/*10像素的外边距，边框与周围元素之间的距离*/
  7. text-align:center;/*头部文本居中*/
  8. }
  9. /*页眉中标题<h1>样式*/
  10. headerh1{
  11. margin:0px;
  12. color:white;
  13. font-size:xx-large;/*精确控制可以用像素或者em单位*/
  14. }

最后还有一个元素需要用在示例文件中，就是 <article> 元素，表示一个完整的、自成一体的内容。

<ariticle>元素应该包含新闻报道或文章的内容，包括标题、署名和正文。因此添加了 <article> 元素后的结构如下：

XML/HTML Code复制内容到剪贴板
  1. <article>
  2. <header>
  3. <h1>HowtheWorldCouldEnd</h1>
  4. <pclass="Teaser">Scenariosthatspelltheendoflifeasweknow</p>
  5. <pclass="Byline">byRayN.Carnation</p>
  6. </header>
  7. <divclass="Content">
  8. <p><spanclass="LeadIn">Rightnow</span>,you'reprobablyfeelingprettygood.Afterall,lifeinthedevelopedworldiscomfortable<spanclass="style1">—</span>probablymorecomfortablethanit'sbeenfortheaveragehumanbeingthroughoutallofrecordedhistory.</p>
  9. ...
  10. </div><!--endContent-->
  11. </article>


重新设计后，页面结构如下：

用 <figure> 添加插图

很多页面都是包含图片的。但是，插图 (figure) 与图片的概念还不完全一样。插图虽然独立于文本，但是文本中会提到它。

一般来说插图应该是浮动的，还会有浮动图题。下面是在文章中添加插图的 HTML 标记，在正文的第一段和第二段之间的位置，部分代码如下：

XML/HTML Code复制内容到剪贴板
  1. ...
  2. <divclass="Content">
  3. <p><spanclass="LeadIn">Rightnow</span>,you're...</p>
  4. <divclass="FloatFigure">
  5. <imgsrc="human_skull.jpg"alt="Humanskull">
  6. <p>Willyoubethelastpersonstandingifoneoftheseapocalyptic
  7. scenariosplaysout?</p>
  8. </div>
  9. <p>Butdon'tgettoosmug.There's...</p>
  10. ...


相应的 样式表规则如下：

XML/HTML Code复制内容到剪贴板
  1. .FloatFigure{
  2. float:left;
  3. margin:0px20px0px0px;
  4. }
  5. .FloatFigurep{
  6. max-width:300px;
  7. font-size:small;
  8. font-style:italic;
  9. margin-bottom:5px;
  10. }


下图展示了这个示例的外观，插图恰好在第一段文本之后，浮动在后面文本的左侧，图题的文本的宽度我们限制住了，让图题显示很充实、很优雅。

HTML5 中提供了一个 <figure> 元素，图题可以放在 <figure> 中的 <figcaption> 元素里，经过改造，代码如下：

XML/HTML Code复制内容到剪贴板
  1. <figureclass="FloatFigure">
  2. <imgsrc="human_skull.jpg"alt="Humanskull">
  3. <figcaption>Willyoubethelastpersonstandingifoneoftheseapocalyptic
  4. scenariosplaysout?</figcaption>
  5. </figure>


当然样式表中的选择符，相应修改一下即可。

XML/HTML Code复制内容到剪贴板
  1. .FloatFigure{
  2. float:left;
  3. margin:0px20px0px0px;
  4. }
  5. .FloatFigurefigcaption{
  6. max-width:300px;
  7. font-size:small;
  8. font-style:italic;
  9. margin-bottom:5px;
  10. }


最后还有就是 <img> 元素中的 alt 属性可以删除掉，因为图题中包含了图片的完整说明。

用 <aside> 添加附注

新的 <aside> 元素表示与它周围的文本没有密切关系的内容。可以通过它介绍另一个相关的话题，或者对主文档中提出的某个观点进行解释。还可以用来放置广告、相关内容链接。

下面的示例中将用作醒目引文（pull quote），使用 <div> 元素可以创造这种效果，但是用 <aside> 元素让标记更有意义：

部分代码如下：

XML/HTML Code复制内容到剪贴板
  1. <p>...(inasuitablyroboticvoice)"Who'syourdaddynow?"</p>
  3. <asideclass="PullQuote">
  4. <imgsrc="quotes_start.png"alt="Quote">
  5. Wedon'tknowhowtheuniversestarted,sowecan'tbesureitwon'tjustend,maybetoday.
  6. <imgsrc="quotes_end.png"alt="Endquote">
  7. </aside>
  9. <h2>UnexplainedSingularity</h2>


对应的样式表内容如下：

XML/HTML Code复制内容到剪贴板
  1. .PullQuote{
  2. float:right;
  3. max-width:300px;
  4. border-top:thinblacksolid;
  5. border-bottom:thickblacksolid;
  6. font-size:30px;
  7. line-height:130%;
  8. font-style:italic;
  9. padding-top:5px;
  10. padding-bottom:5px;
  11. margin-left:15px;
  12. margin-bottom:10px;
  13. }
  14. .PullQuoteimg{
  15. vertical-align:bottom;
  16. }

以上就是HTML5几个设计和修改的页面范例分享。人生处世如行路，常有山水阻身前。行不通时，有人开山架桥，最后蛮力耗尽，也逃不脱出师未捷身先死的结局。而有些人只是转了个弯，轻松绕过障碍，就成功到达了终点。世事洞明皆学问，让思维转个弯，是一种大智慧，有了这种智慧，四两可以拨动千斤，付出最少的代价能收获到最大的成功。更多关于HTML5几个设计和修改的页面范例分享请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
HTML标签之!DOCTYPE文档类型声明
如何使用html+css代码如何实现冰墩墩和雪容融效果
html中checkbox与radio样式美化的简单实例
div设置可编辑内容的方法
css设置placeholder的颜色样式的方法