百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>建站知识> Web程序员们,你预备好迎接HTML5了吗?
分享文章到:

Web程序员们,你预备好迎接HTML5了吗?

发布时间:06/10 来源:未知 浏览: 关键词:
Web程序员们,你预备好迎接HTML5了吗? HTML5作为下一代的web开发规范,其特性已经渐渐地涌现在主流的阅读器中,这种新的HTML将会让阅读器无须再依赖Flash、 QuickTime、Silverlight等插件,也简化了本来需要大量JS才能达到的结果。虽然HTML5还在计议历程中,但是其优胜的特性已经得到了大家的认可,各大阅读器厂商,一些知名的内容发表网站也都是积极地推进, 尤为是即将发表的IE9会完全支撑HTML5。作为Web开发人员的我们,需要做的是:怎样把HTML5转化为各种Web利用,怎样做到现有的Web利用过渡到HTML5。下面将介绍作为Web开发人员必须晓得的HTML5特性,以及各特性可能的利用场景。
  1, 用Canvas绘制图形
  Canvas的涌现颠覆了传统在Web利用中绘图的方式,传统的绘图方式有在服务器端先画好图片,再把图片发到阅读器中,或者用Flash,还有用第三方插件。但是这些办法都不是原生的HTML, HTML5 canvas供给了通过javascript绘制图形的办法,办法简略但是功能强大,作为开发工程师可以运用canvas API为所欲为地控制图画。
       2,多媒体音频和视频
  <audio>和<video>是首批增加到HEML5标准中的标志。它们的参加使得web阅读器能够以一种更利便的方式来处置音频和视频文件,完毕了在web阅读器中安装播放插件的历史。比拼令人头疼的是,各大阅读器厂商对音频和视频格局有严重的分歧,Firefox坚持将开放的ogg规范,而Safari则但愿是MP3和MP4的规范,这就造成了我们开发历程中需要供给多个版本的音频和视频文件来兼容阅读器。
  当前阅读器对音频文件的支撑状况:
Format IE 8 Firefox 3.6 Opera 10.5 Chrome 5.0 Safari 5.0
Ogg Vorbis No Yes Yes Yes No
MP3 No No No Yes Yes
Wav No Yes Yes No Yes
  当前阅读器对视频文件的支撑:
Format IE 8 Firefox 3.6 Opera 10.5 Chrome 5.0 Safari 5.0
Ogg No Yes Yes Yes No
MPEG 4 No No No Yes Yes
  点击这里查看audio和video的属性:HTML5 Audio   HTML5 Video
  新建audio和vedio元素:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
  您的阅读器不支撑音频标签!
</audio>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
您的阅读器不支撑视频标签!
</video>
  点击这里查看音频和视频标签在阅读器中的结果:Audio - Vedio
  就开发者而言,当前的状况是,我们需要预备多个版本的音频和视频,并把文件途径都增加到audio和vedio中,web阅读器会跳过不支撑的格局,另外,最佳增加针对不支撑audio和vedio的阅读器的文字提醒或者其他多媒体播放方式。
  Audio和Vedio是两个简略而强大的标签,当前国里外已经有多个多媒体分享网站开端支撑或测试HTML5。
  如下是一些HTML5 Vedio体验资源:Video showcase from Apple
  Google 结合 Arcade Fire 推出了一个 HTML5 互动电影: The Wilderness Downtown,点击这里可以进入其在 Chrome Experiment 的页面。
  3,Web存储
  随着Web利用的开展,需要在客户端存储的场景越来越多,传统的客户端存储方式有cookie、Firefox下有globalStorage、Flash在插件的支撑下有其本人的存储方式,但是这几种方式都有其局限性(平安性和兼容性)。HTML5供给的在客户端存储方式有:Web Database和Web storage,Web Database顺应与客户端复杂数据的存储,其规范还不成熟,阅读器的支撑也很有限,需要Web开发人员进一步的关注,假设存储的是简略的数据,则可以运用Web storage方式,不占用带宽,并且得到了主流阅读器的支撑,包括IE8。
  Web存储有两种方式:localStorage和sessionStorage,参考这里查看细致定义,两者的区别简略来说,localStorage可以永恒保留数据,也就是说关闭阅读器,下次打开阅读器还能取得存储的数据,而sessionStorage只在目前的会话中可用。
  4,其他的简化了开发的HTML5特性
一些常用输入类型:Email,url,number,date pickers等
一些规范属性:contenteditable 等
一些input属性:placeholder,required,autofocus,min,max,step,
  这里举荐两篇介绍这些HTML5特性的文章,请参考:你必须晓得的28个HTML5特征、诀窍和技术和给网页设计师的30个HTML5学习资源
  以上这些HTML5特性是当前阅读器支撑较好的特性,也是关注度非常高的HTML5特性,本文是从一个Web开发人员的角度来了解HTML5,目的是但愿有更多的Web开发人员能尽快地融入HTML5的开发中来,最近优酷已经开端利用HTML5和HTTP Live Streaming技术,让更多的会员可以在移动平台分享多媒体,这对国内的HTML5的推行起到了积极的作用,微软承诺IE9将全面支撑HTML5,这对HTML5的推行是一个振奋人心的新闻。可以预感,将来几年HTML5将迅速地开展,作为Web开发人员,我们更应当尽快熟知HTML5的各种特性,在项目开发历程中也应当更多考虑怎样应用HTML5的特性增强web利用程序的易用性和可移植性。
打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有155人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板