html5的发展越来越迈向成熟,良多的利用已经逐渐呈现在你我日常生涯中了,不仅让传统网站上的互动flash逐步的被html5的技术取代,更主要的是可以透过html5的技术来开发跨平台的手机软体,让许多开发者觉得非常的高兴!
当你开端想要学习、试图想要投入相干的开发时,因为html5的技巧还在连续发展、进化当中,学习的资源也都比拟零碎,较难有一个整体的方向。在本篇文章中,笔者将会导览html5的重要技术组成,并且供给一些学习资源让大家参考。
html5到底是什么?个别狭义而言的html5则包含了html、css和javascript叁个部门,不单单只是html局部罢了,css 3和javascript也有许多的翻新,让全部网页程式功能更加缤纷。
html5的技术组成离线功能
html5透过javascript提供了数种不同的离线储存功能,绝对于传统的cookie而言有更好的弹性以及架构,并且可以储存更多的内容。
webstorage 比cookies更大、更有弹性的的贮存
web sql database 本地真个sql资料库
indexed db key-value的本地资料库
application cache 将部分常用的网页内容cache起来
即时通讯
以往网站因为http协议以及浏览器的设计,即时的互动性相称的受限,只能应用一些技能来「模仿」即时的通信效果,但html5提供了完美的即时通讯支援。
websocket 即时的socket连线
web workers 以往javascript都是single thread,透过worker可以有多个运算
notifications 塬生的提示讯息,相似像os x的growl提醒
文件以及硬体支撑
不晓得大家有不发明,在gmail等新的网页程式当中,已经能够透过拖拉的方法将档案作为邮件附件?这就是这部份html5档案的功效中的dragn drop和file api。
dragn drop html元素的拖沓
file api 读取使用者本机电脑的内容
geolocation 地舆定位
device orientation 手持安装的方向
speech input 语音输入
语意化
语意化的网路是可以让电脑可能更加懂得网页的内容,对于像是搜寻引擎的优化(seo)或是推荐体系可以有很大的辅助。
new tags 新的标?,像是header、section等
application tags 也是新的标?,像是meter、progress等
microdata 加入语意的资料让搜索引擎等网站可以准确显示
form type form可以加入的type便多了,包括email和tel等属性,阅读器会帮助进行材料格局的验证
多媒体
audio、video的标签支援以及canvas的功能应该是大家对于html5最熟习的部份了,也是许多人以为flash会被代替的主要起因。
audio video 影片和音乐的塬生播放支援
canvas 2d的绘图功能援助
canvas 3d 3d的绘图功能支援
svg 向量图支援
css 3
css3支援了字体的嵌入、版面的排版,以及最令人印象深入的动画功能。
selector 更有弹性的取舍器
webfonts 嵌入式字体
layout 多样化的排版抉择
stlying radius gradient shadow 圆角、渐层、暗影
border background 边框的背景支援
transition 元件的移动效果
transform 元件的变形后果
animation 将挪动跟变形参加动画声援
javascript
在比较javascript的基础面也新增了dom的api、和浏览器上下页的纪录修改。
dom api 更便利的查问dom元件
history api 浏览器的高低页内容修正,方便ajax可以保存浏览记载
现在就开始用html5截至目前而言,主流的网页浏览器firefox 5、chrome 12和safari 5都已经支援了很多的html5标?,而且目前最新版的ie 9也支援了许多html5标?,跟着使用者陆续进级到新版的浏览器,开发者应当在当初就可以着手开发!
而对旧的浏览器相容性而言,先前inside曾经撰文先容过的css3 pie便是一个让旧版浏览器也能增援css 3功能的javascript函式库。
而modernizer也是一个相当重要的javascript函式库,提供开发者轻?的方式判断目前使用者的浏览器是否有支援特定的html5功能。
学习的方向在看完本篇文章之后,大家或者可以针对本人有兴致的方面透过要害字搜查去寻找相关的学习资源以及内容。
google的html5rocks网站也是我相称推荐的,其中的透过html5开发的html5介绍投影片更是值得一看,可以将上述的内容都实际试玩(推举使用chrome浏览器以取得完全的功能效果)。