html5论文讲述.doc

 PAGE \* MERGEFORMAT 9 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里面可以接收到这个信息： { var data = event.data; / /接收到的信息赋值给data close(); //关闭线程 } 4 离线应用程序 在web应用中使用本地缓存的原因之一是为了支持离线应用，所谓的离线应用，是指当浏览器无法上网时，web应用可以继续使用，而不影响正常的工作生活。这里需要强调，本地缓存和浏览器网页缓存是有区别的，本地缓存是对整个web应用程序服务的，而浏览器网页缓存只服务于单个的网页，并且任何网页都可以进行浏览器网页缓存，而本地缓存只缓存那些你指定缓存的网页。 创建HTML5离线应用步骤如下： （1） 创建离线清单（manifest）