html5论文.doc

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） 创建一个minifest格式的文件，在里面说明哪些资源需要离线缓存，哪些资源需要在线访问，如设置一个demo.manifest文件，代码如下： CREATE MANIFEST#需要离线缓存的文件CACHE: other.jsjQuery.js#必须连接服务器在线访问的文件NETWORKex.phpaaa.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(“经度：”+position.coords.latitude+”维度：” +position.coords.longititude););进一步的，在获取位置的经度纬度后，可以通过百度地图API来获取当前位置的周边的商铺信息、街道信息等，下图为获取南京师范大学周边的饭店等信息，由于代码繁杂，就不在这里做演示。图2：当前位置的经度纬度图3：当前位置的周边信息6 文件读取与拖放在HTML5中，从web网页上访问本地文件系统变得十分的简单。HTML5提供了File API接口，通过这个接口，我们可以很容易的获取文件的信息，如文件的类型、文件的大小等等，例如：var file;file=document.getElementById(“file”).files0; /得到用户上传选择的第一个文件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 HTML5 视频编码对HTML5视频的支持最好的还是 Chrome，又是全部支持。Firefox 和 Opera仅支持 Ogg Vorbis 和 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的文档声明需要以下代码：，而html5只需要以下简单的代码，由这两者对比可见：在文档声明上，xhtml有很长的一段代码，并且很难记住，而html5却是不同，只有简简单单的声明，很方便人们的记忆和书写。2 在结构语义方面html:没有体现结构语义化的标签，我们通常都是这样.来表示网站的头部。而html5，在语义上有很大的优势。提供了一些新的标签，比如:、。这些新增的标签，能够更加清楚的说明标签内容的在文档中的地位与作用，这样一个结构良好的HTML文件能够更加容易被搜索引擎搜索到，同时，在商业网站进行SEO优化时，使用HTML5无疑提供了巨大的便利，它能够让搜索引擎更加容易的搜索到这个网站，网站也就拥有了更好的排名，所以说，HTML5的新增的结构化标签是让HTML文档的结构更加清晰，也让网站更加容易被搜索引擎搜索到。 3 多媒体播放方面在xhtml中插入多媒体必须使用和,而且还要为这两个元素添加许多属性和参数，使的代码冗长而笨拙，而且需要使用第三方插件Flash，如果用户没有安装Flash，则无法播放，的代码使用如下： 而在HTML5中，插入多媒体只需要和两个标签即可，代码量变少，很重要的是无需客户安装Flash插件。而且提供了许多JavaScript API，方便开发时控制视频的播放，让视频播放更加的随心所欲。标签的使用示例如下：你的浏览器不支持video标签 4 在表单方面 HTML5对 表单的标签进行了大量修改，添加了很多新的属性。如placeholder属性，实例代码如下：能够提示用户在搜搜框中的内容。在XHTML的input的type类型较少，而HTML5的type类型增添了很多，如email、tel、mumber、range、date等类型，这些类型能够更好的控制用户输入，同时也让用户明白应该输入什么内容。示例代码如下： /要求用户输入email地址与此同时，表单中增加了验证的功能，如使用required属性，检测用户输入内容，当用户输入内容为空时，则无法提交内容。示例代码如下：/要求用户名必须输入5 在修改标签方面 HTML5修改了一些XHTML中的一些标签，让HTML5更加符合当前的web开发应用的现状。如改良了了dl标签，让dl标签的使用更加的明确，规范，示例代码如下： 计算机 用来计算的仪器 显示器 以视觉方式显示信息的装置 对cite标签加以严格限制，只能表示作品，而不能够包括任何作者名；对small标签则进行了重新的定义。从仅是一个表现性的元素，变成了表示免则、警告、版权等附属细则的语义元素。这些标签的修改让开发人员能够更加明确的使用这些标签，能够更符合开发的规范。6 删除标签方面 HTML5在新增了很多功能性标签的同时，HTML5也删除了一些以前XHTML或者是HTML中有的已有的标签,一些标签的删除是因为可以用CSS来替代，如、等标签，一些标签是因为失去了使用的价值，很多编程人员已经不再使用了，如、等标签。这些标签的删除，更加有利于HTML文档的内容和布局分离，让HTML只负责文档内容，而布局排版使用CSS就好了。 XHTML和HTML5的差别还体现在HTML5的一些特性上，如绘图功能、离线存储等，这些特性体现在标签上，也是XHTML所没有的，因为前面HTML5特性中做过介绍，此处就不在赘述。结论:HTML5作为刚刚发布的新的标准,虽然很多标签的浏览器的兼容性并不是那么的好,但是其很多新的特性，对开发web应用有很重要的价值和推动作用。在移动端,尤其是随着安卓手机的普及,越来越多的网站都开始用HTML5标签书写,对于已经完成的网站,很多也逐步向HTML5标签的过渡,所以对于广大的学习者尤其是编程人员,不应困惑于浏览器兼容性，随着时间的向前发展，相信会有越来越多的浏览器支持HTML5，要应加强对HTML5的学习,以便满足不断变化的社会需求。参考文献1.W3CSchool. HTML5教程EB/OL. /html5/index.asp.2.效果惊艳的HTML5动画应用. PHP100EB/OL. /html/it/focus/2014/1110/7758.html#0-tsina-1-71640-397232819ff9a47a7b7e80a40613cfe1.3.杜仁栋. HTML5多线程EB/OL. /durendong/article/details/7542766#0-tsina-1-49153-397232819ff9a47a7b7e80a40613cfe1.4.百度地图. 百度地图APIEB/OL. /map/.5.黑色的咖啡. Canvas中beginPath的重要性EB/OL. /jearbilove/article/details/38340141#0-tsina-1-80377-397232819ff9a47a7b7e80a40613cfe1.6.