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

一、HTML5支持测试列表

在开始之前,你需要了解现代的浏览器以及移动平台对于HTML5的支持情况。

二、让HTML5元素可用

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

三、浏览器插件

下面是一些JavaScript插件,可以弥补一些浏览器对HTML5的支持问题。

1. VideoJS

VideoJS是一个HTML5的视频播放器,可以在所有浏览器中使用,包括IE6和移动设备。对于不支持HTML5的浏览器则自动使用Flash播放器来播放。

VideoJS
VideoJS

2. AudioJS

HTML音频播放器。用来让HTML5 的 <audio> 标签可以在各种浏览器上使用,包括移动设备。

AudioJS
AudioJS

3. HTML5Widget

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

HTML5Widget
HTML5Widget

4. Webforms2

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

Webforms2
Webforms2

5. LimeJS

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

LimeJS
LimeJS

6. FlexieJS

支持CSS3弹性盒子模型(Flexible Box Model)。

FlexieJS
FlexieJS

四、在线工具

此外,还有一些在线工具,可以帮助开发者加快HTML5项目的开发。

1. HTML5 Boilerplate

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

HTML5 Boilerplate
HTML5 Boilerplate

2. Switch to HTML5

非常有用的在线工具,可以根据你的喜好生成HTML5文档结构。

Switch to HTML5
Switch to HTML5

3. Initializr

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

Initializr
Initializr

4. HTML5 Visual 速查表

HTML5 Visual 速查表
HTML5 Visual 速查表

5. HTML5 Canvas 速查表

HTML5 Canvas 速查表
HTML5 Canvas 速查表

6. HTML5 笔记

HTML5 笔记
HTML5 笔记

五、其他

你可以通过下面的链接来跟踪HTML5的更新。

HTML5追踪

你可以通过下面的链接获得HTML5网站的设计灵感。这个网站库中包含了大量的使用HTML5技术的网站。

HTML5Gallery

文章出处:http://www.queness.com/post/9375/tips-tricks-and-tools-you-will-need-to-start-using-html5-today