今天是元旦，大家一定都在合家团圆，美哉美哉了吧～
一年之计在春，希望大家都能在2011年有一个好的开端，工作顺利。
这样，我也觉得新的一年来了，自己需要学点东西充实下，即成此篇。也祝自己能够坚持下去完整学习HTML5！
既然是概览，就让我们从宏观上了解下即将到来的HTML5长什么样子吧。
下面是个HTML5游戏截图
对，这个没有使用任何的图片。没错，你也猜对了，这就是canvas。怎么样，蠢蠢欲动了吧。
下面给个链接http://www.html5th.com/html5-game.html，先给各位过过瘾，也许下个震撼的由HTML5打造的RIA游戏就出自各位看官之手啦～～
HTML5的学习包括以下几个部分：
1. 通用框架，就是一些通用规则，定义方式，要求一致的和要求比较宽泛的。
这一部分的一些内容其实大家早已烂熟于心，在这样的基础上W3C把一些容易混淆的概念理顺了一下比如js对象的属性（properties）和CSS的属性（properties）。你的标记语言可以使用HTML语法和XHTML语法，但是建议在同一文档内仅遵从一种，并且明确的指明一下。HTML5不支持MPEG4.等等。。后面的章节让我们一起来详细学习。
2. HTML文档的API，结构以及标签的语义。
这一部分没什么好说的，W3C新加入了一些标签，并且丰富了一些通用标签的api，让他们更生动，更容易使用它们达到炫丽的效果。加入了新的标签必定对dom树的结构造成影响，具体都有什么样的影响，后面我们会详细学习。
3.这部分将详细介绍HTML的每一个标签元素。包括新加入的Header, Footer, Canvas....
4. HTML文档的装载方式。新的HTML文档将会以怎样的方式装载浏览器呢？可不是普普通通的样子了，会有特效～～哈哈，拭目以待吧。
5.用户交互。HTML将提供什么方式去和用户更友好的交互呢？将来的页面还需要用Ajax维持页面不刷新么～～
6.W3C新修订的HTML，XHTML语法是什么样呢？肯定是不一样了。。跟我一起来学习，揭开一个个谜团吧。
下面我用新的API做了个小例子，供大家娱乐：
http://www.html5th.com/HTML5-Drag.html
给些代码吧～～
代码
var yum = document.createElement('p');
var msie = /*@cc_on!@*/0;
yum.style.opacity = 1;
var links = document.querySelectorAll('li > a'), el = null;
for (var i = 0; i < links.length; i++) {
el = links[i];
el.setAttribute('draggable', 'true');
addEvent(el, 'dragstart', function(e) {
e.dataTransfer.effectAllowed = 'copy'; e.dataTransfer.setData('Text', this.id);
});
}
var bin = document.querySelector('#bin'); //看看这个
addEvent(bin, 'dragover', function(e) {
if (e.preventDefault) e.preventDefault();
this.className = 'over';
e.dataTransfer.dropEffect = 'copy';
return false;
});
// to get IE to work
addEvent(bin, 'dragenter', function(e) {
this.className = 'over';
return false;
});
addEvent(bin, 'dragleave', function() {
this.className = '';
});
addEvent(bin, 'drop', function(e) {
if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???
var el = document.getElementById(e.dataTransfer.getData('Text'));
el.parentNode.removeChild(el);
// stupid nom text + fade effect
bin.className = '';
yum.innerHTML = eat[parseInt(Math.random() * eat.length)];
var y = yum.cloneNode(true);
bin.appendChild(y);
setTimeout(function() {
var t = setInterval(function() {
if (y.style.opacity <= 0) {
if (msie) { // don't bother with the animation
y.style.display = 'none';
}
clearInterval(t);
} else {
y.style.opacity -= 0.1;
}
}, 50);
}, 250);
return false;
});
了解更多关于HTML5，欢迎大家参观：第五标记
作者：第五标记