html5论文.docx

上传人:b****5 文档编号:6274096 上传时间:2023-01-05 格式:DOCX 页数:12 大小:1.56MB
下载 相关 举报
html5论文.docx_第1页
第1页 / 共12页
html5论文.docx_第2页
第2页 / 共12页
html5论文.docx_第3页
第3页 / 共12页
html5论文.docx_第4页
第4页 / 共12页
html5论文.docx_第5页
第5页 / 共12页
点击查看更多>>
下载资源
资源描述

html5论文.docx

《html5论文.docx》由会员分享,可在线阅读,更多相关《html5论文.docx(12页珍藏版)》请在冰豆网上搜索。

html5论文.docx

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标签提供的JavaScriptAPI来提供,canvas提供的绘图功能不仅能够绘制图片,而且还可以通过setInterval等函数制作动画效果,进一步的通过JavaScript获取用户的行为,如鼠标点击等,制作游戏效果。

在移动端,Flash已经停止对移动端的开发,所以在绘制图片、制作动画方面,HTML5的绘图功能将会更加的大放异彩。

下面的图为canvas画布下绘制的图片:

图1:

:

canvas绘图效果

2离线存储

为了更好的支持web应用在本地存储数据的需求,HTML5更加了WebStorage功能,通过sessionStorage和localStorage两个对象来实现对web中数据的存储。

较之前也能保存在客户端的cookie来说,WebStorage更有优势,cookie的大小被限制在4kb,而sessionStorage和localStorage则可以存储5MB大小,甚至更大(不同的浏览器有差别),cookie通过http事务一起发送的,增加了带宽,而sessionStorage和localStorage则直接保存在客户端就好了,无需占用带宽。

下面为localStorage的示例代码:

vardata=newObject();

data.name=document.getElementById(‘name’).value;

varstr=JSON.stringify(data);

localStorage.setItem(data.name,str);

alert(“数据已保存!

”);

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

3WebWorker多线程处理

WebWorker是在HTML5中新增的、用来在Web应用程序中实现后台处理的一项技术。

使用这个JavaScriptAPI,开发人员可以很容易的创建在后台运行的线程(在HTML5中称为worker),如果将可能耗费较长时间处理交给后台去处理,对用户在前台页面中执行的操作就完全没有影响了,让用户的体验更加流畅。

HTML5创建后台线程的方式很简单,而且可以实现线程的嵌套和多个子线程之间的通信。

下面的代码展示了线程的创建和接收的机制:

varworker=newWorker("work.js");/在HTML文档中创建线程

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

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

{

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

close();//关闭线程

}

4离线应用程序

在web应用中使用本地缓存的原因之一是为了支持离线应用,所谓的离线应用,是指当浏览器无法上网时,web应用可以继续使用,而不影响正常的工作生活。

这里需要强调,本地缓存和浏览器网页缓存是有区别的,本地缓存是对整个web应用程序服务的,而浏览器网页缓存只服务于单个的网页,并且任何网页都可以进行浏览器网页缓存,而本地缓存只缓存那些你指定缓存的网页。

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

(1)创建离线清单(manifest)

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

CREATEMANIFEST

#需要离线缓存的文件

CACHE:

other.js

jQuery.js

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

NETWORK

ex.php

aaa.php

(2)配置服务器

在服务器中增加Mine类型,如需要在Apache服务器中的mine.types文件中添加如下内容:

text/cache-manifestmanifest

(3)获取manifest清单

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

5获取地理位置信息

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

navigator.geolocation.getCurrentPosition(

function(position)

{

document.write(“经度:

”+position.coords.latitude+”维度:

”+position.coords.longititude);

});

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

图2:

当前位置的经度纬度

图3:

当前位置的周边信息

6文件读取与拖放

在HTML5中,从web网页上访问本地文件系统变得十分的简单。

HTML5提供了FileAPI接口,通过这个接口,我们可以很容易的获取文件的信息,如文件的类型、文件的大小等等,

例如:

varfile;

file=document.getElementById(“file”).files[0];//得到用户上传选择的第一个文件

alert(“上传文件的类型:

”+file.type+“上传文件的大小:

”+file.size);

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

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

二HTML5的浏览器兼容性

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

1HTML5Web应用程序

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

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

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

2HTML5图形和内嵌内容

HTML5的画图功能是较HTML其他的版本的一个亮点,内置了Canvas,Audio,Video,SVG、WebGL和SMIL等重要特性对象。

从图中我们可以看出Chrome、Firefox、Safari、Opera以及IE9/IE10都支持这些图形功能,这让开发HTML5人员无需在为某个浏览器单独写代码,大大的缩减了开发工作。

 

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

3HTML5音频编码

通过对音频编码识别能力的测试,我们可以看出,Chrome依然表现出色,对 HTML5 音频格式又是全部支持,Safari除OggVorbis格式外也都全部支持。

而令人不解的是IE竟不支持自己的wav格式,在写HTML5代码的时候应该注意这点。

 

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

4HTML5视频编码

对 HTML5 视频的支持最好的还是Chrome,又是全部支持。

Firefox和Opera仅支持OggVorbis和WebM两种视频格式,不支持H.264,相反的IE9/,IE10和Safari只支持H.264。

目前 80%的视频使用H.264编码,期待H.264早日统一的视频编码标准,让更多的浏览器实现对它的支持。

 

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

5HTML5表单输入

HTML5 新增了很多新的input类型,例如datetime、range、color等等,以前这些都是需要使用JavaScript才能实现的功能,如今只需要设置input类型就能实现。

有点让人惊奇的是,Opera对其全部支持,而一直表现良好的Chrome,还不支持DateTime类型,其它的都支持,IE10和Safari都相当程度的支持,而Firefox支持的标签相对较少,这方面还需努力。

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

6HTML5表单属性

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的文档声明需要以下代码:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML

1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">,

而html5只需要以下简单的代码

doctypehtml>,由这两者对比可见:

在文档声明上,xhtml有很长的一段代码,并且很难记住,而html5却是不同,只有简简单单的声明,很方便人们的记忆和书写。

2在结构语义方面

html:

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

.来表示网站的头部。

而html5,在语义上有很大的优势。

提供了一些新的标签,比如: