Forrest Liu

======================================================
注：本文源代码点此下载
======================================================

今天是元旦,大家一定都在合家团圆,美哉美哉了吧～

一年之计在春,希望大家都能在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 eat = ['yum!', 'gulp', 'burp!', 'nom'];

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; ilinks.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.opacity0) {

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,欢迎大家参观:第五标记

作者:第五标记

出处:http://www.html5th.com/

本文版权归第五标记所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/