HTML5特性概览
什么是HTML5
如何定义
狭义地讲,它是HTML4的升级版,但是它比HTML4增加了许多东西。以下关于HTML5的描述,摘自《HTML5设计原理》一文。
HTML5的“范围”
某些称呼常常被挂在嘴边:“HTML5技术”,“HTML5开发”,“某某产品HTML5版本”。
就像通讯协议2G,3G标准一样,HTML5技术内容来自各个浏览器厂商提供的成熟技术,其中一些已经被使用了多年(比如IE5,6里面的某些事实标准)。还有很多“HTML5技术”是各种存在已久工业标准往Web上面照搬(或者是子集),比如MathML(用于描述数学公式,以后做课件会很方便),HTML5内容之庞大不是几句话就可以说的清的,现在它还在不停地增长。
Javascript与HTML5的关系
JS是一门脚本语言,它可以作为某种特定软件环境的嵌入式开发语言,JS本身并不具备IO能力,所以JS本身不能进行网络通讯、界面绘制。但是,当JS嵌入到浏览器中的时候,浏览器提供了BOM和DOM两套API,前者负责与浏览器交互,后者则提供HTML&CSS排版引擎的接口给JS使用。HTML5标准增强了BOM和DOM两套API的能力,使得基于浏览器环境的开发变得更加“险恶”……更加多样化。
有人说HTML5就是Javascript,大致也没错,因为目前在浏览器端没有一种开发语言与JS竞争(IE支持VBScript,Chrome近期会支持Dart语言),所以浏览器端的程序开发一般就是指Javascript开发。
除了浏览器,JavaScript还有其它的宿主环境,比如NodeJs,NodeJs为JS提供了访问网络以及文件系统的能力,所以开发人员可以在这个环境中进行服务端的Web开发。
此外,浏览器本身也是一个可内嵌的组件,它也可以嵌入到其它程序环境中作应用层的开发,比如前网易游戏开发主管云风的博客中就曾透露,早期的西游系列网游就用了不少浏览器界面嵌入到游戏中,以降低开发成本(主要做游戏中交互菜单的部分)。当然,这种混合型的应用无处不在,我们日常生活中使用的大量桌面软件都是这种模式,比如腾讯QQ、360安全卫士等,QQ中的聊天窗口右侧部分、以及聊天记录窗口等都使用了浏览器组件。
这种形式的应用同样也存在于手机端。PhoneGap就是这样一种解决方案,它封装了手机端的底层数据、设备的访问能力给浏览器控件使用,好处是跨平台。
将浏览器插件嵌入到其它程序开发有一个好处,就是不用考虑浏览器内核,像windows 桌面,浏览器内核一般也就IE6和IE7两种(不随桌面IE版本升级)。而像Q+这种平台,则是强制使用webkit浏览器内核,这样开发者可以使用最新的HTML5特性。
以上重点要说的是,JS+HTML的开发,主要还是看宿主端能力的强弱,而传统的泛所有浏览器的通用应用开发,则必须照顾表现力最差的浏览器,开发和测试都会增加较大的成本。
HTML5浪潮带来的事情
在浏览器"军备竞赛"中,JavaScript的性能被提升了几十倍,得益于各种编译引擎的优化。HTML开发应用场景大量增加,一些小的硬件厂商不需要提供复杂的平台SDK,他们可以从webkit开源项目中获得很大的帮助。
HTML5 API
html5每一个“特性”都是一套API,无法用“是否支持某属性”这样臆断浏览器对HTML5的支持,因为还有许许多多的细节。
多媒体类
Canvas —— 2D绘图API
应用场景:游戏,地图,应用服务展示层
浏览器向来是文档型界面的天下(HTML),而绘图API的引入则把Web界面引入另外一个世界。Canvas是参考其它绘图引擎设计的一套API,只提供一些常用的绘图接口(当然,如后可能变成接口竞赛)。
开发者可以用Canvas做任何表现层可以做的事情:动画引擎、交互界面等等,你可以制作一款Canvas版的PhoneShop,或者制作一款游戏引擎,更别说使用Canvas来制作彩信、设计名片这种小菜一碟了。不过要开发游戏,你离不开音频处理,要开发一款图形处理软件,你还得依赖一些对数据处理的API,所以说要做成一件事情,光单独的HTML5的某项技术是不够的。
支持平台&浏览器:
PC平台:IE9.0+,以及其它主流浏览器;
移动平台:iOS、Android、WP7等,以及其它基于webkit开源项目的第三方浏览器;
各浏览器的Canvas API支持程度:略。
当然,各个浏览器的支持程度以及性能也是不一样的,它是一套API,而不是简单的几个能力接口,光讲Canvas的内容,已经可以出一本书了。
Video ——视频处理API
应用场景:视频播放,视频处理应用
视频播放,主要的工作还是把你的视频文件编码成用户浏览器支持的格式。因为视频编码本身涉及到很大的利益链(专利、授权),种种原因造成众多浏览器支持的视频编码格式不一致,所以你的服务器存储成本必须成倍增加(至少准备3种视频格式),也得准备大量的运算能力去编码这些视频。而至于前端的播放器设计,则只是用户体验上的设计罢了。当然,如果你以为
支持平台&浏览器:
PC平台:IE9.0+,以及其它主流浏览器
移动平台:iOS、Android、WP7等。
各浏览器支持视频编码:略。
各浏览器的API支持程度:略。
Audio ——音频播放API
应用场景:音乐播放器、游戏、乐器软件以及其它所有需要音效的地方
除了借助插件或者一些特定的浏览器接口,以前的网页是无法播放声音的,而今
一些浏览器支持的最新的Audio Data API则更加强大,它让发声不再依赖音频文件(或者数据流),开发人员只要在网页上写一串字符,就能让浏览器发出某种声音,就像可以用RGB数字表示颜色一样,你可以用一个数字表示一个44kHz频率的声响。所以,你开发一个网页版的弹吉他软件甚至不需要准备任何音频文件。
支持平台&浏览器:
PC平台:IE9.0+,以及其它主流浏览器。
移动平台:iOS、Android、WP7等。
各浏览器支持视频编码:略。
各浏览器的API支持程度:略。
WebGL —— 3D绘图API
标记语言
SVG ——可扩展矢量图形
应用场景:可编程图形场景,图表、机械、工业设计。
SVG是一种使用xml来表示矢量图形的web解决方案,W3C早在2000年的时候就已经制定了标准,后来经过一部分的修改重新定义后纳入HTML5标准。在web上,SVG可以作为一种替代像素图片开发网页图标(缩放后不会出现锯齿),由于是xml文本的形式,它可以嵌入到页面中,也可以以单独文件的形式存在,有极高的压缩比。在应用上,矢量图形有更好的先天优势,文档性质使它具有可编程性,脚本程序可以随时变更SVG图形中的元素,所以一些如制作图表、设计工业图形开发上具有良好的体验。SVG拥有滤镜等特性,在某些场景上可以替代Canvas和CSS3做一些界面美化工作。
支持平台&浏览器:
PC平台:IE9.0+以及其它主流浏览器
移动平台:iOS,Android,WP7
MathML ——数学公式标记语言
应用场景:科教应用。
MathML是一种用xml标示数学公式的一套标记应用,早在10几年前就被制定,后来纳入HTML5标准,以前只有一些专门的科教类软件使用,现在浏览器也可以解析和显示了。表示以下公式的MathML是:
以上的XML比较复杂,一般是由程序生成的,以XML的形式方便在多个软件之间交换解析,当然你也可以编写一个浏览器版的数学软件。
支持平台&浏览器:
PC平台:IE10+以及其它主流浏览器
移动平台:iOS5.0+
通讯能力
XmlHttpRequest升级
应用场景:无刷新的HTTP协议通讯,提高产品体验
浏览器的XHR对象是AJAX开发的基石,它是开创Web2.0时代的一个技术。简单地讲,XHR是以不刷新网页的形式构造http请求,向服务端提交数据,以及获得服务端返回的报文的对象封装。以前XHR只能传输UTF8编码的文本类型的数据,HTML5的时代给它扩展更丰富的能力:跨站点访问能力、文件上传能力、多类型返回报文(以前的xml&纯文本增加到支持二进制、html文档、JSON)
支持平台&浏览器(大部分支持不完整):
PC平台:IE9+,Chrome,Firefox,Safari,Opera
移动平台:iOS,Android
WebSocket
应用场景:网络游戏,即时通讯,推送业务。
Socket都懂吧?不解释。一个重量级的支持。
支持平台&浏览器(大部分支持不完整):
PC平台:IE10+,以及其它主流浏览器
移动平台:iOS,Android
安全措施
Cross-domain messaging——跨域的页面(iframe)通讯
应用场景:融合通讯,第三方应用整合
浏览器的“沙箱”机制设计,无论是cookie、脚本调用还是本地存储的数据,都是以域名为基础隔离的,禁止不同域的程序相互引用,所以整合来自不同域名站点之间的应用一直是个麻烦事。Google很多产品拥有自己的域名,如https://www.360docs.net/doc/007857216.html,和https://www.360docs.net/doc/007857216.html,为了让页面共享数据,前端开发人员使用了postMessage函数让不同的iframe进行通讯,不过这种方案过于复杂,也不能解决所有的问题,后来Google不得不强制启用
https://www.360docs.net/doc/007857216.html,以及https://www.360docs.net/doc/007857216.html,,这样一来也可以统一一套认证系统。
当然,以上是所有产品都是一家公司的情况,当要内嵌的页面属于第三方企业的域名时,这个跨域通讯API还是蛮有意义的。以前来自完全不同的域名的网页插件,必须以
…