2.7 案例实战
视频讲解
HTML5定义了一组新的结构化语义标记，使用它们来描述网页内容，确保HTML5文档结构的简洁、友好。虽然也可以使用HTML4的div和span进行代替设计，但是HTML5新元素简化了页面设计，明确的语义结构更适合搜索引擎检索和抓取。本节将借助HTML5新元素设计一个博客首页。
【操作步骤】
第1步，新建HTML5文档，保存为test1.html。
第2步，根据上面各节介绍的知识，开始构建个人博客首页的框架结构。在设计结构时，最大限度地选用HTML5新结构元素，所设计的模板页面基本结构如下所示。
整个页面包括两部分：标题部分和主要内容部分。标题部分又包括：网站标题、副标题和提示性标题信息；主要内容部分包括：导航、文章块、侧边栏、脚注。文章块包括3部分：标题部分、正文部分和脚注部分。
第3步，使用HTML5大纲工具来检查模板页面的结构设计是否合理。访问http://gsnedders.html5.org/outliner/页面，在该页面提交本地的模板文档test1.html，则可以看到如图2.26所示的大纲信息。
检查结果说明本示例模板页面设计：结构合理。
第4步，在模板页面基础上，开始细化本示例博客首页。下面仅给出本例首页的静态页面结构，如果用户需要后台动态生成内容，则可以考虑在模板结构基础上另外设计。把test1.html另存为test2.html，细化后的静态首页效果如图2.27所示。
提示：限于篇幅，本节没有展示完整的页面代码，读者可以通过本节示例源代码了解完整的页面结构。
图2.26 检查大纲结构是否合理
图2.27 细化后的首页页面效果
第5步，设计页面样式部分代码。这里主要使用了CSS3的一些新特性，如圆角（border-radius）和旋转变换等，通过CSS设计的页面显示效果如图2.28所示。相关CSS3技术介绍请参阅下面章节内容。
考虑到本章重点学习HTML5新元素的应用，所以本节示例不再深入讲解CSS样式代码的设计过程，感兴趣的读者可以参考本节示例源代码中的test3.html文档。
图2.28 博客首页的页面完成效果
示例效果
第6步，对于早期版本浏览器，或者不支持HTML5的浏览器，需要添加一个CSS样式，因为未知元素默认为行内显示（display:inline），对于HTML5结构元素来说，我们需要让它们默认为块状显示。
第7步，一些浏览器不允许样式化不支持的元素。这种情形出现在IE8及以前的浏览器中，因此还需要使用下面JavaScript脚本进行兼容。
第8步，如果浏览器禁用了脚本，则不会显示，可能会出问题。因为这些元素定义整个页面的结构。为了预防这种情况，可以加上<noscript>标签进行提示。
