2.6 案例实战

本节将借助HTML5新元素设计一个博客首页。

【操作步骤】

第1步，新建HTML5文档，保存为test1.html。

第2步，根据上面各节介绍的知识，开始构建个人博客首页的框架结构。设计结构最大限度地选用HTML5新结构元素，所设计的模板页面基本结构如下所示。

整个页面包括两个部分：标题和主要内容。标题部分又包括网站标题、副标题和提示性标题信息。主要内容包括4个部分：导航、文章块、侧边栏和脚注。文章块包括3个部分：标题、正文和脚注。

第3步，在模板页面基础上，开始细化本示例博客首页。下面仅给出本例首页的静态页面结构，如果用户需要后台动态生成内容，则可以考虑在模板结构基础上另外设计。把test1.html另存为test2.html，细化后的静态首页效果如图2.9所示。

图2.9 细化后的首页页面效果

提示，限于篇幅，本节没有展示完整的页面代码，读者可以通过本节示例源代码了解完整的页面结构。

第4步，设计页面样式部分代码。这里主要使用了CSS3的一些新特性，如圆角（border-radius）和旋转变换等，通过CSS3设计的页面的显示效果如图2.10所示。相关CSS3技术介绍请参阅后面章节内容。

图2.10 博客首页的页面完成效果

提示，考虑到本章重点学习HTML5新元素的应用，所以本节示例不再深入讲解CSS样式代码的设计过程，感兴趣的读者可以参考本节示例源代码中的test3.html文档。

第5步，对于早期版本浏览器，或者不支持HTML5的浏览器，需要添加一个CSS样式，因为未知元素默认为行内显示（display:inline），HTML5结构元素需要默认为块状显示。

     article, section, nav, aside, main, header, hgroup, footer {
           display: block;
     }

第6步，一些浏览器不允许样式化不支持的元素。这种情形出现在IE8及以前的浏览器中，因此还需要使用下面的JavaScript脚本进行兼容。

第7步，如果浏览器禁用了脚本，则不会显示页面，可能会出问题。因为这些元素定义整个页面的结构。为了防止这种情况发生，可以加上<noscript>标签提示。