html5新特性的研究 毕业设计文档 阮梁华.docx

1、html5新特性的研究 毕业设计文档 阮梁华黎明职业大学毕 业 设 计题目： HTML5新特性的研究系 别 计算机与信息工程系 专 业 计算机网络技术 届 别 2009 学 号 0905090113 姓 名 阮梁华 指导教师 吴迪 填写日期 年 月 日一、【引言】 3二、【HTML5简介】 32.1、HTML5介绍 32.2、HTML5的发展史 4三、HTML5和HTML4的区别 43.1、新增加了一些全新的表单输入对象 53.2、全新的更合理的标签 53.3、本地存储 5四、HTML5的新特性 54.1、表单增强 54.2、video标记 74.3、audio 标记 84.4、canvas

2、标记 94.5、让内容可编辑 124.6、简单快速的实现拖放控制 134.7、WEB数据存储 134.8、离线数据存储 134.9、更多 14五、HTML 5未来的发展趋势 145.1、web浏览器的性能堪与iPhone媲美 145.2、越来越多的应用开发将基于HTML 5 145.3、浏览器IE 10“王者归来”，大幅提升HTML 5性能 145.4、浏览器厂商将涉猎应用商店业务 145.5、至少有一个基于WebGL技术的重量级游戏发布 155.6、越来越多的应用将使用离线缓存，支持脱机工作 155.7、HTML 5广告将逐渐取代Flash广告 155.8、越来越多的人将通过移动设备玩简单的

3、HTML 5游戏 155.9、Facebook将推出基于HTML 5的API，无缝整合第三方网站 165.10、苹果的移动浏览器Safari仍将拒绝HTML 5声音功能 16六、【总结】 16七、【参考文献】 16八、【致谢】 17一、【引言】随着开发者对HTML5的不断改进，更新，以及当今用户的潮流思想，HTML5技术已成为了一种潮流。HTML5不断的应用在我们周围促手可及的环境中。2012年，HTML 5将会增加对更多实用API的支持，让网站彼此连接。例如，Facebook上运行在iframe标签中的Zynga游戏，通过使用新的 postMessage API，将可以直接在Facebook

4、框架内进行通信。而在HTML 5之前，窗口内的通信必须依赖远程服务器，或许借助让人爱恨交加的黑客。 除API外，HTML 5还将新增跨域资源共享(Cross-Origin Resource Sharing，即CORS)，这将有助于实现不同网站之间的信息共享。例如，通过CORS，初创企业可以为用户提供照片编辑服务，从Facebook上 下载照片、编辑修改、重新上传。 由于HTML 5中许多新的语义信息，开发从web页面中提取信息的web工具将变得十分容易。我们将看到越来越多的糅合（mashup）服务，以及越来越好的浏览器模式（如阅读器和翻译工具）。我们知道传统网页设计主要依靠的就是HTML技术，

5、进行代码的编写，不断的运行，改进，从而运行出成功的页面，随着科学技术的改进，人们对于视觉效果的要求越开越严格，换言之，对于科学技术开发者来说，传统的技术已经不能够满足人们的需求。所以不断的发展，才是未来科学技术的发现。至此一场声势浩大的变革正在进行，那就是向新一代HTML标准的过渡。伴随着移动互联网的风生水起，HTML5的发展会进一步增强对移动设备的支持，加速改变人们使用内容的方式。一场“以Web为中心”的转变将带来难以想像的影响。二、【HTML5简介】2.1、HTML5介绍 HTML5是什么？要回答这个问题，我们需要了解一下HTML是什么。HTML的英文全名为（Hyper Text Mark

6、up Language ）。即超文本标记语言。HTML5是HTML5的一个新版本。HTML5不是一种编程语言。而是一种标记语言（markup language），HTML5 是 W3C 与 WHATWG 合作的结果。简单的来说HTML5是能够让用户看到更加顺畅的视觉画面，听到更加美妙的音频效果，更加方面的操作网页的一项不断改进的新技术。以下是我们传统的用html其他版本的一些标记： 文档类型声明 代码声明 .文件起止标记 .头部文件 .文档内容部分 .分层标记 .标题字体标记 .加粗 .斜字体 .划线 .段落标记 .换行 .画线 .文本居中 .无序2.2、HTML5的发展史为了更好的了解HTM

7、L5下面就让我们看下HTML5的发展史： 前身是Web Applications 1.0，于2004年由WHATWG(Web Hypertext Application Technology Working Group。2004年由Opera、Mozilla基金会和苹果等浏览器厂商组成)提出； 2007年获W3C接纳，并成立了新的HTML工作团队； 2008年1月22日，第一份正式草案发布； HTML5的标准草案已进入W3C制定标准5大程序的第1步，预期2012年推出建议候选版（W3C Candidate Recommendation）。三、HTML5和HTML4的区别我们所熟悉和了解的HTM

8、L4.0，它是基于SGML（standard Generalized markup language）规则手册的。3.1、新增加了一些全新的表单输入对象 包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。3.2、全新的更合理的标签多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。3.3、本

9、地存储这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。四、HTML5的新特性 HTML5 中的一些有趣的新特性： 用于媒介回放的 video 和 audio 元素 用于绘画的 canvas 元素 对本地离线存储的更好的支持 新的特殊内容元素，比如 article、footer、header、nav、section 新的表单控件，比如 calendar、date、time、email、url、search4.1、表单增强4.1.1、新的属性 formaction - 重写表单的 action 属性 for

10、menctype - 重写表单的 enctype 属性 formmethod - 重写表单的 method 属 formnovalidate - 重写表单的 novalidate 属性 formtarget - 重写表单的 target 属性 规定必须在提交之前填写输入域（即不能为空） 规定在页面加载时，域自动地获得焦点 规定用于验证input域的正则表达式 规定输入域的 datalist 规定 form 或 input 域应该拥有自动完成功能 提供一种提示（hint） 规定输入域所属的一个或多个表单 required autofocs pattern list autocomplete Pl

11、aceholder form 4.1.2、新的input 类型 color email date month week time datetime datetime-local number range search tel url 颜色选择 邮件地址校验 年月日选择 月日选择 年周选择 时间（小时和分钟）选择 UTC年月日时间选择 本地年月日时间选择 数字选择并校验 包含在一定范围内的数字值选择，显示为滑动条 用于搜索域，比如站点搜索或google搜索等 电话校验 网址URL校验4.1.3、新的标签： 本地视频播放 音频 用于绘画 定义输入域的选项列表 密钥生成器 用于不同类型的输出，比如计

12、算或脚本输出 定义度量衡 定义运行中的进度或进程 video audio canvas 4.2、video标记4.2.1.定义和用法： 视频格式 标签定义视频，比如电影片段或其他视频流。直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。以前浏览器不能直接播放视频，所以需要用插件，比如wmp、real player、flash。而wmp、real player不能跨平台、跨浏览器，flash有时候会导致浏览器卡、崩溃。当前，video 元素支持三种视频格式： 格式IEFirefoxOperaChrome

13、SafariOggNo3.5+10.5+5.0+NoMPEG 49.0+No No5.0+3.0+WebMNo4.0+10.6+6.0+No 表格 1Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebMD 文件HTML5 规定了一种通过 video 元素来包含视频的标准方法实例分析1：（1）、海洋之魂file:/C:/Users/RLH/Desktop/%E6%AF%95%E4%B8%9A%E8%AE%BE%

14、E8%AE%A1%E4%BD%9C%E4%B8%9A/htnl5%E7%BD%91%E7%AB%99%E4%BB%A3%E7%A0%81/%E8%A7%86%E9%A2%91/%E9%B1%BC%E7%BE%A4/video-js/demo.html 实例分析2（2）、视频爆炸 4.3、audio 标记4.3.1、定义和用法 音频格式 标签定义声音，比如音乐或其他音频流。当前，audio 元素支持三种音频格式： 如需在HTML5中播放音频，您所有需要的是： 实例分析：（1）艾薇儿4.4、canvas 标记4.4.1、定义和用法：画布格式 标签定义图形，比如图表和其他图像。 HTML5 的 ca

15、nvas 元素使用JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法属性实例分析（1） 画图（通过不同色的水晶小球画出图形） （2）、在网页上画图 （3）、在网页上画图（通过鼠标的移动会画出不同的线条）打开以下网页（火狐，Ie9等浏览器） 点击鼠标 开始随意绘图网页演示为毕业答辩文件目录下的：自己实现的canvas标签网页.html（自己运行出来的网页）以下是参考代码：/html类型的文档/html头部文件在先画图 阮梁华/定义文档标题您的浏览器不支持canvas!/主要canvas标签/代码

16、声明function Draw(arg) if (arg.nodeType) /节点类型this.canvas = arg; else if (typeof arg = string) this.canvas = document.getElementById(arg); else return;this.init();Draw.prototype = init: function() var that = this;if (!this.canvas.getContext) return;this.context = this.canvas.getContext(2d);this.canvas

17、.onselectstart = function () return false; /修复chrome下光标样式的问题;this.canvas.onmousedown = function(event) /按下鼠标that.drawBegin(event); /画画开始;,drawBegin: function(e) var that = this,stage_info = this.canvas.getBoundingClientRect();/得到边界客户端矩形window.getSelection ? window.getSelection().removeAllRanges() :/

18、 获得选择?删除所有范围document.selection.empty(); /清除文本的选中this.context.moveTo(e.clientX - stage_info.left,e.clientY - stage_info.top);document.onmousemove = function(event) /按下鼠标that.drawing(event);/绘图;document.onmouseup = this.drawEnd;/鼠标向上,绘图结束,drawing: function(e) var stage_info = this.canvas.getBoundingCl

19、ientRect();/得到边界客户端矩形this.context.lineTo(/线e.clientX - stage_info.left,/线也跟着移动e.clientY - stage_info.top);this.context.stroke();,drawEnd: function() document.onmousemove = document.onmouseup = null;var draw = new Draw(the_stage);0905090113 阮梁华 打开网页后，鼠标点击矩形区域内开始绘图 如不能显示效果，请按Ctrl+F5刷新主要实现的功能很简单，原理其实和拖

20、放是类似的，主要是三个事件： 1. 在canvas 上绑定mousedown 事件以标志绘画的开始(调用moveTo 移动画笔)2. 在document 上绑定mousemove 事件来处理绘画时的行为(调用lineTo 以及stroke 进行绘画)3. 在document 上绑定mouseup 事件以标志绘画的结束(解绑document 上的两个事件)注：在Dreamweaver cs4上运行代码4.5、让内容可编辑 该属性仅仅允许用户编辑、删除、插入内容，而并不会自动提供其他类似于所见即所得编辑器的保存或应用样式的功能，需要自己用Javascript来添加这些功能4.6、简单快速的实现拖放

21、控制图片和超链接默认是可拖放的。对于所有的元素，HTML5引进了一个新的属性“draggable”，这将用来设置元素是否接受拖放；下列事件对应HTML5的拖放： dragstart,drag,dragenter,dragover,dragleave,drop和dragend。当你要fire掉事件的时候，将需要写 function(事件处理器)来处理你需要的，也可能需要给元素绑定事件或做事件指派来简化你的代码； 拖放事件还让你可以通过被拖放元素来传递数据，使用事件属性“dataTransfer” 的 getData 和 setData 方法。 可以在不同的浏览器或程序中进行拖放。 4.7、WEB

22、数据存储Web 存储规范提供了与 HTTP session cookies 相似的稳健的Web存储属性。他们是“sessionStorage” 和“localStorage”：1、sessionStorage 用以存储浏览最顶层环境生存周期内的数据。例如浏览器Tab 的或窗口持续打开周期内的数据。2、localStorage 用以存储周期较长、多页面，以及多浏览器session的内数据。甚至持续到你重起浏览器或者电脑4.8、离线数据存储 HTML5规范还定义了当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。你可以通过提供一个manifest文件来定义哪些文件需要被缓存，哪些需要在离

23、线的时候有折衷方案替代。当用户访问这个页面，支持的浏览器将会猎取一个manifest版本。它将下载并缓存所有的涉及到的文件，并且当manifest相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件。通常该特性用于创建网页离线版应用程序。4.9、更多postMessage实现跨文档跨域的消息传输facebook中已经采用该特性实现web实时消息传递webSocket代表Web通信的下一个演变：通过一个单一的Socket实现一个全双工，双向通信的信道。HTML 5 Web Socket提供了一个真正的标准，你可以使用它构建可扩展的实时Web应用程序。此外，由于它提供了一个浏览器自带的

24、套接字，Web Socket显著降低了系统开销和复杂性。geolocation用于获取浏览器所处地理位置相关信息 五、HTML 5未来的发展趋势5.1、web浏览器的性能堪与iPhone媲美 2012年，web浏览器将开始支持通知推送、地理定位以及离线运行应用程序。部分浏览器很可能会采用类似iOS风格的用户界面，性能堪与iPhone媲美。5.2、越来越多的应用开发将基于HTML 5 现在很多用户使用web应用发送电子邮件和分享图片等，但到2012年，越来越多的应用将支持HTML 5，届时，用户将看到大量类似Inkscape和Illustrator的HTML 5内容创作应用。5.3、浏览器IE

25、10“王者归来”，大幅提升HTML 5性能 微软已投入巨资提升HTML 5性能，IE 10发布之际便是真正的“王者归来”之时。届时，IE将成为运行最快的浏览器，引领整个浏览器大潮。获得IE浏览器较好的支持也将成为开发HTML 5应用的动力。5.4、浏览器厂商将涉猎应用商店业务 据悉，面对应用商店这块大蛋糕，浏览器厂商们已经开始蠢蠢欲动，而Google Chrome浏览器已经推出了自己的应用商店，很多其他的浏览器厂商很可能会纷纷效仿。其实，这对HTML 5应用开发者来说，是一个好消息，意味着更多的销售机会，而这些平台具体的支付系统和收入分成也将接踵而至。5.5、至少有一个基于WebGL技术的重量

26、级游戏发布 2012年，至少有一个AAA游戏公司会推出基于WebGL技术的3D游戏，或者是发布已有知名游戏的更新版本，如Team Fortress 2 或 Assassins Creed。5.6、越来越多的应用将使用离线缓存，支持脱机工作 离线应用缓存将极大地提升HTML 5应用的可用性和速度。通过查询本地数据库避免应用与服务器之间的往返通信，消除web应用的时延缺陷。5.7、HTML 5广告将逐渐取代Flash广告 那些热衷于把来自iOS设备庞大流量货币化的网站站主们将诉诸于HTML 5广告。同时，越来越多的初创企业也将进军这个新兴市场，解决必将会面对的安全、创作工具等问题。既然HTML 5

27、具备了Flash广告几乎所有的效果，以及部分Flash广告没有的效果，HTML 5广告取代Flash广告是迟早的事。5.8、越来越多的人将通过移动设备玩简单的HTML 5游戏 2012年，可能会经常看到人们在自己的移动设备上玩各种简单的HTML 5游戏，如Zynga Poker、Words with Friends和Mafia Wars等，这些游戏即可在目的网站，也可在本地应用上运行。不过，移动设备上成功的HTML 5游戏将仅限于以下几种：菜单类、纸牌类、棋盘类、回合制多人游戏，以及头像定制游戏，而像Zynga “Ville”这种复杂、视觉密集型的游戏在2012年的发展空间可能不是很大。5.9

28、、Facebook将推出基于HTML 5的API，无缝整合第三方网站 2012年，一直致力于成为真正的web社交图谱的Facebook将充分利用各项新的HTML 5功能，开放基于HTML 5的API，更好地整合外部第三方网站和服务。5.10、苹果的移动浏览器Safari仍将拒绝HTML 5声音功能 早在iOS 3版本中，Safari就已兼容HTML 5的声音功能，但鉴于它给iTunes带来的竞争，苹果公司在iOS 4和iOS 5中禁用了绝大多数API。为保持对苹果生态系统的绝对控制，2012年苹果公司仍将不会启用HTML 5声音功能。六、【总结】 HTML5极大的解放了Web开发人员的工作量； HTML5能提高富互联网应用程序的开发效率； 由于浏览器支持程度并不一致，可以预见的是HTML5在互联网站上的普及还需要