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

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

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

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

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<title>ApocalypseNow</title>
<linkrel="stylesheet"rel="nofollow noopener noreferrer" 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>
<arel="nofollow noopener noreferrer" href="AboutUs.html">AboutUs</a>
<arel="nofollow noopener noreferrer" href="Disclaimer.html">Disclaimer</a>
<arel="nofollow noopener noreferrer" href="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>
<arel="nofollow noopener noreferrer" href="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几个设计和修改的页面范例分享请关注haodaima.com其它相关文章！

为您推荐

html页面中完成查找功能

基于HTML代码如何实现图片碎片化加载功能

CSS如何实现剪切蒙版视差滚动效果

如何使用CSS如何实现Logo阴影特效

html直接引用vue和element-ui的方法

Html最新文章