2.4　案例实战

视频讲解

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

【操作步骤】

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

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

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

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

图2.5　细化后的首页效果

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

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

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

示例效果

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

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

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

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

    <!--[if lt IE 9]>
      <script>
        document.createElement("article");
        document.createElement("section");
        document.createElement("nav"    );
        document.createElement("aside"  );
        document.createElement("main"   );
        document.createElement("header" );
         document.createElement("hgroup" );
        document.createElement("footer" );
      </script>
    <![endif]-->

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

   <noscript>
      <h1>警告</h1>
      <p>因为你的浏览器不支持HTML5，一些元素是模拟使用JavaScript。不幸的是，您的浏览器已禁用脚
本。请启用它以显示此页。</p>
   </noscript>
上一章目录下一章