【IT168专稿】目前,随着IE 9及众多浏览器开始逐渐支持HTML 5标准,HTML5的发展越来越快,并在某些程度上形成跟FLASH的竞争。HTML5在页面结构，多媒体处理等多方面都与以往的HTML有很大的不同。在本系列文章中，将带领读者实际设计一个符合HTML5标准的网页，读者可以从中学习到HTML5 新的页面基本元素以及HTML5 中的设计技巧。本文的读者为有一定HTML基础或者对HTML5概况有一定认识的读者。

　　在本教程中，将指导读者完成一个如下图所示的HTML5网页(示例地址为：http://vanseodesign.com/blog/demo/html5-semantics/)：

▲

　　页面布局

　　为了简单起见，这里我是使用了传统大家熟悉的两列式页面结构，在页面中，我们将使用到HTML5中的如下标签元素：

　　• header

　　• content area

　　• sidebar

　　• footer

　　我们先来看下页面的基本结构，一步步来设计页面，如下代码：
 

        在这里，我们为了让在IE 9以下的浏览器中都能识别和渲染HTML5中的新的元素，所以采用了http://html5shiv.googlecode.com/svn/trunk/html5.js这个脚本，它可以让IE 浏览器能识别和渲染其中的HTML5元素。

　　接下来，我们用DIV声明页面的基本结构，如下代码所示：
 

　　在这里，使用了HTML5中的新的一系列标签。header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其它内容，例如数据表格、搜索表单或相关的logo图片。在整个页面中的标题一般放在页面的开头，一个网页中没有限制header元素的个数，可以拥有多个，可以为每个内容区块加一个header元素。这里还使用了role属性为banner,就是为了语义上更容易识别，该header区域主要是放置一个banner图标。

       而新的标签aside，其主要目的是用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其它类似的有别与主要内容的部分。这里用类放置RSS订阅和文章目录分类。而footer标签中，则可以声明比如版权部分的内容。

　　而在<div id=“content”>中，则是放置页面的主要内容，这里我们打算设计有文章的主要内容部分(post)，关于文章的作者介绍部分(meta)，以及用户的评论部分三部分(comments)，所以大致的代码架构如下，在稍后的文章中将详细介绍： 
 

　　Header部分

　　在header部分中，我们可以放置相关的标题或者图片，以标识出页面的首部结构，注意在HTML5中，一个页面中可以有多个header，我们现在详细将header部分进行编写，如下代码：

　　在header部分中，首先有一个小的div层，定义为bar的css样式(其值详细见style.css文件中的定义)。接下来的为HTML5新定义的元素，hgroup一般被用作将一个或者更多的h1到h6的元素群组放置在一起，它最适合于做比如正副标题的组合，这里<h1>中为主标题，<h2>中为副标题。

　　<nav>是HTML5新增加的标签，它的作用可以在里面存放一些站点中常用的导航链接，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好根据W3C的规定，其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进<nav>元素;例如，在页脚中通常会有一组链接，包括服务条款、首页、版权声明等;这时使用<footer>元素是最恰当的，而不需要元素。这里，<nav>中，同样可以使用传统的〈ul>和<li>和元素。

　　而在我们的例子中，在页面的右侧部分，同样也会有使用的部分，如下图所示：
 

▲

　　接下来，我们讲解下其中HTML5的一个标签〈aside>，这个标签曾经经历了两次修订(尽管有可能还不是最后的版本)，它的主要功能上文中已经有提及，当它放在中时，的内容应该是跟标签不在标签中时，的内容应该与当前页面的内容有一定的相关性，例子如下;

　　主要内容部分的设计

　　接下来，我们开始页面主要部分内容的设计，即<div id=“content”>部分的实际内容。我们再次细化后的框架代码如下：

　　在这里，我们把文章区域(包括正文及评论都看作一为article标签元素中的内容)。根据W3C的规定，article标签中的内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本或是来自其他外部源内容。

　　先来看正文部分中的header部分，代码如下：　

　　这里之所以用header标签，是将文章的标题，前言(或者导语)摘录出来，注意这里使用了html5的关于时间的标签，以及,address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、他们网站链接、电子信箱、真是地址、电话号码等。address元素不仅用来呈现联系邮件或详细地址，还应该用来展示跟文档相关联系人的所有联系信息。

　　而每段文章中，使用的是标签，它是用来定义文章的段或者节，每个段落我们大致的格式如下:

　　可以看到，section标签是可以嵌套的，并且要注意每一层中的标题字体<h2>,<h3>的正确嵌套使用。

　　在正文完结后，我们发现有一组的<footer>标签，如下：

　　这里实际上是一个关于对本文的一个附带的说明，比如说明作者的情况和文章的情况。再次提示，footer标签在页面中可以多次使用。下篇我们会讲文章评论区域部分。