html5新特性的研究 毕业设计文档 阮梁华.docx
《html5新特性的研究 毕业设计文档 阮梁华.docx》由会员分享，可在线阅读，更多相关《html5新特性的研究 毕业设计文档 阮梁华.docx（18页珍藏版）》请在冰豆网上搜索。
html5新特性的研究毕业设计文档阮梁华
黎明职业大学
毕业设计
题目：
HTML5新特性的研究
系别计算机与信息工程系
专业计算机网络技术
届别2009
学号0905090113
姓名阮梁华
指导教师吴迪
填写日期年月日
一、【引言】3
二、【HTML5简介】3
2.1、HTML5介绍3
2.2、HTML5的发展史4
三、HTML5和HTML4的区别4
3.1、新增加了一些全新的表单输入对象5
3.2、全新的更合理的标签5
3.3、本地存储5
四、HTML5的新特性5
4.1、表单增强5
4.2、video标记7
4.3、audio标记8
4.4、canvas标记9
4.5、让内容可编辑12
4.6、简单快速的实现拖放控制13
4.7、WEB数据存储13
4.8、离线数据存储13
4.9、更多14
五、HTML5未来的发展趋势14
5.1、web浏览器的性能堪与iPhone媲美14
5.2、越来越多的应用开发将基于HTML514
5.3、浏览器IE10“王者归来”，大幅提升HTML5性能14
5.4、浏览器厂商将涉猎应用商店业务14
5.5、至少有一个基于WebGL技术的重量级游戏发布15
5.6、越来越多的应用将使用离线缓存，支持脱机工作15
5.7、HTML5广告将逐渐取代Flash广告15
5.8、越来越多的人将通过移动设备玩简单的HTML5游戏15
5.9、Facebook将推出基于HTML5的API，无缝整合第三方网站16
5.10、苹果的移动浏览器Safari仍将拒绝HTML5声音功能16
六、【总结】16
七、【参考文献】16
八、【致谢】17
一、【引言】
随着开发者对HTML5的不断改进，更新，以及当今用户的潮流思想，HTML5技术已成为了一种潮流。
HTML5不断的应用在我们周围促手可及的环境中。
2012年，HTML5将会增加对更多实用API的支持，让网站彼此连接。
例如，Facebook上运行在iframe标签中的Zynga游戏，通过使用新的postMessageAPI，将可以直接在Facebook框架内进行通信。
而在HTML5之前，窗口内的通信必须依赖远程服务器，或许借助让人爱恨交加的黑客。
除API外，HTML5还将新增跨域资源共享（Cross-OriginResourceSharing，即CORS），这将有助于实现不同网站之间的信息共享。
例如，通过CORS，初创企业可以为用户提供照片编辑服务，从Facebook上下载照片、编辑修改、重新上传。
由于HTML5中许多新的语义信息，开发从web页面中提取信息的web工具将变得十分容易。
我们将看到越来越多的糅合（mashup）服务，以及越来越好的浏览器模式（如阅读器和翻译工具）。
我们知道传统网页设计主要依靠的就是HTML技术，进行代码的编写，不断的运行，改进，从而运行出成功的页面，随着科学技术的改进，人们对于视觉效果的要求越开越严格，换言之，对于科学技术开发者来说，传统的技术已经不能够满足人们的需求。
所以不断的发展，才是未来科学技术的发现。
至此一场声势浩大的变革正在进行，那就是向新一代HTML标准的过渡。
伴随着移动互联网的风生水起，HTML5的发展会进一步增强对移动设备的支持，加速改变人们使用内容的方式。
一场“以Web为中心”的转变将带来难以想像的影响。
二、【HTML5简介】
2.1、HTML5介绍
HTML5是什么？
要回答这个问题，我们需要了解一下HTML是什么。
HTML的英文全名为（HyperTextMarkupLanguage）。
即超文本标记语言。
HTML5是HTML5的一个新版本。
HTML5不是一种编程语言。
而是一种标记语言（markuplanguage），HTML5是W3C与WHATWG合作的结果。
简单的来说HTML5是能够让用户看到更加顺畅的视觉画面，听到更加美妙的音频效果，更加方面的操作网页的一项不断改进的新技术。
以下是我们传统的用html其他版本的一些标记：
☐
DOCTYPEhtml>文档类型声明
☐代码声明
☐…..文件起止标记
☐
…..头部文件
☐
….文档内容部分
☐
….
分层标记
☐…..标题字体标记
☐….加粗
☐…..斜字体
☐…..划线
☐
…..
段落标记
☐
…..
换行
☐
…..
画线
☐
…..文本居中
☐
无序
……………
2.2、HTML5的发展史
为了更好的了解HTML5下面就让我们看下HTML5的发展史：
⏹前身是WebApplications1.0，于2004年由WHATWG（WebHypertextApplicationTechnologyWorkingGroup。
2004年由Opera、Mozilla基金会和苹果等浏览器厂商组成）提出；
⏹2007年获W3C接纳，并成立了新的HTML工作团队；
⏹2008年1月22日，第一份正式草案发布；
⏹HTML5的标准草案已进入W3C制定标准5大程序的第1步，预期2012年推出建议候选版（W3CCandidateRecommendation）。
三、HTML5和HTML4的区别
我们所熟悉和了解的HTML4.0，它是基于SGML（standardGeneralizedmarkuplanguage）规则手册的。
3.1、新增加了一些全新的表单输入对象
包括日期，URL，Email地址，其它的对象则增加了对非拉丁字符的支持。
HTML5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。
总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。
3.2、全新的更合理的标签
多媒体对象将不再全部绑定在object或embedTag中，而是视频有视频的Tag，音频有音频的Tag。
3.3、本地存储
这个功能将内嵌一个本地的SQL数据库，以加速交互式搜索，缓存以及索引功能。
同时，那些离线Web程序也将因此获益匪浅。
不需要插件的富动画。
四、HTML5的新特性
HTML5中的一些有趣的新特性：
•用于媒介回放的video和audio元素•用于绘画的canvas元素•对本地离线存储的更好的支持•新的特殊内容元素，比如article、footer、header、nav、section•新的表单控件，比如calendar、date、time、email、url、search
4.1、表单增强
4.1.1、新的属性
•formaction-重写表单的action属性
•formenctype-重写表单的enctype属性
•formmethod-重写表单的method属
•formnovalidate-重写表单的novalidate属性
•formtarget-重写表单的target属性
•规定必须在提交之前填写输入域（即不能为空）
•规定在页面加载时，域自动地获得焦点
•规定用于验证input域的正则表达式
•规定输入域的datalist
•规定form或input域应该拥有自动完成功能
•提供一种提示（hint）
•规定输入域所属的一个或多个表单
•required
•autofocs
•pattern
•list
•autocomplete
•Placeholder
•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、新的标签：
•本地视频播放
•音频
•用于绘画
•定义输入域的选项列表
•密钥生成器
•用于不同类型的输出，比如计算或脚本输出
•定义度量衡
•定义运行中的进度或进程
•video
•audio
•canvas
•
•
•
•
•
4.2、video标记
4.2.1.定义和用法：
视频格式
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如Flash）来显示的。
然而，并非所有浏览器都拥有同样的插件。
以前浏览器不能直接播放视频，所以需要用插件，比如wmp、realplayer、flash。
而wmp、realplayer不能跨平台、跨浏览器，flash有时候会导致浏览器卡、崩溃。
当前，video元素支持三种视频格式：
格式
IE
Firefox
Opera
Chrome
Safari
Ogg
No
3.5+
10.5+
5.0+
No
MPEG4
9.0+
No
No
5.0+
3.0+
WebM
No
4.0+
10.6+
6.0+
No
表格1
Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebMD文件HTML5规定了一种通过video元素来包含视频的标准方法
实例分析1：
（1）、海洋之魂
file:
///C:
/Users/RLH/Desktop/%E6%AF%95%E4%B8%9A%E8%AE%BE%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的canvas元素使用JavaScript在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
属性
实例分析
（1）画图（通过不同色的水晶小球画出图形）
（2）、在网页上画图
（3）、在网页上画图（通过鼠标的移动会画出不同的线条）
打开以下网页（火狐，Ie9等浏览器）点击鼠标开始随意绘图
网页演示为毕业答辩文件目录下的：
自己实现的canvas标签网页.html（自己运行出来的网页）
以下是参考代码：
<
DOCTYPEhtml>//html类型的文档
//html头部文件
在先画图阮梁华//定义文档标题
1pxsolid#999;">您的浏览器不支持canvas!
//主要canvas标签
0905090113阮梁华打开网页后，鼠标点击矩形区域内开始绘图如不能显示效果，请按Ctrl+F5刷新
主要实现的功能很简单，原理其实和拖放是类似的，主要是三个事件：
1.在canvas上绑定mousedown事件以标志绘画的开始（调用moveTo移动画笔）
2.在document上绑定mousemove事件来处理绘画时的行为（调用lineTo以及stroke进行绘画）
3.在document上绑定mouseup事件以标志绘画的结束（解绑document上的两个事件）
注：
在Dreamweavercs4上运行代码
4.5、让内容可编辑
该属性仅仅允许用户编辑、删除、插入内容，而并不会自动提供其他类似于所见即所得编辑器的保存或应用样式的功能，需要自己用Javascript来添加这些功能
4.6、简单快速的实现拖放控制
图片和超链接默认是可拖放的。
对于所有的元素，HTML5引进了一个新的属性“draggable”，这将用来设置元素是否接受拖放；下列事件对应HTML5的拖放：
dragstart,drag,dragenter,dragover,dragleave,drop和dragend。
当你要fire掉事件的时候，将需要写function（事件处理器）来处理你需要的，也可能需要给元素绑定事件或做事件指派来简化你的代码；拖放事件还让你可以通过被拖放元素来传递数据，使用事件属性“dataTransfer”的getData和setData方法。
可以在不同的浏览器或程序中进行拖放。
4.7、WEB数据存储
Web存储规范提供了与HTTPsessioncookies相似的稳健的Web存储属性。
他们是“sessionStorage”和“localStorage”：
1、sessionStorage用以存储浏览最顶层环境生存周期内的数据。
例如浏览器Tab的或窗口持续打开周期内的数据。
2、localStorage用以存储周期较长、多页面，以及多浏览器session的内数据。
甚至持续到你重起浏览器或者电脑
4.8、离线数据存储
HTML5规范还定义了当用户的网络被断开后如何让它们继续与网页程序和文档进行交互。
你可以通过提供一个manifest文件来定义哪些文件需要被缓存，哪些需要在离线的时候有折衷方案替代。
当用户访问这个页面，支持的浏览器将会猎取一个manifest版本。
它将下载并缓存所有的涉及到的文件，并且当manifest相对于用户上次的浏览的版本有变化，它将会再次下载并缓存所有的文件。
通常该特性用于创建网页离线版应用程序。
4.9、更多
postMessage——实现跨文档跨域的消息传输facebook中已经采用该特性实现web实时消息传递
webSocket——代表Web通信的下一个演变：
通过一个单一的Socket实现一个全双工，双向通信的信道。
HTML5WebSocket提供了一个真正的标准，你可以使用它构建可扩展的实时Web应用程序。
此外，由于它提供了一个浏览器自带的套接字，WebSocket显著降低了系统开销和复杂性。
geolocation——用于获取浏览器所处地理位置相关信息
五、HTML5未来的发展趋势
5.1、web浏览器的性能堪与iPhone媲美
2012年，web浏览器将开始支持通知推送、地理定位以及离线运行应用程序。
部分浏览器很可能会采用类似iOS风格的用户界面，性能堪与iPhone媲美。
5.2、越来越多的应用开发将基于HTML5
现在很多用户使用web应用发送电子邮件和分享图片等，但到2012年，越来越多的应用将支持HTML5，届时，用户将看到大量类似Inkscape和Illustrator的HTML5内容创作应用。
5.3、浏览器IE10“王者归来”，大幅提升HTML5性能
微软已投入巨资提升HTML5性能，IE10发布之际便是真正的“王者归来”之时。
届时，IE将成为运行最快的浏览器，引领整个浏览器大潮。
获得IE浏览器较好的支持也将成为开发HTML5应用的动力。
5.4、浏览器厂商将涉猎应用商店业务
据悉，面对应用商店这块大蛋糕，浏览器厂商们已经开始蠢蠢欲动，而GoogleChrome浏览器已经推出了自己的应用商店，很多其他的浏览器厂商很可能会纷纷效仿。
其实，这对HTML5应用开发者来说，是一个好消息，意味着更多的销售机会，而这些平台具体的支付系统和收入分成也将接踵而至。
5.5、至少有一个基于WebGL技术的重量级游戏发布
2012年，至少有一个AAA游戏公司会推出基于WebGL技术的3D游戏，或者是发布已有知名游戏的更新版本，如TeamFortress2或AssassinsCreed。
5.6、越来越多的应用将使用离线缓存，支持脱机工作
离线应用缓存将极大地提升HTML5应用的可用性和速度。
通过查询本地数据库避免应用与服务器之间的往返通信，消除web应用的时延缺陷。
5.7、HTML5广告将逐渐取代Flash广告
那些热衷于把来自iOS设备庞大流量货币化的网站站主们将诉诸于HTML5广告。
同时，越来越多的初创企业也将进军这个新兴市场，解决必将会面对的安全、创作工具等问题。
既然HTML5具备了Flash广告几乎所有的效果，以及部分Flash广告没有的效果，HTML5广告取代Flash广告是迟早的事。
5.8、越来越多的人将通过移动设备玩简单的HTML5游戏
2012年，可能会经常看到人们在自己的移动设备上玩各种简单的HTML5游戏，如ZyngaPoker、WordswithFriends和MafiaWars等，这些游戏即可在目的网站，也可在本地应用上运行。
不过，移动设备上成功的HTML5游戏将仅限于以下几种：
菜单类、纸牌类、棋盘类、回合制多人游戏，以及头像定制游戏，而像Zynga“Ville”这种复杂、视觉密集型的游戏在2012年的发展空间可能不是很大。
5.9、Facebook将推出基于HTML5的API，无缝整合第三方网站
2012年，一直致力于成为真正的web社交图谱的Facebook将充分利用各项新的HTML5功能，开放基于HTML5的API，更好地整合外部第三方网站和服务。
5.10、苹果的移动浏览器Safari仍将拒绝HTML5声音功能
早在iOS3版本中，Safari就已兼容HTML5的声音功能，但鉴于它给iTunes带来的竞争，苹果公司在iOS4和iOS5中禁用了绝大多数API。
为保持对苹果生态系统的绝对控制，2012年苹果公司仍将不会启用HTML5声音功能。
六、【总结】
•HTML5极大的解放了Web开发人员的工作量；
•HTML5能提高富互联网应用程序的开发效率；
•由于浏览器支持程度并不一致，可以预见的是HTML5在互联网站上的普及还需要
升级会员 