今天是元旦,大家一定都在合家团圆,美哉美哉了吧~
一年之计在春,希望大家都能在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,欢迎大家参观:第五标记
作者:第五标记