第一节 概览HTML5

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

作者：第五标记

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

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