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

原创 2015年11月18日 14:40:03

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演示

二、让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的支持问题。 

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)。 



四、在线工具 

此外,还有一些在线工具,可以帮助开发者加快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 速查表 



6. HTML5 笔记 

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

HTML5现在已经成为了Web开发中的热门话题,大多数现代浏览器(Safari、Chrome,Firefox,IE10和移动设备)都支持 HTML5。即使HTML5的规范还没有制定完成,但许多开发者已...
  • xiaojun1288
  • xiaojun1288
  • 2011年10月11日 12:46
  • 530

作为软件开发人员应该知道的问题

鉴于经常看到很多傻傻的问题,比如xx语言干什么用的,xxx语言是不是落伍了?(不过说实在的,这些问题初学者都会有.)  我在这里说说开发人员应该知道的一些东西。但是这些只是我在平日里看到和想到的。难免...
  • zhang_hui4
  • zhang_hui4
  • 2011年03月09日 20:05
  • 121

谈谈我对HTML5+CSS3的理解

HTML5中增加了很多新标签,也改变一些标签的用法。标签更注重语义上的关联性。 新的结构元素有:header,footer,hgroup,article,section,aside,nav等,在使用...
  • qq_16806039
  • qq_16806039
  • 2015年08月12日 15:15
  • 1858

Html5+CSS3基础知识汇总-CSS3篇

今天总结的是CSS3的学习内容,CSS3的简介、CSS3中新增的样式以及新增样式具体属性的实现。...
  • qq_27348951
  • qq_27348951
  • 2016年11月28日 15:26
  • 353

SQL Server 2008中增强的汇总技巧

SQL Server 2008中SQL应用系列--目录索引SQL Server 2008中对汇总有明显的增强,有点像Oracle的语法了。请看下面五个例子:假定场景如下:某几位员工在不同时间参加了不同...
  • downmoon
  • downmoon
  • 2012年04月06日 01:22
  • 9186

android 开发者需要了解的

Android的体系架构鼓励组件重用,允许开发者发布共享Activity、Service并且访问其他应用程序的数据,还可以根据开发者制定的安全限制进行管理。话虽如此,今天我将分享一些关于Android...
  • zhiweiusetc
  • zhiweiusetc
  • 2014年10月17日 23:00
  • 252

开发者需要了解的WebKit

Paul Irish是著名的前端开发工程师,同时他也是Chrome开发者关系团队成员,jQuery团队成员,Modernizr、 Yeoman、CSS3 Please和HTML5 Boilerplat...
  • glt3953
  • glt3953
  • 2013年10月15日 10:57
  • 653

20款不容错过的HTML5工具

HTML5现在已经成为最流行的标记语言,拥有成熟的社区和广泛的浏览器支持,HTML5完备的功能和强大的拓展性使得设计师和开发者可以点铁成金。更多的可控元素,更自由的交互设计,变化随心的动效,丰富生动的...
  • baidu_35738377
  • baidu_35738377
  • 2016年11月17日 09:29
  • 701

开发者需要的10类工具

摘要:作为一个软件开发者,你不可避免地需要用到各种工具来设计、理解、编辑任何程序,本文中按类型总结了10类开发者须知的工具,并各列举了一些知名应用软件。 作为一个软件开发者,你不可避免地需要...
  • labrary
  • labrary
  • 2013年05月13日 21:37
  • 390

MySQL开发者需要了解的12个技巧与窍门

MySQL是世界上实际最流行的数据库管理系统,是遍布全球编程社区的首选。它有一个系列有趣的特性,在很多方面都很擅长。由于其巨大的人气,在网上可以找到许多MySQL的使用技巧。这里有12个最好的技巧和窍...
  • younger_z
  • younger_z
  • 2014年07月05日 10:58
  • 300
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5 开发者需要了解的技巧和工具汇总
举报原因:
原因补充:

(最多只允许输入30个字)