HTML5-下一代Web开发技术

李国华

（中国科技开发院广西分院，广西 南宁 530022）

HTML5-下一代Web开发技术

李国华

（中国科技开发院广西分院，广西 南宁 530022）

HTML5被认为是互联网行业冉冉升起的新星，它受到了各大浏览器厂商的支持。文章简要的描述了HTML5的相关概念，并阐述了HTML5在绘制图形、多媒体播放、本地存储、离线Web应用程序、获取地理信息等方面的应用。

HTML5；移动应用

1 背景

1.1HTML5的相关概念

（1）World Wide Web

World Wide Web（下文简称Web），中文名称万维网，是信息资源的网络。Web的广泛应用，依赖于三个核心机制。

①URI：一个统一的命名规范，用于定位Web中的资源；

②HTTP：用于访问Web资源的网络协议；

③HTML：用于描述资源和应用，以及在资源直接导航的超文本标记语言。

（2）URI

Web中每一个可用的资源，都可以使用 Universal Resource Identifier（统一资源标识符，简称URI）来标识。通常，URI由以下三部分构成：

①用于访问资源的机制；

②存放资源的主机；

③资源在主机中的路径名。

例如，以下的URI

http://www.w3.org/TR

所标识的资源，访问机制是 http协议，主机为www.w3.org，资源的访问路径是/TR。

（3）HTML5

2014年 10月 28日，万维网联盟（World Wide Web Consortium，W3C）发布了 HTML5的正式推荐标准（W3C Recommendation）。HTML5是超文本标记语言第5版，在这个版本中，增加了很多的新特性和新元素，而且重新定义了清晰的规则，使得Web应用开发更加规范和友好，大大扩展了Web开发者的能力，减轻了他们的负担。

HTML5带来了许多新的用户体验。使用HTML5开发的网页可以自然的支持音频和视频，不需要安装额外的插件。支持画布功能，可以在其上进行图像绘制。可以使用数学标记语言描述数学公式，可以使用轻量级的矢量图，可以定位用户的地理位置，支持服务端推送消息，等等。

1.2HTML5出现的背景

（1）WEB标准的瓶颈

以前的改进都是基于现有的Web页面标记模型，偏重于技术上的变革，本质上却对应用本身贡献甚微。HTML不仅仅是一个文档，HTML需要关注应用本身，需要实用化的技术。

（2）云计算的趋势

过去，浏览器只负责网页基本内容、格式的渲染和基础脚本的执行，其他应用由第三方插件或者专门的软件来完成。网络技术发展的大势所趋是瘦客户端与云计算的组合，浏览器能力要更强大。

1.3HTML5出现的意义

（1）更加关注web应用

新元素的引入都是基于编写实践，并且“改善交互能力”成为了重点关注的领域。

（2）设备无关性

HTML并不假定一定会是一个 PC上的浏览器来展现页面，开发的应用不需要考虑不同操作系统的差别，设备无关的交互体验特性可以让移动终端获得更好的可用性。

（3）更低的成本

使得页面变得更小，减少了用户不必要的支出。而且，性能更好使耗电量更低。

（4）WEB文档的结构

借助HTML5的语义标签，可以实现更具结构化，语义化的 Web 文档。

（5）更好的安全性

不需要额外的插件支持，安全性可以统一给予保证。

2 html5的主要特性分析

2.1视频

HTML5出现之前，如果需要在网页上播放视频，通常是安装额外的浏览器插件，比如Flash。但是，这是各个浏览器厂商和播放器厂商的自发行为，并没有一个标准来规范如何在网页上使用视频。因此，不同的浏览器存在各种各样差异和兼容性问题，给开发者和用户造成了很多的困扰。

HTML5改变了这种情形。HTML5提供了

（1）Ogg–一种强大的容器格式，HTML5支持Theora编码的视频；

（2）MPEG4-HTML5支持H.264编码的视频；

（3）WebM-HTML5支持VP8编码的视频。

就像操作网页上的其他元素一样，HTML5中的Javascript脚本能够通过DOM（文档对象模型）操作

2.2音频

音频和视频类似，HTML5之前人们通过浏览器插件播放和控制音频，不同厂商和版本的浏览器对音频支持差异很大，导致播放音频的网页常常不能在各浏览器间通用，开发人员要针对不同浏览器开发不同的网页版本，代价巨大。插件的安装增加了用户的困扰，加上操作系统和防护软件的限制，常常导致用户无法正常访问播放音频的网页。

HTML5提供

（1）Ogg Vorbis；

（2）MP3；

（3）Wav。

2.3拖放

拖放是一种很常用的界面模式，使用鼠标点击并按住界面上的某个对象，移动鼠标到另一个区域并松开，则界面对象被拖动到该区域。在HTML5未出现之前，使用Javascript也能够实现拖放的效果，但是实现起来非常繁琐易出错，而且存在浏览器兼容性问题。幸运的是，在HTML5中，已经规定了拖放的标准API，可以适用于任何元素。只要简单的处理拖放事件，开发人员就可以产生并控制拖放的效果。

2.4画布

HTML5出现以前，如果想要开发动画应用，是一件很困难很复杂的事情，通常需要花费大量时间学习第三方的动画制作框架。HTML5画布(Canvas)功能解救了广大的动画开发人员，Web程序员可以使用画布API，通过Javascript制作各种动画效果。

HTML5定义了一个元素，在网页中引入该元素，可以建立一张画布，在上面随意绘制各种各样的形状，插入自定义的图片，还能够制作复杂的2D/3D动画。对于一般的动画应用，完全可以使用标准的HTML5画布技术，替代第三方的动画制作框架，例如Flash。

2.5SVG

SVG是可伸缩矢量图形 (Scalable Vector Graphics)的缩写，是一种矢量图格式。HTML5提供对SVG的支持。使用SVG有很多优势。SVG格式使用XML定义，是文本格式，意味着可以使用普通的文本编辑器来创建和修改 SVG矢量图。SVG矢量图的体积小，可被搜索和索引，还可以进一步压缩。作为矢量图，具备随意放大图形同时保持图形质量不会下降。HTML5提供了

2.6地理定位

HTML5 定义了Geolocation（地理定位）的API，可以编程获取用户的地理位置，从而可以调用第三方的地图服务在地图中展示。可以想象，这项技术能够催生许多有价值的应用，例如，显示用户周围的商家或其他用户关注的信息，GPS导航，等等。

2.7客户端存储

没有HTML5的时代，一般情况下使用cookie来存储客户端的数据。然而cookie有许多限制，也不适合较大数据量的存储。而且cookie在请求页面的时候会传回服务器，导致效率不高。

HTML5提供了另外两种客户端存储技术：

（1）localStorage–这种存储没有时间的限制；

（2）sessionStorage–这是用于会话的数据存储。

HTML5提供的客户端存储，并不会每次传回服务器，仅在需要的时候使用，大大提高了效率，从而可以在客户端存储大量数据，并且不影响网站的性能。这些存储是区分不同站点的，而且具有权限控制，不同的网站只能访问自身的数据。

2.8Web Worker

Web worker提供了后台运行JavaScript的能力。HTML5之前，javascript只能在UI线程运行，很容易阻塞UI线程，导致界面没有响应。使用Web worker，可以将耗时的任务放在后台线程运行，不影响UI线程，从而保持页面的及时响应，带给用户更好更快的UI体验。

2.9服务器推送事件

从前的Web是单向的，即只能由客户端发起请求，才能获取服务器的信息。如果希望及时获取服务器的更新，只能够频繁不断地轮询服务器，消耗大量的CPU和网络资源，导致性能的地下。

HTML5提供了 Server-Sent 事件，网页自动获取来自服务器的更新。这项技术的应用也很广泛，例如，微博更新即时推送、新的博文、新闻推送等。

2.10更丰富的、具有语义的标签

HTML5的标签更适合由浏览器提供最适合设备或平台的展现，更便于搜索引擎理解文档。

3 HTML5的移动应用

3.1移动应用

HTML5适用于移动APP/SITE的开发，有如下特点：

（1）渲染更快速；

（2）离线程序，适用于各种移动使用场景；

（3）可以在多种平台的设备上运行；

（4）使用HTML5

（5）IPhone、iPad等对HTML5的支持很好，使用html5的网站能够提供更佳体验。

3.2实例

（1）实例一：http://everytimezone.com/ 一个ipad移动应用的效果演示。

特点：

①未使用图片、js，简洁实现效果；

②gzip压缩后大小仅有几K；

③触发条件不仅限于触摸 event--这样非触摸的终端也可以使用了。

（2）实例二：http://www.technetra.com/ipdc3/ countdown-2.0/ 不停走动的倒计时器—会记住你的选择。

图1　不停走动的倒计时器

（3）实例三：http://mrdoob.com/projects/harmony/终端上实现素描效果。

图2　终端上实现的素描效果

（4）实例四：http://www.kesiev.com/akihabara/ 吃豆游戏iPhone版。

图3　吃豆游戏

完全把html5当客户端用，对未来手机应用（游戏）的开发应用有重要意义。

（5）实例五：Gmail for iPad。

特点：

①当用户通过iPad设备访问Gmail邮箱的时候，该网站的一些优化功能更将会自行启动，其外观呈两列排布，视图光滑。易用性较好，在应用界面的左侧是邮件的标题清单，详细的邮件内容则位于界面的右侧；

②离线预读，方便移动场景下的使用；

③支持附件的双向拖拽；

④对速度的提升：“Chrome+HTML5实现一秒钟启动Gmail”。

[1] Kevin Purdy.How HTML5 Will Change the Way You Use the Web[J].IEEE Journal,2009,56(3):113-114.

HTML5-the next generation of Web development technology

HTML5 is considered the rising star in the Internet industry. It was supported by many browser vendors. This article briefly describes the HTML5 related concepts, and describes the application in HTML5 rendering graphics, multimedia playback, local storage, offline Web applications, access to geographic information, etc.

Mobile;applications

TP393.092

A

1008-1151(2015)07-0020-03

2015-06-11

李国华（1982－），女，广西南宁人，中国科技开发院广西分院助理工程师，研究方向为计算机软件测试，电子商务交易系统。