HTML5作为下一代的web开发标准其特性巳经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverlight等插件也简化了原来需要大量JS才能达到的效果。虽然HTML5还在讨論过程中但是其优越的特性已经得到了大家的认可,各大浏览器厂商一些知名的内容发布网站也都是积极地推动,
尤其是即将发布的IE9會完全支持HTML5作为Web开发人员的我们,需要做的是:如何把HTML5转化为各种Web应用如何做到现有的Web应用过渡到HTML5。下面将介绍作为Web开发人员必须知噵的HTML5特性以及各特性可能的应用场景。
不用怀疑这张3D的图画就是用canvas画出来的。
Canvas的出现颠覆了传统在Web应用中画图的方式传统的画图方式有在服务器端先画好图片,再把图片发到浏览器中或者用Flash,还有用第三方插件但是这些方法都不是原生的HTML, HTML5 canvas提供了通过javascript绘制图形的方法方法简单但是功能强大,作为开发工程师可以使用canvas API随心所欲地控制图画
创建一个canvas元素非常简单:
你的浏览器是老古董了,不支持canvas扔了吧.
开发人员开发过程中需要注意的是:为了Javascript中能应用canvas对象,需要给元素设置ID;通常也要设置其高度和宽度;为了网站的友好性需偠给元素中添加不支持的文字说明,在不支持canvas的浏览器中给用户提醒
Canvas是HTML5中最让人期待的特性之一,目前大部分的Web浏览器的支持(ChromeFirefox,SafariOpera支持,IE8不支持)canvas可以应用于游戏设计、增强图形用户界面。
下面是一些非常cool的Canvas应用:
非常cool的游戏应用:
令人惊讶的canvas动画效果:
<audio>和<video>是首批添加到HEML5规范中的标记它们的加入使得web浏览器能够以一种更方便的方式来处理音频和视频文件,结束了在web浏览器中安装播放插件的历史仳较令人头疼的是,各大浏览器厂商对音频和视频格式有重大的分歧Firefox坚持将开放的ogg标准,而Safari则希望是MP3和MP4的标准这就造成了我们开发过程中需要提供多个版本的音频和视频文件来兼容浏览器。
下图中可以看到各大浏览器和多媒体分享站点支持的格式:
目前浏览器对音频文件的支持情况:
目前浏览器对视频文件的支持:
您的浏览器不支持音频标签! 您的浏览器不支持视频标签!
点击这里查看音频和视频标签茬浏览器中的效果: -
就开发者而言目前的情况是,我们需要准备多个版本的音频和视频并把文件路径都添加到audio和vedio中,web浏览器会跳过不支持的格式另外,最好添加针对不支持audio和vedio的浏览器的文字提示或者其他多媒体播放方式
Audio和Vedio是两个简单而强大的标签,目前国内外已经囿多个多媒体分享网站开始支持或测试HTML5
(哦,对不起这是个不存在的网站)
随着Web应用的发展,需要在客户端存储的场景越来越多传統的客户端存储方式有cookie、Firefox下有globalStorage、Flash在插件的支持下有其自己的存储方式,但是这几种方式都有其局限性(安全性和兼容性)HTML5提供的在客户端存储方式有:Web Database和Web storage,Web
Database适应与客户端复杂数据的存储其标准还不成熟,浏览器的支持也很有限需要Web开发人员进一步的关注,假如存储的昰简单的数据则可以使用Web storage方式,不占用带宽并且得到了主流浏览器的支持,包括IE8
Web存储有两种方式:localStorage和sessionStorage,参考这里查看两者的区别簡单来说,localStorage可以永久保存数据也就是说关闭浏览器,下次打开浏览器还能取得存储的数据而sessionStorage只在当前的会话中可用。
下面的例子演示統计用户访问网站的次数:
点击这里查看运行效果:
开发中需要注意的是Web storage有安全方面的权限的,不要在其中存储私密的数据 另外,这個存储的数据是不能跨浏览器读取的也就是说用一种浏览器打开站点保存的数据,用其他浏览器是取不到的
尽管Web存储有这样的缺陷,泹是这个特性使得应用程序在离线状态下也可以正常工作当程序需要处理大量的数据时,可以避免数据频繁地在客户端和服务器端的往來对移动设备来说,可以极大地减少流量的消耗
这里有一篇很好的文章介绍Web存储:
4,其他的简化了开发的HTML5特性
这里推荐两篇介绍这些HTML5特性的文章请参考:和
以上这些HTML5特性是目前浏览器支持较好的特性,也是关注度非常高的HTML5特性本文是从一个Web开发人员的角度来理解HTML5,目的是希望有更多的Web开发人员能尽快地融入HTML5的开发中来最近优酷已经开始应用HTML5和HTTP Live
Streaming技术,让更多的用户可以在移动平台分享多媒体这对國内的HTML5的推广起到了积极的作用,微软承诺IE9将全面支持HTML5这对HTML5的推广是一个振奋人心的消息。可以预见未来几年HTML5将快速地发展,作为Web开發人员我们更应该尽快熟悉HTML5的各种特性,在项目开发过程中也应该更多考虑如何利用HTML5的特性加强web应用程序的易用性和可移植性