HTML5学习笔记

概述：

HTML5做为最新的WEB前端标准，虽然全面的普及还需要一段时间，但了解下它的基本情况还是必须地！

本文简要介绍学习过程中了解到的几个技术点。

注：请使用支持HTML5的浏览器浏览本页面！点击下面的按钮检查你的浏览器是否支持HTML5！

正文：

基本HTML5文档格式

<!doctype html> 
<html> 
<head> 
<meta charset="gb2312" /> 
</head> 
<body> 
</body> 
</html>

是不是很简洁，如果用HTML4，你需要这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>

新的语义化标签

<footer>	定义 section 或 page 的页脚
<header>	定义 section 或 page 的页眉
<nav>	定义导航链接
<section>	定义文档中的节
<article>	定义外部的内容
<aside>	定义article 以外的内容
……

更多内容请访问：http://www.w3school.com.cn/html5/html5_reference.asp

新的Input类型

Email	电子邮件
Url	网址
Number	数字
Date pickers	日期
Color	颜色

来一个DEMO：http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html

Canvas

顾名思义，这是一个画布，原来做WPF、Silverlight时经常用到，没想到在HTML中也可以使用了！这个东西用的好的话，可以做出好多原来需要使用FLash、Silverlight做出的效果。

先看一个DEMO：http://hakim.se/experiments/html5/blob/03/

怎么样，帅吧！没有HTML5之前，只能用Flash或者Silverlight来完成这个，现在用HTML5 + Javascript也可以完成的这么好！

我自己也写了一个简单的示例：

HTML代码：

<canvas id="myCanvas" class="myCanvas" width="400" height="100"></canvas>
<input id="btnBeginAnimate" type="button" value="BeginAnimate" />

Javascript代码：

var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        cxt.fillStyle = "#A1C5D7";
        cxt.beginPath();
        cxt.arc(20, 18, 15, 0, Math.PI * 2, true);
        cxt.closePath();
        cxt.fill();

        $("#btnBeginAnimate").click(BeginAnimate);

        function BeginAnimate() {
            setInterval(animateShape, 100);
        }

        var x = 20;
        function animateShape() {
            cxt.clearRect(0, 0, 400, 300);
            cxt.beginPath();
            cxt.arc(x, 18, 15, 0, Math.PI * 2, true);
            cxt.closePath();
            cxt.fill();

            x += 3;
        }

最后效果如下：

OK!简单介绍到这里！