html5论文Word文档下载推荐.docx

1、localStorage.setItem（data.name,str）;alert（“数据已保存！”）；HTML5甚至增加了支持SQLLite的文件类型的SQL数据库，让用户的数据直接保存在本地的数据库中，进一步的减轻了服务器的负担和用户的流量，但是目前这一功能浏览器支持度不够高。3 Web Worker多线程处理Web Worker是在HTML5中新增的、用来在Web应用程序中实现后台处理的一项技术。使用这个JavaScript API，开发人员可以很容易的创建在后台运行的线程（在HTML5中称为worker），如果将可能耗费较长时间处理交给后台去处理，对用户在前台页面中执行的操作就完全没有

2、影响了，让用户的体验更加流畅。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应用中使用本地缓存的原因之一是为了支持

3、离线应用，所谓的离线应用，是指当浏览器无法上网时，web应用可以继续使用，而不影响正常的工作生活。这里需要强调，本地缓存和浏览器网页缓存是有区别的，本地缓存是对整个web应用程序服务的，而浏览器网页缓存只服务于单个的网页，并且任何网页都可以进行浏览器网页缓存，而本地缓存只缓存那些你指定缓存的网页。创建HTML5离线应用步骤如下： （1） 创建离线清单（manifest） 创建一个minifest格式的文件，在里面说明哪些资源需要离线缓存，哪些资源需要在线访问，如设置一个demo.manifest文件，代码如下： CREATE MANIFEST#需要离线缓存的文件CACHE:other.jsjQ

4、uery.js#必须连接服务器在线访问的文件NETWORKex.phpaaa.php （2）配置服务器在服务器中增加Mine类型，如需要在Apache服务器中的mine.types文件中添加如下内容：text/cache-manifest manifest （3） 获取manifest清单需要在离线缓存的网页中指定manifest属性的manifest文件的URL地址：/html5 获取地理位置信息在HTML5中，为navigator对象增加了一个geolocation属性，可以使用geolocation API 来获取当前的位置，以下示例用来获取当前位置的经度和维度：navigator.ge

5、olocation.getCurrentPosition（function（position）document.write（“经度：”+position.coords.latitude+”维度：” +position.coords.longititude）;）;进一步的，在获取位置的经度纬度后，可以通过XX地图API来获取当前位置的周边的商铺信息、街道信息等，下图为获取南京师范大学周边的饭店等信息，由于代码繁杂，就不在这里做演示。图2：当前位置的经度纬度图3：当前位置的周边信息6 文件读取与拖放在HTML5中，从web网页上访问本地文件系统变得十分的简单。HTML5提供了File API接口，

6、通过这个接口，我们可以很容易的获取文件的信息，如文件的类型、文件的大小等等，例如：var file;file=document.getElementById（“file”）.files0; /得到用户上传选择的第一个文件alert（“上传文件的类型：”+file.type+“上传文件的大小：”+file.size）;同时可以通过FileReader来创建对象，从而能够读取上传文件的内容。 HTML5同时支持文件的拖拽功能，可以把元素的属性设置为draggable，通过拖放操作的API实现网页元素甚至是外部文档的任意拖拽，很方便的实现了网页的拖拽布局与外部文档的上传处理。二 HTML5的浏览器兼

7、容性HTML5新增了一些标签,通过测试这些新增标签的浏览器兼容性,我们能够知道哪些标签浏览器能够支持,哪些标签浏览器不支持,当我们知道了浏览器的兼容性后,我们就能够根据特定的浏览器做兼容性处理,接下来我们从以下几个方面对浏览器的兼容性进行测试.1 HTML5 Web 应用程序HTML5 为支持 Web 应用程序开发新增了包括本地存储、离线存储、地理定位、Workers 和 WebSockets 等特性,从图中我们可以看出,Chrome浏览器的对这方面的支持性最好，它乎支持全部特特性,因为WebSQL Database 已经被 W3C 放弃了，所以浏览器不支持也没关系，在中国用户量最大的IE浏览

8、器,从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 音频编码通过对音频编码识别能力

9、的测试，我们可以看出，Chrome 依然表现出色，对HTML5音频格式又是全部支持，Safari 除 Ogg Vorbis 格式外也都全部支持。而令人不解的是IE竟不支持自己的wav格式,在写HTML5代码的时候应该注意这点。图6 HTML5 音频编码浏览器兼容性4 HTML5 视频编码对视频的支持最好的还是 Chrome，又是全部支持。Firefox 和 Opera仅支持 Ogg Vorbis 和 WebM 两种视频格式，不支持 H.264，相反的 IE9/，IE10 和 Safari 只支持 H.264。目前80%的视频使用 H.264 编码，期待 H.264 早日统一的视频编码标准，让更

10、多的浏览器实现对它的支持。图7 视频编码浏览器兼容性5 HTML5 表单输入新增了很多新的 input 类型，例如 datetime、range、color 等等，以前这些都是需要使用 JavaScript 才能实现的功能，如今只需要设置 input 类型就能实现。有点让人惊奇的是，Opera 对其全部支持，而一直表现良好的Chrome ，还不支持 DateTime 类型，其它的都支持，IE10 和 Safari 都相当程度的支持，而 Firefox支持的标签相对较少，这方面还需努力。图8 表单输入浏览器兼容性6 HTML5 表单属性表单属性也是对表单功能的重要改进，简化了 Web 应用开发。

11、在 Mac 平台，除了 Safari 还不支持 List 属性外，其它属性都支持。在 Windows 平台，Chrome、Opera 和 IE10 全部支持，与表单相对应，Firefox在支持表单属性方面也很显不足，甚至不如 IE10，Min、Max 和 Step 属性都还不支持。图9 表单属性浏览器兼容性综上分析，对支持最好的是 Chrome，而中国用户量较大的IE10 已经能和 Safari、Firefox、Opera 旗鼓相当了。概括来说，各大浏览器对 HTML5 的支持正在不断完善，越来越多的企业和开发者也在尝试在项目中使用，特别是在移动互联网领域，已经有很多优秀的应用开发出来。另外，

12、在进行调试HTML5的程序时，笔者建议使用Chrome浏览器，它对标签的支持度最好，使我们不会产生不是代码错误而是浏览器不支持的苦恼，对于不支持的标签，笔者建议可以通过浏览器类型检测然后使用JavaScript等代码进行弥补。三 HTML5与XHTML的对比1 在文档类型声明方面xhtml的文档声明需要以下代码：!DOCTYPE html PUBLIC -/W3C/DTD XHTML1.0Transitional/ENhttp:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd，而html5只需要以下简单的代码，由这两者对比可见：在文档声明上，x

13、html有很长的一段代码，并且很难记住，而html5却是不同，只有简简单单的声明，很方便人们的记忆和书写。2 在结构语义方面html:没有体现结构语义化的标签，我们通常都是这样.来表示网站的头部。而html5，在语义上有很大的优势。提供了一些新的标签，比如:header、menuasidesectionarticlefigurefooter。这些新增的标签，能够更加清楚的说明标签内容的在文档中的地位与作用，这样一个结构良好的HTML文件能够更加容易被搜索引擎搜索到，同时，在商业网站进行SEO优化时，使用HTML5无疑提供了巨大的便利，它能够让搜索引擎更加容易的搜索到这个网站，网站也就拥有了更好

14、的排名，所以说，HTML5的新增的结构化标签是让HTML文档的结构更加清晰，也让网站更加容易被搜索引擎搜索到。 3 多媒体播放方面在xhtml中插入多媒体必须使用和,而且还要为这两个元素添加许多属性和参数，使的代码冗长而笨拙，而且需要使用第三方插件Flash，如果用户没有安装Flash，则无法播放，的代码使用如下：object classid=clsid:F08DF954-8592-11D1-B16A-00C0F0283628 id=Slider1width=100 height=50 MousePointer0EnabledMinMax10/object而在HTML5中，插入多媒体只需要au

15、dio两个标签即可，代码量变少，很重要的是无需客户安装Flash插件。而且提供了许多JavaScript API，方便开发时控制视频的播放，让视频播放更加的随心所欲。标签的使用示例如下：video width=”300” height=”300” controls=”controls” src=”abc.mp4”你的浏览器不支持video标签/video 4 在表单方面 HTML5对 表单的标签进行了大量修改，添加了很多新的属性。如placeholder属性，实例代码如下：input type=”search” placeholder=”请输入要搜素的产品” /能够提示用户在搜搜框中的内容。在

16、XHTML的input的type类型较少，而HTML5的type类型增添了很多，如email、tel、mumber、range、date等类型，这些类型能够更好的控制用户输入，同时也让用户明白应该输入什么内容。示例代码如下：input type=”email” value=”email” / /要求用户输入email地址与此同时，表单中增加了验证的功能，如使用required属性，检测用户输入内容，当用户输入内容为空时，则无法提交内容。input type=”usrname” value=”username” /要求用户名必须输入5 在修改标签方面 HTML5修改了一些XHTML中的一些标签，

17、让HTML5更加符合当前的web开发应用的现状。如改良了了dl标签，让dl标签的使用更加的明确，规范，示例代码如下：dl 计算机dd用来计算的仪器显示器以视觉方式显示信息的装置对cite标签加以严格限制，只能表示作品，而不能够包括任何作者名；对small标签则进行了重新的定义。从仅是一个表现性的元素，变成了表示免则、警告、版权等附属细则的语义元素。这些标签的修改让开发人员能够更加明确的使用这些标签，能够更符合开发的规范。6 删除标签方面 HTML5在新增了很多功能性标签的同时，HTML5也删除了一些以前XHTML或者是HTML中有的已有的标签,一些标签的删除是因为可以用CSS来替代，如font

18、等标签，一些标签是因为失去了使用的价值，很多编程人员已经不再使用了，如centerbig等标签。这些标签的删除，更加有利于HTML文档的内容和布局分离，让HTML只负责文档内容，而布局排版使用CSS就好了。 XHTML和HTML5的差别还体现在HTML5的一些特性上，如绘图功能、离线存储等，这些特性体现在标签上，也是XHTML所没有的，因为前面HTML5特性中做过介绍，此处就不在赘述。结论:HTML5作为刚刚发布的新的标准,虽然很多标签的浏览器的兼容性并不是那么的好,但是其很多新的特性，对开发web应用有很重要的价值和推动作用。在移动端,尤其是随着安卓手机的普及,越来越多的网站都开始用HTML

19、5标签书写,对于已经完成的网站,很多也逐步向HTML5标签的过渡,所以对于广大的学习者尤其是编程人员,不应困惑于浏览器兼容性，随着时间的向前发展，相信会有越来越多的浏览器支持HTML5，要应加强对HTML5的学习,以便满足不断变化的社会需求。参考文献1.W3CSchool. HTML5教程EB/OL. 2.效果惊艳的HTML5动画应用. PHP100EB/OL. 3.杜仁栋. HTML5多线程EB/OL. 4.XX地图. XX地图APIEB/OL. 5.黑色的咖啡. Canvas中beginPath的重要性EB/OL. 6.刘欣，王雨竹.（2013年）HTML5入门经典（第一版）.北京：机械工

20、业出版社Research Summary of HTML5（School of Educational Science, Nanjing Normal University, Nanjing, 210097, China）Html5s standard has already published in 2014 year 10th, Mamy softwares has been made using html5. As well, Many programmers are confused in many problems ,like weather they should learn ht

21、ml5 or not ,and weather they use html5 making webseite or not for the browers compatibility aod little knowledge at html5. The passage will talk aboult html5s property ,browers compatibility,and conpare html5 and xhtml in order to make well understand of html5.At the sanme time,the passage provide the help of the use and study of html5 for the programmer.Key words:HTML5,new property, compatibility