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

深碍√TFBOYSˉ_ 2022-09-22 15:50 183阅读 0赞

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

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

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

一、HTML5支持测试列表

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

*  [主流浏览器HTML5功能支持一览][HTML5]
 *  [移动平台HTML5支持一览][HTML5 1]
 *  [HTML5支持测试][HTML5 2]
 *  [HTML5演示][HTML5 3]

二、让HTML5元素可用

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

*  [HTML5Shiv][]：此脚本可以使IE浏览器识别HTML5元素。
 *  [HTML5 Enabler][]：功能与HTML5Shiv类似。
 *  [Modernizr][]：它使得开发者可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
 *  [HTML5 Reset][]：它提供了一组HTML、CSS文件，让你能够以最少的时间来启动一个新的项目。它使用modernizr来支持HTML5 和 CSS3。

三、浏览器插件

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

[　　][Link 1][1. VideoJS][Link 1]

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

![1.jpg][]

[　　][Link 2][2. AudioJS][Link 2]

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

![2.jpg][]

[　　][Link 3][3. HTML5Widget][Link 3]

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

![3.jpg][]

[　　][Link 4][4. Webforms2][Link 4]

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

![4.jpg][]

[　　][Link 5][5. LimeJS][Link 5]

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

![5.jpg][]

[6. FlexieJS][]

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

![6.jpg][]

四、在线工具

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

[1. HTML5 Boilerplate][]

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

![7.jpg][]

[2. Switch to HTML5][]

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

![8.jpg][]

[3. Initializr][]

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

![9.jpg][]

[4. HTML5 Visual 速查表][4. HTML5 Visual]

![10.jpg][]

[5. HTML5 Canvas 速查表][5. HTML5 Canvas]

![11.jpg][]

[6. HTML5 笔记][6. HTML5]

![12.jpg][]

五、其他

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

[HTML5追踪][HTML5 4]

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

[HTML5Gallery][]

[HTML5]: http://www.findmebyip.com/litmus/
[HTML5 1]: http://mobilehtml5.org/
[HTML5 2]: http://html5test.com/
[HTML5 3]: http://html5demos.com/
[HTML5Shiv]: http://code.google.com/p/html5shiv/
[HTML5 Enabler]: http://remysharp.com/2009/01/07/html5-enabling-script/
[Modernizr]: http://www.modernizr.com/
[HTML5 Reset]: http://html5reset.org/
[Link 1]: http://videojs.com/
[1.jpg]: /images/20220721/0ea2192296c940b4822df411d564e4b2.png
[Link 2]: http://kolber.github.com/audiojs/
[2.jpg]: /images/20220721/1db43b0c025b4b87bc90f17aae8435a8.png
[Link 3]: https://github.com/zoltan-dulac/html5Widgets
[3.jpg]: /images/20220721/3178aa3002b6458b979ffcbe3d64e249.png
[Link 4]: https://github.com/westonruter/webforms2
[4.jpg]: /images/20220721/f56596874362406396563f55d68fdb94.png
[Link 5]: http://www.limejs.com/
[5.jpg]: /images/20220721/ceb961fc257c4c98b36beee610ba298e.png
[6. FlexieJS]: http://flexiejs.com/
[6.jpg]: /images/20220721/b66478d9bc0e4434a34fe1e62cc091ba.png
[1. HTML5 Boilerplate]: http://html5boilerplate.com/
[7.jpg]: /images/20220721/8d91d713383c40579657695664a0fb44.png
[2. Switch to HTML5]: http://switchtohtml5.com/
[8.jpg]: /images/20220721/967b16e3bcca42fb828fc2bd16d410ac.png
[3. Initializr]: http://www.initializr.com/
[9.jpg]: /images/20220721/fff8ed86ce9845d0acc4615089c98d55.png
[4. HTML5 Visual]: http://woorkup.com/2009/12/16/html5-visual-cheat-sheet-reloaded/
[10.jpg]: /images/20220721/1a0338d0734d4ad5b7bdd2f84e0e9f50.png
[5. HTML5 Canvas]: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
[11.jpg]: /images/20220721/3e1e90f5d06c475bac3592a65013266f.png
[6. HTML5]: http://adactio.com/extras/pocketbooks/html5/
[12.jpg]: /images/20220721/ba76454efe1b40c5ab350411c8e5dec3.png
[HTML5 4]: http://html5.org/tools/web-apps-tracker
[HTML5Gallery]: http://html5gallery.com/