HTML5的示例网页与简要分析。

嗯，基于种种原因我开始了HTML5的学习。所用教材为《HTML5程序设计(第2版)》
那么首先我们进入第一个章节——关于HTML5。

HTML5的新功能

新的DOCTYPE和字符集

下面是一段HTML4 DOCTYPE代码：

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这个似乎有点长，难以记忆，我们往往只能使用复制粘贴的方式来解决这个问题，同时也存在复制错误的可能性。
对于
这个问题，HTML5给出了漂亮的解决方案：

1	<!DOCTYPE html>

现在的DOCTYPE好记多了。和它一样，字符集的声明也简化了许多。下面是过去的代码：

1	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

现在成了：

1	<meta charset="utf-8">

当然，使用HTML5的DOCTYPE会触发浏览器以标准兼容模式显示页面。众所周知，Web页面有多种显示模式，如怪异模式(Quirks)、近标准模式(Almost Standards)以及标准模式(Standards)，其中标准模式也称作非怪异模式(no-quirks)。浏览器根据DOCTYPE识别该使用哪种模式，并且根据它来确定使用什么规则验证页面。怪异模式下，浏览器尽量不中断显示，即使没有完全通过验证也会显示出来。HTML5引入了新的标记元素和其他机制，因此如果坚持使用废弃的元素，页面将通不过验证。

新元素和旧元素

HTML5引入了很多新元素，根据类型不同，分为了7大类，如下表所示：

内容类型	描述
内嵌	向文档中添加其他类型的内容，例如audio、video、canvas和iframe等
流	在文档和应用的body中使用的元素，例如form、h1和small等
标题	段落标题，例如h1、h2和hgroup等
交互	和用户交互的内容，例如音频和视频控件、button和textarea等
元数据	通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style和title等
短语	文本和文本标记元素，例如mark、kbd、sub和sup等
片段	用于定义文档中片段的元素，例如article、aside和title等

上述所有类型的元素都可以通过CSS来设定样式。此外，其中一些元素，如canvas、audio和video，在使用时往往需要其他API来配合，以实现细粒度控制，但也可以直接使用。这将在后续进行学习。

语义化标记

Google分析了上百万的页面，发现了DIV标签的通用ID名称重复量很大。所以引入了一组新的片段类元素进入HTML5，在目前主流浏览器中已经可以使用了，如下表：

元素名	描述
header	标记头部区域的内容(用于整个页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面中的一块区域)
section	Web页面中的一块区域
article	独立的文章内容
aside	相关内容或者引文
nav	导航类辅助内容

同样，上述所有元素也可以用CSS设定样式。
下面是一个HTML5页面的概貌，其中使用了新的DOCTYPE、字符集和语义化标记元素——新的片段类元素。

<!-- test.html -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML5</title>
	<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
	<h1>header</h1>
	<h2>Subtitle</h2>
	<h4>HTML5 Rocks!</h4>
</header>
<div id="container">
	<nav>
		<h3>Nav</h3>
		<a href="http://www.example.com">link 1</a>
		<a href="http://www.example.com">link 2</a>
		<a href="http://www.example.com">link 3</a>
	</nav>
	<section>
		<article>
			<header>
				<h1>Article Header</h1>
			</header>
			<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adiplscing
				elit.Vivamus at
				est eros, vel fringilla urna.</p>
			<footer>
				<h2>Article Footer</h2>
			</footer>
		</article>
		<article>
			<header>
				<h1>Article Header</h1>
			</header>
			<p>HTML5:"Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing
				elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
				rhoncus</p>
			<footer>
				<h2>Article Footer</h2>
			</footer>
		</article>
	</section>
	<aside>
		<h3>Aside</h3>
		<p>HTMP5:"Lorem ipsum dolor nunc qut nunquam sit amet, consectetur adipiscing
			elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio
			rhoncus</p>
	</aside>
	<footer>
		<h2>Footer</h2>
	</footer>
</div>
</body>
</html>

没有样式的页面看起来很逊。下面是一些可以用来设置内容样式的CSS代码。需要注意的是，它使用了CSS3的一些新特性，例如圆角(border-radius)和旋转变换(transform:rotate())。CSS3同HTML5一样正在开发，为了便于浏览器逐步支持，也采用了模块化的发布子规范，例如变换(transformation)、动画(animation)和过渡(transition)分别对应不同的子规范。
CSS3规范可能会变动，功能也处于实验期，为了避免命名空间冲突，功能都会加上浏览器厂商的前缀。要显示圆角、渐变(gradients)、阴影(shadows)和变形(transformations)的话，需要在声明的部分加上前缀：-moz-(Mozilla浏览器)、o-(Opear浏览器)和-webkit-(Safari和Chrome等基于WebKit核心的浏览器)。
下面是对应上面HTML5页面的CSS文件的源码：

body {
    background-color: #CCCCCC;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    margin: 0 auto;
    max-width: 900px;
    border: solid #FFFFFF;
}

header {
    background-color: #F47D31;
    display: block;
    color: #FFFFFF;
    text-align: center;
}

header h2 {
    margin: 0;
}

h1 {
    font-size: 72px;
    margin: 0;
}

h2 {
    font-size: 24px;
    margin: 0;
    text-align: center;
    color: #F47D31;
}

h3 {
    font-size: 18px;
    margin: 0;
    text-align: center;
    color: #F47D31;
}

h4 {
    color: #F47D31;
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 20px #888;
    -webkit-transform: rotate(-45deg);
    -moz-box-shadow: 2px 2px 20px #888;
    -moz-transform: rotate(-45deg);
    position: absolute;
    padding: 0 150px;
    top: 50px;
    left: -120px;
    text-align: center;
}

nav {
    display: block;
    width: 25%;
    float: left;
}

nav a:link, nav a:visited {
    display: block;
    border-bottom: 3px solid #fff;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 5px;
}

nav a:hover {
    color: white;
    background-color: #F47D31;
}

nav h3 {
    margin: 15px;
    color: white;
}

#container {
    background-color: #888;
}

section {
    display: block;
    width: 50%;
    float: left;
}

article {
    background-color: #eee;
    display: block;
    margin: 10px;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 20px #888;
    -webkit-transform: rotate(-10deg);
    -moz-box-shadow: 2px 2px 20px #888;
    -moz-transform: rotate(-10deg);
}

article header {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
}

article footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
}

article h1 {
    font-size: 18px;
}

aside {
    display: block;
    width: 25%;
    float: left;
}

aside h3 {
    margin: 15px;
    color: white;
}

aside p {
    margin: 15px;
    color: white;
    font-weight: bold;
    font-style: italic;
}

footer {
    clear: both;
    display: block;
    background-color: #FFFFFF;
    text-align: center;
    padding: 15px;
}

footer h2 {
    font-size: 14px;
    color: white;
}

/* links */
a {
    color: #F47D31;
}

a:hover {
    text-decoration: underline;
}

效果就请读者自行验证。