HTML5 开发者须要了解的技巧和工具汇总

HTML5 开发者须要了解的技巧和工具汇总

     HTML5如今已经成为了Web开发中的热门话题，大多数现代浏览器（Safari、Chrome，Firefox，IE10和移动设备）都支持HTML5。即便HTML5的规范尚未制定完成，但许多开发者已经将其做为Web开发项目中的主要技术。一些网站巨头，如Google、Facebook、Twitter和YouTube等，都创建在HTML5基础上。

HTML5中最使人兴奋的功能莫过于画布（canvas）和强大的表单功能，画布功能已经能够在大部分浏览器中完美体验（除了IE），但对于新表单元素的支持还不是太好。对Web开发者来讲，是时候开始HTML5开发了。

要进行HTML5开发，本文中的一些技巧、工具可让你缩短学习的时间，提升开发的效率。

1、HTML5支持测试列表

在开始以前，你须要了解现代的浏览器以及移动平台对于HTML5的支持状况。

·          

·         主流浏览器HTML5功能支持一览

·         移动平台HTML5支持一览

·         HTML5支持测试

·         HTML5演示

2、让HTML5元素可用

老版本的IE浏览器不能识别新的HTML元素。可是，可使用一些JavaScript或CSS解决方案来弥补这个缺陷。

·         HTML5Shiv：此脚本可使IE浏览器识别HTML5元素。

·         HTML5 Enabler：功能与HTML5Shiv相似。

·         Modernizr：它使得开发者能够在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其余不支持这些新技术的浏览器的控制。

·         HTML5 Reset：它提供了一组HTML、CSS文件，让你可以以最少的时间来启动一个新的项目。它使用modernizr来支持HTML5 和 CSS3。

3、浏览器插件

下面是一些JavaScript插件，能够弥补一些浏览器对HTML5的支持问题。

1. VideoJS

VideoJS是一个HTML5的视频播放器，能够在全部浏览器中使用，包括IE6和移动设备。对于不支持HTML5的浏览器则自动使用Flash播放器来播放。

2. AudioJS

HTML音频播放器。用来让HTML5 的 <audio> 标签能够在各类浏览器上使用，包括移动设备。

3. HTML5Widget

HTML5的表单模块，包括日历，调色板，滑动部件，客户端验证等。

4. Webforms2

HTML5 表单属性的支持，例如pattern、required和autofocus。

5. LimeJS

LimeJS是HTML5的游戏框架，用于为现代触摸设备和桌面浏览器建立快速、本地化的游戏。

6. FlexieJS

支持CSS3弹性盒子模型（Flexible Box Model）。

4、在线工具

此外，还有一些在线工具，能够帮助开发者加快HTML5项目的开发。

1. HTML5 Boilerplate

HTML5Boilerplate 是一个HTML / CSS /JS模板，是实现跨浏览器正常化、性能优化、稳定的可选功能如跨域Ajax和Flash的最佳实践。开发者称之为技巧集合，目的是知足你开发一个跨浏览器，而且面向将来的网站的需求。

2. Switch to HTML5

很是有用的在线工具，能够根据你的喜爱生成HTML5文档结构。

3. Initializr

Initializr是一个HTML5模板生成器，以帮助你开始HTML5项目的开发 。它创建在HTML5 Boilerplate之上。

4. HTML5 Visual 速查表

5. HTML5 Canvas 速查表

原文下载：http://wenku.it168.com/d_000259653.shtml