HTML5 教程学习 - HTML5+CSS3 实战(5) header - VII II X - Joomla控，Drupal粉 - 开源CMS建站新闻杂谈、文档教程、案例介绍、扩展相关、个人博客及收藏

HTML5 教程学习 - HTML5+CSS3 实战(5) header

Blog - 代码 Tuesday, 19 January 2010 13:55

昨天的教程中，我们搞定了一个基本的HTML5页面框架，今天来看看头部的代码。根据W3C的定义规范：

header元素用来呈现一组具有介绍或导航性质的元素。

根据设计图，在我们的实战页面中，头部包括站点名称，站点描述以及全局导航；所以使用<header>标签完全符合逻辑。另外，我们要在<header>中使用<nav>来做全局导航；根据W3C的定义规范：

nav元素是一个可以用来作为页面导航的链接组；其中的导航元素链接到其他页面或当前页面的其他部分。

接下来我们结合着局部设计图，来看看<header>部分的详细代码：

html5-header-block

范例代码如下：

<header id="banner" class="body">
 
  <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022</del> <ins>2009</ins></strong></a></h1>
 
  <nav>
    <ul>
      <li class="active"><a href="#">home</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
 
</header>
<!-- /#banner -->