html5论文.docVIP

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(); =document.getElementById(‘name’).value; var str=JSON.stringify(data); localStorage.setItem(,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里面可以接收到这个信息”demo.manifest” /html 5 获取地理位置信息 在HTML5中，为navigator对象增加了一个geolocation属性，可以使用geolocation API 来获取当前的位置，以下示例用来获取当前位置的经度和维度： navigator.geolocation.getCurrentPosition( function(position) { document.write(“经度：”+position.coords.latitude+”维度：” +position.coords.longititude); }); 进一步的，在获取位置的经度纬度后，可以通过百度地图API来获取当前位置的周边的商铺信息、街道信息等，下图为获取南京师范大学周边的饭店等信息，由于代码繁杂，就不在这里做演示。 图2：当前位置的经度纬度 图3：当前位置的周边信息 6 文