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新特性