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

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

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

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

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

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

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

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

使用 HTML5 来构造页面

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

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

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

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

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

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

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

用 <figure> 添加插图

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

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

相应的 样式表规则如下：

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

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

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

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

用 <aside> 添加附注

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

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

部分代码如下：

对应的样式表内容如下：