<form> <p> <label for="email">电子邮箱：</label> <input type="email" required autofocus placeholder="您的电子邮箱"> </p> <p> <label for="username">用户名：</label> <input type="text" pattern="^/w{6,12}$" required placeholder="6到12位的英文字符"> <input type="search" placeholder="用户名搜索" autosave="www.yujie.com" results="5"> </p> <p> <label for="username-search">生日：</label> <input type="date" min="1980-01-01" max="2011-3-16" value="1982-10-10"> </p> <p> <label for="blog">博客地址：</label> <input type="url" placeholder="您的博客地址"> </p> <p> <label for="mobile">手机：</label> <input type="number" pattern="^1[0-9]{10}$" placeholder="您的手机号"> </p> <p> <label for="working-year">工作年限：</label> <input type="range" min="1" step="1" max="20" placeholder="您的工作年限" value="3"> </p> <p> <label for="age">年龄：</label> <input type="number" value="20" autocomplete="off" placeholder="您的年龄"> </p> <p> <label for="avatar">头像：</label> <input type="image" src="user.png" mce_src="user.png" placeholder="点击选择头像"> </p> </form>  

　　示例中包含了email、search、date、url、range、number、image类型的输入框和required、autofocus、placeholder、pattern、autosave、results、min、max、step、autocomplete等新属性，它们简单到根据名字就可以揣测出用途。下面是效果图。

　　HTML5表单在各浏览器里的支持程度和表现并不一致，例如Search输入框目前只被Webkit内核浏览器支持，而日期弹出框和拖动条刻度仅被Opera支持。以上的标签类型和属性目前没有一个浏览器完美支持。

　　4、实用之美

　　HTML5的Web Worker、Web Socket、Web Storage等新API让很多后台的工作可以放到前端来处理，Web Worker解决Javascript单线程和阻塞的问题，相当于提供了分布式处理的框架；Web Socket提供了全双工的长连接通信， 利用它，我们可以实现微博消息推送、新邮件推送、实时游戏和聊天，减少了不必要的数据传输，提高了信息的实时性；Web Storage相当于前端的Memcached和数据库。

　　而HTML5的Canvas是最强大的API之一，可以动态生成图形、图像和动画，在HTML5游戏中使用的非常普遍。在下面的例子中，我将展示HTML5 Canvas之美：实现图像颜色渐变效果。

　　以前，我们在网站上显示灰度图像到彩色图像的渐变动画有两种实现方式：1、基于IE滤镜的方案，缺点是无法实现浏览器兼容；2、手动创建彩色图像的灰度版本。现在，利用HTML5的Canvas画布，我们可以高效简单的实现此动画效果。

　　将鼠标放在左边的图片上，图片颜色将从灰度渐变到彩色，一切就在眼前鲜活起来。

　　核心的Javascript代码如下：

// 加载时就进行处理 $(window).load(function(){ var img = $('#color-img'); // 复制图像 img.clone().addClass('gray-img').css({"position": "absolute", "z-index": "2", "opacity": "0"}).insertBefore(img); img.attr('src', grayscale(img.attr('src'))); // 图像的淡入 $('#color-img').mouseover(function(){ $(this).stop().animate({opacity: 1}, 1000); }) // 图像的淡出 $('.gray-img').mouseout(function(){ $(this).stop().animate({opacity: 0}, 1000); }); }); // 创建灰度版的图像 function grayscale(src) { // 取得canvas元素及其绘图上下文 var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var imgObj = new Image(); imgObj.src = src; canvas.width = imgObj.width; canvas.height = imgObj.height; ctx.drawImage(imgObj, 0, 0); // 绘制一副图像 var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取之前的数据 for(var x = 0; x < imgPixels.height; x++){ for(var y = 0; y < imgPixels.width; y++){ var i = (x * 4) * imgPixels.width + y * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; // 计算灰度值 imgPixels.data[i] = avg; // rgb中的r imgPixels.data[i + 1] = avg; // rgb中的g imgPixels.data[i + 2] = avg; // rgb中的b // i + 3是alpha通道，我们现在不需要 } } ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL(); }  

　　针对不支持的旧浏览器，我们可以使用Modernizr Javascript库或者原生Javascript检测当前浏览器是否支持，并提供替代性的解决方案：

if(!Modernizr.canvas) { // 或者使用!document.createElement('canvas').getContext 　　$(document).ready(backupFunc); }

　　目前主要浏览器的新版本都提供Canvas标签的支持：

　　5、HTML5的不足

　　目前HTML5还有哪些不足之处？