HTML5基础实战 - 第一部分：初试锋芒(2) 规划页面的header与nav

规划页面

你将要创建一个简单的web页面。在这一过程中，我会讨论几个HTML5中引入的新标签。为了创建一个高效的并且是有实效的web页面，你必须要制定一个计划，考虑一下想要打造的所有组件。你创建的网页将会有如图1所示的高层设计，页面的设计包含了一个Header区、一个Navigation区、一个包含了三个Section区和一个Aside区的Article区，以及最后的一个Footer区。该页面的设计目标是在Google的Chrome浏览器中工作，其消除了一些视觉上的混乱，这些混乱带来的是浏览器兼容问题的调整，同时也妨碍到了对基础结构的理解。我们的目标是创建出一个清晰地描述了新的HTML5标签的用法的页面，展示如何使用它们来创建格式良好的代码和优雅的页面设计。

在创建这一页面的过程中，我会涉及CSS3，我需要用它来正确地渲染HTML5网页。CSS3对于HTML5页面的的风格、导航和一般观感来说是必不可少的，它的一些属性组，你可以在WsSchool的CSS3参考站点（参见参考资料一节）上找到这些属性，其中包括了一些很有用的元素，比如说background、font、marquee和animation等。

不过，在开始构造页面之前，你需要学习一些新的HTML5的标签。

Header区

Header区的例子包含了页面标题和副标题，<header>标签被用来创建页面的Header区的内容。除了网页本身之外，<header>标签还可以包含关于<section>和<article>的公开信息。这里创建的网页有该页面的一个Header区，这在高层设计中有给出，以及一个位于Article和Section区内部的Header区。清单1提供了一个<header>标签标记的例子。

<!--<header>标签的例子-->
<header>
 <h1>标题文字</h1>
 <p> 文本或是图像可放在这里</p>
 <p> Logo通常也放在这个地方</p>
</header>

< header>标签还可以包含一个< hgroup>标签，如清单2所示。< hgroup>标签把标题分组放在一起，使用< h1>到< h6>这些标题分级来在此处显示主标题和子标题。

<!--<hgroup>标签的例子-->
<header>
 <hgroup>
  <h1>主标题</h1>
  <h2>子标题</h2>
 </hgroup>
 <p>文本或是图像可放在这里</p>
</header>

Navigation区

你可以使用< nav>标签来创建页面的Navigation区。<nav>元素定义了一个专门用于导航的区域，<nav>标签应该用做主站点的导航，而不是用来放置被包含在页面的其他区域中的链接。Navigation区可以包含诸如清单3所示的代码。

<!--<nav>标签的例子-->
<nav>
 <ul>
  <li><a href="#" kesrc="#">Home</a></li>
  <li><a href="#" kesrc="#">About Us<a></li>
  <li><a href="#" kesrc="#">Our Products</a></li>
  <li><a href="#" kesrc="#">Contact Us</a></li>
 </ul>
</nav>