在项目开始前,先要了解下HTML5规范包含的一些有用的新的语义标签,用于提供HTML页面的各个区域或部分的意义,例如页眉、页脚、导航栏、边栏等等。在以前的HTML版本中,这些部分通常使用<div>标签来创建,通过id或class属性来区分。
HTML5引入的主要标签包括:
<header>
此标签用于定义Web页面的某些部分的页眉,可以是整个页面、<article>标签或<section>标签。
<nav>
这是Web页面上主要导航链接的容器。此标签不应用于所有链接组,而是应仅用于主要导航块。如果您有一个<footer>标签包含导航链接,不需要将这些链接封装在<nav>标签中,因为<footer>标签将可以独自包括这些链接。
<footer>
此标签定义页面的某些部分的页脚。页脚不一定是在页面、文章或区域的结尾,但是它通常是在那个位置。
<article>
定义文档或页面上的独立区块,例如新闻、杂志、博文或评论。
<section>
此标签表示文档的一部分,例如,文章或教程的一章或一节。该标签通常具有一个页眉,虽然严格来说是不需要的。
<aside>
用于标记边栏或一些将认为与其周围内容有点无关的内容。此项的一个例子就是广告块。
<hgroup>
在某些情况下,页面、文章或区域可能需要多个标题,例如,您有一个标题和一个副标题。您可以在<hgroup>标签中封装这些标题,使用<h1>标签表示主标题,<h2>标签表示副标题。
这些标签的基础结构遵循以下大纲:
header
+hgroup
nav
article
+header
+section
++header
footer

上面是网站的布局设计,主要有header、navigation、footer和main四个区块,实现代码如下:
<!-- HTML5的DOCTYPE声明模式,它可以向后兼容,
再也不用记忆XHTML中复杂的DOCTYPE了!-->
<!DOCTYPE html>
<html>
<head>
<!-- 指定文档字符编码的写法,该写法在所有浏览器上都有效。-->
<meta charset="utf-8" />
<title>HTML5 + CSS3 Demo</title>
<!-- link和script标签也无需提供type属性(No More Types for Scripts and Links),
因为CSS和JavaScript是目前惟一受支持的样式表和脚本类型 -->
<link href="style.css" rel="stylesheet" />
<!-- 因为IE浏览器(甚至版本8)不支持新的HTML5标签,处理此问题的一个已知方法是使用
JavaScript函数document.createElement()为每个标记创建虚拟标签。html5.js文件将
为每个新的HTML标签进行此操作 -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1><a href="#">Logo</a></h1>
<h2>slogan</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Catalog one</a></li>
<li><a href="#">Catalog two</a></li>
<li><a href="#">Catalog three</a></li>
</ul>
</nav>
<!-- main block begin -->
<!-- main block end -->
<footer>© 2013, codemany.com</footer>
</body>
</html>
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 768px;
margin: 0px auto;
}
header h1 {
font-size: 36px;
margin: 0px;
}
header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
background-color: #666;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #efd3d3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
footer {
border-top: 1px solid #ccc;
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
整个网站主要有这么几个页面:首页、分类页、书目页、内容页,这些页面共用一个布局,主要区别在于main区块的不同。首页、分类页和书目页相似,都是由列表组成。
首页是多个无序列表:
<h3>Catalog 1</h3> <ul> <li>Book's title</li> <li>Book's title</li> </ul> <h3>Catalog 2</h3> <ul> <li>Book's title</li> <li>Book's title</li> </ul>
分类页是单个无序列表:
<h3>Catalog 1</h3> <ul> <li>Book's title</li> <li>Book's title</li> </ul>
书目页是单个有序列表:
<h3>Book's title</h3> <ol> <li>Chapter 1</li> <li>Chapter 2</li> <li>Chapter 3</li> </ol>

内容页,顾名思义就是显示小说具体内容的页面。文章内容用<article>标签表示,其中的标题、作者、发表时间等信息被包含在<header>标签中。主要代码如下:
<article>
<header>
<h1><a href="#">Title</a></h1>
<p>By <a href="#">Peter</a> on <time>2011-11-12 14:54</time></p>
</header>
<p>Lorem ipsum...</p>
<section>
<header>
<h1>This is a section heading</h1>
</header>
<p>Lorem ipsum...</p>
</section>
<footer>
<a href="#">Back</a>
<a href="#">List</a>
<a href="#">Forward</a>
</footer>
</article>
在上面的代码里,<header>中我们仅使用了<h1>标签,这是因为HTML5会根据上下文计算出heading元素的层级,因此会有:
<body><h1> // 相当于heading 1
<body> … <section><h1> // 相当于heading 2
<body> … <section><section><h1> // 相当于heading 3
最后顺便说一句,HTML5支持已存在的各种写法:xhtml1.0、xhtml1.1和html4.0,但建议使用xhtml1.1规范,即:
1. 所有标签/属性都使用小写字母;
2. 所有属性值都必须加引号;
3. 使用闭合标签。




