从零开始构建HTML 5 Web页面

　　HTML 5是时下Web开发领域炒得火热的一个术语，是的，很多人都看好它，也有很多业内知名公司开始正式使用HTML 5重新构建自己的网站，如YouTube开始使用HTML 5视频，Google已经弃用自家的Gears，开始全面拥抱HTML 5实现离线解决方案，各大浏览器厂家也纷纷开始支持HTML 5，连被人诟病的微软也声称要在IE 9中增加对HTML 5的支持。本文打算为大家详细介绍一下如何构建一个完整的HTML 5 Web页面，以加深对HTML 5的理解。

　  HTML 5有何不同？

　　首先我们要明白HTML 5是新的语义结构标记，包括画布，离线存储规范和一些新的内联语义标记，但由于客观原因（主要是浏览器支持的原因），我们不得不限制标记的讨论范围，如画布，离线存储，原生视频或地理定位API等，还不是所有的浏览器都支持。

　　由于新的HTML 5标记大都是结构性的，它们的行为与块元素有些类似，为了帮助大家加深对HTML 5的理解，我将在下面的内容使用一些新的结构元素。

　　每个人都应该记住的doctype（文档类型）

　　要创建HTML 5 Web页面的第一件事情是使用新的doctype，你一定记住了HTML 4或XHTML 1.x的doctype，当我们要从旧的文档通过复制粘贴到新的文档中，必须要修改doctype，请记住，下面就是HTML 5的doctype：

   
    
    <!
    DOCTYPE html
    >
     
   

还是很容易记住吧，而且也不区分大小写，与现在广泛使用的版本要简单得多了，而且保持了向后兼容。

　　语义结构

　　在深入标记前，我们先初略看一下一个Web页面的大致结构吧。

代码

    
     
     <
     html
     >
      
 
     <
     head
     >
      
 ...stuff... 
 
     </
     head
     >
      
 
     <
     body
     >
      
 
     <
     div 
     id
     ="header"
     >
      
 
     <
     h1
     >
     My Site
     </
     h1
     >
      
 
     </
     div
     >
      
 
     <
     div 
     id
     ="nav"
     >
      
 
     <
     ul
     >
      
 
     <
     li
     >
     Home
     </
     li
     >
      
 
     <
     li
     >
     About
     </
     li
     >
      
 
     <
     li
     >
     Contact
     </
     li
     >
      
 
     </
     ul
     >
      
 
     </
     div
     >
      
 
     <
     div 
     id
     =content
     >
      
 
     <
     h1
     >
     My Article
     </
     h1
     >
      
 
     <
     p
     >
     ...
     </
     p
     >
      
 
     </
     div
     >
      
 
     <
     div 
     id
     ="footer"
     >
      
 
     <
     p
     >
     ...
     </
     p
     >
      
 
     </
     div
     >
      
 
     </
     body
     >
      

     </
     html
     >
      
    

　　在上面的例子中，我为所有DIV标记增加了ID，相信大多数Web设计师都很熟悉这种做法了，这么做有两个目的，首先，ID提供了一个钩子，通过它可以对页面的特定部分应用样式，其次，ID作为一种原始的，伪语义结构，智能解析器将查找标签上的ID属性，并尝试猜测其含义，但这是一件很困难的事情，因为每个网站的ID可能都不一样。

　　于是就有了增加新标签的想法，HTML 5的创造者们就设计了一些新的元素，下面我们就来看看HTML 5中新增的一些关键的结构性标记。

　　◆ <header>

　　这个标记计划用来描述一节或一个完整Web页面的介绍性信息，<header>标记可以包括所有的通常放在页面头部的标志，如果你在页面中使用了<div id=”header”>，它将被<header>取代。

　　◆ <nav>

　　这个元素的含义就不说了，你的导航元素就放在这里，如主站点导航，但在某些情况下也可能有页面导航元素，HTML 5的创建人WHATWG最近修改了<nav>的解释，展示了如何在一个页面上使用两次。

　　简单说来，如果你在页面中使用了<div id=”nav”>标记来容纳导航元素，那么你可以使用<nav>进行替换。

　　◆ <section>

　　这个可能是最模糊不清的标记了，按照HTML 5规范的解释，一个section是一个有主题的内容组，前面通常有一个header标记，后面通常跟一个footer标记，如果需要，section也可以嵌套使用。

　　在我们上面的例子中，标记为“content”的DIV是section的一个很好候选者，在这个section中，根据内容的不同，我们可能有更多的section。

　　◆ <article>

　　根据WHATWG的注释，article元素是将section进行打包形成一个文档或网站独立的部分，例如一篇杂志或报纸文章，或一篇博客文章。

　　记住，在一个页面中可以有多个article元素，例如一个博客首页可能会有10多个article元素，article也可以进入section元素，因此你在嵌套使用时需要小心，可能一不小心就会出错。

　　◆ <aside>

　　另一个模糊不清的标记是aside，这个元素表现的是与文档主要文本流无关的内容，也就是相当于一个括号备注，脚注，引用，注释，或者说是类似于侧边栏的东西，根据WHATWG的注释，<aside>可以用于所有这些情况。

　　◆ <footer>

　　Footer的含义也非常清楚，它可以用在section中，也可以用于一个页面的底部。

　　全部放在一起

　　现在我们全部使用新标记重写前面的示例页面。

   
    
    <!
    DOCTYPE html
    >
     

    <
    html
    >
     
 
    <
    head
    >
     
 ...stuff... 
 
    </
    head
    >
     
 
    <
    body
    >
     
 
    <
    header
    >
     
 
    <
    h1
    >
    My Site
    </
    h1
    >
     
 
    </
    header
    >
     
 
    <
    nav
    >
     
 
    <
    ul
    >
     
 
    <
    li
    >
    Home
    </
    li
    >
     
 
    <
    li
    >
    About
    </
    li
    >
     
 
    <
    li
    >
    Contact
    </
    li
    >
     
 
    </
    ul
    >
     
 
    </
    nav
    >
     
 
    <
    section
    >
     
 
    <
    h1
    >
    My Article
    </
    h1
    >
     
 
    <
    article
    >
     
 
    <
    p
    >
    ...
    </
    p
    >
     
 
    </
    article
    >
     
 
    </
    section
    >
     
 
    <
    footer
    >
     
 
    <
    p
    >
    ...
    </
    p
    >
     
 
    </
    footer
    >
     
 
    </
    body
    >
     

    </
    html
    >
     
   

　　是不是更干净，更易于理解呢？我们可以把<h1>My Article</h1>打包到header标记中。另外请注意，我们可以在article元素下再增加一个footer元素，用来容纳如翻页导航，相关文章或其它内容。

　　新标记的样式

　　在大多数浏览器中，你只需要如往常一样对元素使用样式，但是请一定要对每个元素加上display:block;规则，随着时间的推移，浏览器对HTML 5新元素的支持越来越标准后，就可以不使用了。

　　下面我们队header应用一些样式：

   
    
    header 
    {
     
 display
    :
     block
    ;
     
 font-size
    :
     36px
    ;
     
 font-weight
    :
     bold
    ;
     

    }
     
   

记住，你现在仍然可以在这些元素上添加class和ID属性，因此，如果你想对导航小节单独使用一个样式，你可以向下面这样增加一个class或ID属性：

   
    
    <
    nav 
    class
    ="main-menu"
    >
     
   

然后再应用一个样式：

   
    
    nav.main-menu 
    {
     
 font-size
    :
     18px
    ;
     

    }
     
   

　　
与旧浏览器的兼容

　　这些样式都不能在IE 6下使用，如果你坚持要保持与旧浏览器兼容，也是有补救办法的，IE 6可以解析这些标记，但不能应用样式，解决办法就是使用JavaScript，使用createElement方法就可以让IE支持HTML 5标记的样式了，你可以在HTML 5文件的头部包括这段代码，也可以保存到一个独立文件中，然后进行引用。

   
    
    <
    script
    >
     
 document.createElement(
    '
    header
    '
    ); 
 document.createElement(
    '
    nav
    '
    ); 
 document.createElement(
    '
    section
    '
    ); 
 document.createElement(
    '
    article
    '
    ); 
 document.createElement(
    '
    aside
    '
    ); 
 document.createElement(
    '
    footer
    '
    ); 

    <
    /
    script> 
   

你可能要问，为什么没有给这段脚本指定MIME类型呢？在HTML 5中无需指定了，在HTML 5中，所有的脚本都假设是type=”text/javascript”，因此不必再多此一举了。

　　虽然IE的问题得到了解决，但据我所知，Firefox 2中的Gecko渲染引擎仍然存在一个bug，解决办法有两个，但这两个办法都不是很理想。考虑到Firefox 2的使用人数已经很少，你可以完全忽视这个bug。