HTML5是下一代Web页标准，所以对于网络从业者来说如果希望跟紧时代，这是不可能绕过的门槛。
目前Safari, Chrome, Firefox和Opera的最新版本已经支持了一部分的HTML5功能，未来IE9也将会支持HTML5部分功能，从时间的角度来说，并不紧迫。如果全面支持HTML5，国内用户至少要等到IE 10的出现，相匹配的Windows，应该是介于Win 8到9之间，时间大致是2012年以后吧。希望地球还在。^_^
关于HTML5目前还没什么中文资料，我以一个学习笔记(dive into html5)的角度简要把要点梳理一下，但不会遗漏。
(个人水平有限，有错误欢迎更正):
开始之前请看演示页面：
一，新的语法
1，DOCTYPE变更
打开每个网页，我们大都会看到顶部的一行文字。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
这个东东主要当年是用于解决IE5在Mac下的兼容性问题，具体资料可以自行了解。
HTML5的doctyple(文档类型说明)变更为了
<!DOCTYPE html>
目前这两者在主流浏览器下都有效。
2，根元素(Element ，不管别人怎么说，我译为元素，)
目前如下:
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-CN” xml:lang=”zh-CN”>
xmlns这句是声明XHTML1.0的一个命名空间，在HTML5中已不再必要，lang后面大家都知道是语言声明，比如english就是en,简体中文就是zh-CN，如果xml的语言和网页相同，则后面也可以省略，html5中可写为：
<html lang=”en”> ，老的语句也是有效的，意味着html5在某些部分向下兼容。
3，<HEAD> 元素
<HTML>的第一个子元素，包含很多metadata(元数据)
例子代码：
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>我的博客</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<link rel=”alternate” type=”application/atom+xml” title=”我的博客 feed” href=”/feed/” />
<link rel=”search” type=”application/opensearchdescription+xml” title=”我的博客 search” href=”opensearch.xml” />
<link rel=”shortcut icon” href=”/favicon.ico” />
</head>
当前网页的第一项往往是：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
用以声明向服务器发送页面为编码为utf-8的html文件。国内常见GB2312或GBK(台湾为Big5)，随着国内网络标准化趋势，用utf-8的逐步成为主流了。
html5中精简为<meta charset=”utf-8″ /> (html5兼容旧语句)。
<link…>关联的意思是说明这个网页链接到其他文件的方式
rel=”stylesheet” ….：在文件内应用如下..css样式表
rel=”alternate” ….：feed内容等同于本页面内容，是一个标准的订阅格式。
rel=”search…：本页面xml搜索格式，是一个标准的开放搜索描述。
rel=”shortcut icon”….：这个大家都知道，是网页小图标。在标签页或加入收藏夹时候会看到。比如我的博客是“CQ”字样。
样式表那句：
<link rel=”stylesheet” href=”style.css” type=”text/css” />
HTML5中可以去掉最后部分，变为：<link rel=”stylesheet” href=”style.css” />
<link rel=”alternate” type=”application/atom+xml” title=”我的博客 feed” href=”/feed/” />
alternate除了Atom Feed格式外，还可以定义pdf格式。这句html5没什么变化。
rel还有很多其他参数可用，包括博客用的”archives”和“external”，以及Google用的”nofollow”，还有microformat的”license”等等，其中一些不属于html内建用法，不一定具有通用性。
header部分大致这样了，比较枯燥，因为大部分时候我们改变了header部分，页面无法直接体现。
4，html5中新的元素
除了<header>,<title>这类我们都很熟悉的东东外，html5新增了<section>,<nav>,<article>,<aside>,<hgroup>,<header>,<footer>,<time>,<mark>。这些代码块其实用词都很简单，个人认为如果你熟悉wordpress或joomla一类流行的脚本软件，就应该很好理解这些含义，先不做解释以后会用详细章节说明。
5，关于未知元素的处理
浏览器中支持对诸如<p>这类内建元素的解释，<p>的效果是产生上下空白/换行，不同的浏览器内建支持的元素不尽相同，比如Mozilla系的浏览器支持的元素列表在这里。这里涉及一个浏览器DOM(文档对象模型)的概念，可以自行了解。
我们都知道<p>用</p>来结束，表示<p>的作用范围结束。如果是<p></span>这样，</span>不能结束<p>，这就产生了一个问题，浏览器如何处理这个情况？不同浏览器对此处理方式是不同的。Mozilla的浏览器，比如Firefox的处理方式是把<span>作为<p>的一个子元素。
如下代码：
<style type=”text/css”>
article { display: block; border: 1px solid red }
</style>
…
<article>
<h1>欢迎</h1>
<p>这是 <span>一段话</span>。</p>
</article>
效果是在文字周围产生一条红色实线方框，IE下是无效的，Firefox下是有效的，有兴趣的朋友可以把这代码改作为一个htm文件看下。IE 9会解决这个问题。这段代码的结构在正常看起来是如下样子的：
article
|
+–h1 (article的儿子)
| |
| +–text node “欢迎”
|
+–p (article的儿子, h1的兄弟)
|
+–text node “这是 ”
|
+–span
| |
| +–text node “一段文字”
|
+–text node “.”
在IE看起来是这样：
article (没孩子)
h1 (article的兄弟)
|
+–text node “欢迎”
p (h1的兄弟)
|
+–text node “这是 ”
|
+–span
| |
| +–text node “一段文字”
|
+–text node “.”
前面说“比如Firefox的处理方式是把<span>作为<p>的一个子元素。”，但IE不会，在这个例子中，IE把article作为h1和p的平行元素。因为IE遇到不认识(自定义)的元素，会在DOM中生成一个新的没有子类的空节点(empty node)。这个节点按我理解就是和已定义的节点地位相等。
解决方案：
利用javascript定义伪元素，IE可以识别。代码：
<html>
<head>
<style>
article { display: block; border: 1px solid red }
</style>
<script>document.createElement(“article”);</script>
</head>
<body>
<article>
<h1>欢迎</h1>
<p>这是 <span>一段话</span>。</p>
</article>
</body>
</html>
这行脚本没有在浏览器DOM中生效，但是解决了从IE6起所有版本的问题。这样我们可以用这个方法为HTML5在IE中建立所有伪元素，一个例子：
<!–[if lt IE 9]>
<script>
var e = (“abbr,article,aside,audio,canvas,datalist,details,” +
“figure,footer,header,hgroup,mark,menu,meter,nav,output,” +
“progress,section,time,video”).split(‘,’);
for (var i = 0; i < e.length; i++) {
document.createElement(e[i]);
}
</script>
<![endif]–>
<!–[if lt IE 9]>的意思是如果访问者用的是版本在9以下的所有IE浏览器，那么执行中间这段代码。这个用法现在已经很流行了，大部分是为IE6或7单独制定CSS使用的。Remy Sharp(人名)为我们解决了这个问题，他把一个经过完善的脚本放在了Google Project上，这样一次性调用，就可以解决在HTML5在IE中的兼容性问题：
<head>
<meta charset=”utf-8″ />
<title>我的博客</title>
<!–[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
</head>
HTML5提供了类似自然语言的专属标签，比如<header></header>(注意，不是头部标签<head>，更多的可以在这里查询)，很自然的能体现是身体的上半部分。比如<header><p>这是我的头部</p></header>。
我们在html4中描述文章层次时候往往用<h1><h2>…<h6>这类标签，这样可以区分标题、副标题、段落标题或正文。虽然不错但产生了一个问题，就是同一页面不同文章部分的层次问题，这篇文章的<h2>可能和另一篇文章的<h3>是同一层次，所以html5给出了解决方案 — <hgroup>标签，利用<hgroup></hgroup>来包含一部分内容，类似于函数的定义域和作用域，括起来以后只在<hgroup>范围内生效。
