html5论文

HTML5的研究综述

马升强

摘要：2014年10月,HTML5的标准正式发布,距离发布时间已经有一年的时间,这一年多来出现了许多的HTML5开发的应用，同时也由于对HTML5不了解或者是由于浏览器兼容性等问题，让开发人员困惑要不要学习或者要不要使用HTML5做网站开发呢？本文将对html5的特性,html5标签的浏览器兼容性,html5和xhtml的对比,以期通过介绍让大家对HTML5有个全面的认识,同时为广大的编程人员学习和使用提供帮助。

关键字：HTML5 新特性兼容性

一 HTML5的特性

HTML5是面向应用的，较之前的版本增加了许多新的功能，让网站的网页更加丰富多彩。下面我们就从以下6个方面展开HTML5特性的论述：

1 绘图功能交互

HTML之前的版本中没有绘图功能，而HTML5新增了canvas标签，这样HTML5有了绘图功能。这个标签提供了好比Photoshop中的画布，而Photoshop中的各种画笔、笔刷、渐变等功能，则通过canvas标签提供的JavaScript API来提供，canvas提供的绘图功能不仅能够绘制图片，而且还可以通过setInterval等函数制作动画效果，进一步的通过JavaScript获取用户的行为，如鼠标点击等，制作游戏效果。在移动端，Flash已经停止对移动端的开发，所以在绘制图片、制作动画方面，HTML5的绘图功能将会更加的大放异彩。下面的图为canvas画布下绘制的图片：

图1：:canvas绘图效果

2 离线存储

为了更好的支持web应用在本地存储数据的需求，HTML5更加了Web Storage功能，通过sessionStorage和localStorage两个对象来实现对web中数据的存储。较之前也能保存在客户端的cookie来说，Web Storage更有优势，cookie的大小被限制在4kb，而sessionStorage 和localStorage则可以存储5MB大小，甚至更大（不同的浏览器有差别），cookie通过http 事务一起发送的，增加了带宽，而sessionStorage和localStorage则直接保存在客户端就好了，无需占用带宽。下面为localStorage的示例代码：

var data=new Object();

https://www.wendangku.net/doc/a210380205.html,=document.getElementById(…name?).value;

var str=JSON.stringify(data);

localStorage.setItem(https://www.wendangku.net/doc/a210380205.html,,str);

alert(“数据已保存！”)；

HTML5甚至增加了支持SQLLite的文件类型的SQL数据库，让用户的数据直接保存在本地的数据库中，进一步的减轻了服务器的负担和用户的流量，但是目前这一功能浏览器支持度不够高。

3 Web Worker多线程处理

Web Worker是在HTML5中新增的、用来在Web应用程序中实现后台处理的一项技术。使用这个JavaScript API，开发人员可以很容易的创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间处理交给后台去处理，对用户在前台页面中执行的操作就完全没有影响了，让用户的体验更加流畅。HTML5创建后台线程的方式很简单，而且可以实现线程的嵌套和多个子线程之间的通信。下面的代码展示了线程的创建和接收的机制：

var worker = new Worker("work.js"); /在HTML文档中创建线程

worker.postMessage("hallo world"); //发起一个消息给线程

onmessage = function(event) //在work.js里面可以接收到这个信息：

{

var data = event.data; / /接收到的信息赋值给data

close(); //关闭线程

}

4 离线应用程序

在web应用中使用本地缓存的原因之一是为了支持离线应用，所谓的离线应用，是指当浏览器无法上网时，web应用可以继续使用，而不影响正常的工作生活。这里需要强调，本地缓存和浏览器网页缓存是有区别的，本地缓存是对整个web应用程序服务的，而浏览器网页缓存只服务于单个的网页，并且任何网页都可以进行浏览器网页缓存，而本地缓存只缓存那些你指定缓存的网页。

创建HTML5离线应用步骤如下：

（1）创建离线清单（manifest）

创建一个minifest格式的文件，在里面说明哪些资源需要离线缓存，哪些资源需要在线访问，如设置一个demo.manifest文件，代码如下：

CREATE MANIFEST

#需要离线缓存的文件

CACHE:

other.js

jQuery.js

#必须连接服务器在线访问的文件

NETWORK

ex.php

aaa.php

（2）配置服务器

在服务器中增加Mine类型，如需要在Apache服务器中的mine.types文件中添加如下内容：text/cache-manifest manifest

（3）获取manifest清单

需要在离线缓存的网页中指定manifest属性的manifest文件的URL地址：

5 获取地理位置信息

在HTML5中，为navigator对象增加了一个geolocation属性，可以使用geolocation API 来获取当前的位置，以下示例用来获取当前位置的经度和维度：

navigator.geolocation.getCurrentPosition(

function(position)

{

document.write(“经度：”+https://www.wendangku.net/doc/a210380205.html,titude+”维度：” +position.coords.longititude);

});

进一步的，在获取位置的经度纬度后，可以通过百度地图API来获取当前位置的周边的商铺信息、街道信息等，下图为获取南京师范大学周边的饭店等信息，由于代码繁杂，就不在这里做演示。

图2：当前位置的经度纬度

图3：当前位置的周边信息

6 文件读取与拖放

在HTML5中，从web网页上访问本地文件系统变得十分的简单。HTML5提供了File API 接口，通过这个接口，我们可以很容易的获取文件的信息，如文件的类型、文件的大小等等，例如：

var file;

file=document.getElementById(“file”).files[0]; //得到用户上传选择的第一个文件alert(“上传文件的类型：”+file.type+“上传文件的大小：”+file.size);

同时可以通过FileReader来创建对象，从而能够读取上传文件的内容。

HTML5同时支持文件的拖拽功能，可以把元素的属性设置为draggable，通过拖放操作的API实现网页元素甚至是外部文档的任意拖拽，很方便的实现了网页的拖拽布局与外部文档的上传处理。

二 HTML5的浏览器兼容性

HTML5新增了一些标签,通过测试这些新增标签的浏览器兼容性,我们能够知道哪些标签浏览器能够支持,哪些标签浏览器不支持,当我们知道了浏览器的兼容性后,我们就能够根据特定的浏览器做兼容性处理,接下来我们从以下几个方面对浏览器的兼容性进行测试.

1 HTML5 Web 应用程序

HTML5 为支持Web 应用程序开发新增了包括本地存储、离线存储、地理定位、Workers 和WebSockets 等特性,从图中我们可以看出,Chrome浏览器的对这方面的支持性最好，它乎支持全部特特性,因为WebSQL Database 已经被W3C 放弃了，所以浏览器不支持也没关系，

在中国用户量最大的IE浏览器,从IE6到IE9开始逐步支持HTML5的这方面的特性,相信在以后的版本里IE浏览器对HTML5的支持度会逐步增加。

图4 web应用程序的浏览器兼容性

2 HTML5 图形和内嵌内容

HTML5的画图功能是较HTML其他的版本的一个亮点，内置了Canvas，Audio，Video，SVG、WebGL 和SMIL 等重要特性对象。从图中我们可以看出Chrome、Firefox、Safari、Opera 以及IE9/IE10 都支持这些图形功能,这让开发HTML5人员无需在为某个浏览器单独写代码,大大的缩减了开发工作。

图5 图形和内嵌内容浏览器兼容性

3 HTML5 音频编码

通过对音频编码识别能力的测试，我们可以看出，Chrome 依然表现出色，对 HTML5 音频格式又是全部支持，Safari 除Ogg Vorbis 格式外也都全部支持。而令人不解的是IE竟不支持自己的wav格式,在写HTML5代码的时候应该注意这点。

图6 HTML5 音频编码浏览器兼容性

4 HTML

5 视频编码

对 HTML5 视频的支持最好的还是Chrome，又是全部支持。Firefox 和Opera仅支持Ogg V orbis 和WebM 两种视频格式，不支持H.264，相反的IE9/，IE10 和Safari 只支持H.264。目前 80%的视频使用H.264 编码，期待H.264 早日统一的视频编码标准，让更多的浏览器实现对它的支持。

图7 视频编码浏览器兼容性

5 HTML5 表单输入

HTML5 新增了很多新的input 类型，例如datetime、range、color 等等，以前这些都是需要使用JavaScript 才能实现的功能，如今只需要设置input 类型就能实现。有点让人惊奇的是，Opera 对其全部支持，而一直表现良好的Chrome ，还不支持DateTime 类型，其它的都支持，IE10 和Safari 都相当程度的支持，而Firefox支持的标签相对较少，这方面还需努力。

图8 表单输入浏览器兼容性

6 HTML5 表单属性

HTML5 表单属性也是对表单功能的重要改进，简化了Web 应用开发。在Mac 平台，除了Safari 还不支持List 属性外，其它属性都支持。在Windows 平台，Chrome、Opera 和IE10 全部支持，与表单相对应，Firefox在支持表单属性方面也很显不足，甚至不如IE10，

Min、Max 和Step 属性都还不支持。

图9 表单属性浏览器兼容性

综上分析，对 HTML5 支持最好的是Chrome，而中国用户量较大的IE10 已经能和Safari、Firefox、Opera 旗鼓相当了。概括来说，各大浏览器对HTML5 的支持正在不断完善，越来越多的企业和开发者也在尝试在项目中使用 HTML5 ，特别是在移动互联网领域，已经有很多优秀的应用开发出来。另外，在进行调试HTML5的程序时，笔者建议使用Chrome浏览器，它对标签的支持度最好，使我们不会产生不是代码错误而是浏览器不支持的苦恼，对于不支持的标签，笔者建议可以通过浏览器类型检测然后使用JavaScript等代码进行弥补。

三 HTML5与XHTML的对比

1 在文档类型声明方面

xhtml的文档声明需要以下代码：

1.0Transitional//EN""https://www.wendangku.net/doc/a210380205.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">，

而html5只需要以下简单的代码，由这两者对比可见：在文档声明上，xhtml有很长的一段代码，并且很难记住，而html5却是不同，只有简简单单的声明，很方便人们的记忆和书写。

2 在结构语义方面

html:没有体现结构语义化的标签，我们通常都是这样