3.4 案例实战
本节将借助HTML5新元素设计一个博客首页。
第1步，新建HTML5文档，保存为test1.html。
第2步，根据上面各节介绍的知识，开始构建个人博客首页的框架结构。在设计结构时，最大限度地选用HTML5新结构元素，所设计的模板页面基本结构代码如下所示。
整个页面包括两个部分：标题部分和主要内容部分。标题部分又包括网站标题、次级标题和标题提示信息；主要内容包括4个部分：导航、文章块、侧边栏、脚注。文章块包括3个部分：标题部分、正文部分和脚注部分。
第3步，在模板页面基础上，开始细化本示例博客首页。下面仅给出本例首页的静态页面结构，如果用户需要后台动态生成内容，则可以考虑在模板结构基础上另外设计。把test1.html另存为test2.html，细化后的静态首页效果如图3.7所示。
图3.7 细化后的首页页面效果
提示：限于篇幅，本节没有展示完整的页面代码，读者可以通过本节示例源代码了解完整的页面结构。
第4步，设计页面样式部分代码。这里主要使用了CSS3的一些新特性，如圆角（border-radius）和旋转变换等，通过CSS设计的页面显示效果如图3.8所示。相关CSS3技术介绍请参阅后面的章节内容。
提示：考虑到本章重点学习HTML5新元素的应用，所以本节示例并不深入讲解CSS样式代码的设计过程，感兴趣的读者可以参考本节示例源代码中的test3.html文档。
图3.8 博客首页的页面完成效果
第5步，对于早期版本的浏览器，或者不支持HTML5的浏览器，需要添加一个CSS样式，因为未知元素默认为行内显示（display:inline），对于HTML5结构元素来说，我们需要让它们默认为块状显示。
article, section, nav, aside, main, header, hgroup, footer {
display: block;
}
第6步，一些浏览器不允许样式化不支持的元素。这种情形出现在IE8及以前的浏览器中，因此还需要使用下面的JavaScript脚本进行兼容。
第7步，如果浏览器禁用了脚本，则不会显示，可能会出问题。因为这些元素定义整个页面的结构。为了预防这种情况，可以加上<noscript>标签进行提示。
