毕业论文-HTML5新特性

第11页共11页HTML5新特性摘要：HTML5的标准几年前就已经被提出，但发展一直受到各方面的限制，不仅来自于自身的原因，更主要的是由于各浏览器供应商对HTML5标准的支持程度，在富客户端发展迅速的今天，Flash几乎达到了一个垄断的地位，但HTML5向flash提出了挑战，它添加了诸多的特性，添加了多媒体的支持以及用于图形绘制的新标签，使用户可以脱离外部插件达到丰富的用户体验，HTML5的发展是否会一帆风顺，能否撼动flash的霸主地位，这一切都只有让时间来告诉我们。关键词：HTML5;flash;标准

目录HTML5新特性 1一、HTML的发展历史 31.1、标记语言的发展 31.2、HTML版本的演变历史 3二、HTML5的新特性 42.1、视频 42.2、音频 52.3、画布（Canvas） 52.4、HTML5之Web存储 62.5、新的input类型 72.6、新的表单类型 72.7、新增加的表单属性 8三、HTML5与flash 83.1、技术方面 83.2、商业方面 10[4]、BruceLawson(著).Introducing.HTML52011-1-2 11

一、HTML的发展历史1.1、标记语言的发展HTML的英文全称是(HyperTextMarkupLanguage),中文名称则是超文本标记语言，主要用于在互联网上基于HTTP协议的网络传输，它作为标记语言的主力成员，首先了解一下它的发展历程（图一）。图一、HTML发展历程GML(GeneralizedMarcupLanguage)通用标记语言和SGML(StandardGeneralizedMarkupLanguage)标准通用标记语言都是IBM公司的员工创立的，SGML在1986年被国际标准化组织（ISO）所采纳，成为了通用的标准语言。但是因为这种语言的使用成本太高，所以在很长的一段时间内并没有被推广。1989年，简化版的SGML及HTML诞生，但是HTML的发展并非一帆风顺，因为HTML的规范较少，功能也较简单，在发展的过程中不断的添加新的标签，致使后来整个HTML体系十分臃肿，兼容性也非常差。这种情况一直持续到HTML4.0标准的出台。XML（eXtensibleMarkupLanguage）可扩展的标记语言在98年被w3c批准为1.0版本的规范，他的出现掀起了电子商务大潮，国际上许多知名大公司都无一例外地全面拥抱XML，包括微软、IBM、Sun。甚至有人宣称只要是电子商务软件,它就得必须支持ＸＭＬ。但是HTML4.0标准的通过，让HTML重新回到了主导地位。也为HTML的发展找到了一条合适的道路。XML当然也并没有就此退出历史舞台，现在经常会被应用到数据传输保存等方面。1.2、HTML版本的演变历史HTML自身版本也经历了很多次演变，从1.0到XHTML2.0，再到现在即将推广的HTML5。? HTML2.0——1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时。? HTML3.2——1996年1月14日，W3C推荐标准。? HTML4.0——1997年12月18日，W3C推荐标准。? HTML4.01（微小改进）——1999年12月24日，W3C推荐标准? XHTML1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。? XHTML1.1,于2001年5月31日发布。? (XHTML2.0,W3C工作草案)xhtml2.0因为改动过大，学习这个新技术的成本过高而最终胎死腹中。现在最常用的还是XHTML1.0的标准了。二、HTML5的新特性HTML5给我们带来了很多人性化和方便的改变，包括新的解析顺序、新的元素、新的方法、新的input属性等，下面就有特点的几个主要元素和属性做简单的总结。2.1、视频对多媒体的支持可以说是HTML5的一个非常大的亮点，用户再也不用借助于第三方的插件比如flash插件，省去了中间繁杂的配置环节，最主要的是运行环境的变化带来了性能上的提升和资源上的节约。示例：HTML代码<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>运行效果（图二）：图二、HTML5video标签效果<video>标签的属性：属性 值 说明autodisplay autoplay 如果出现该值，则会在视频就绪后立刻播放controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。height pixels 视频播放器的高度，以像素为单位width pixels 视频播放器的宽度，以像素为单位loop loop 如果出现该值，则会在播放完毕后自动重新播放preload preload 是否提前加载，如果为autodisplay则会忽略该属性src url 播放的视频的URL说明：Video元素允许包含多个source元素，source元素可以链接多个不同的视频文件，浏览器会使用第一个可以识别的文件。<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的，比如放置一张图片或者文字替换。2.2、音频对多媒体支持的第二个关键元素则是对音频的支持，使用audio标签，使用上和video的使用方法相近，支持的音频文件格式主要包括wav、MP3、ogg，避免了对flash等外部插件的依赖。2.3、画布（Canvas）提到画布这一概念，我想可能会有一点疑问，这就好比想windows自带的画图软件，我们可以在上面自由的画图，而其中的画布就和此处的Canvas有相似之处。HTML5中canvas使用Javascript在网页上绘制图形，画布是一个举行的区域，我们可以在控制上面的每一个像素的属性，canvas拥有多种绘制图形、路径、矩阵和添加图形的方法。(1) 创建Canvas<canvasid="myCanvas"width="200"height="100"></canvas>指定创建的画布的宽度和高度。(2)调用JavaScript进行绘图用于canvas自身不具有画图能力，所以必须调用Javascript来完成绘图工作。<scripttype="text/javascript">varc=document.getElementById("myCanvas");/*寻找canvas元素*/varcxt=c.getContext("2d");/*c.getContext("2d")返回的是html5内建的对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法*/cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);/*设置填充颜色为红色，调用fillRect方法绘制矩形*/</script>更多的API接口方法可查阅相关资料，利用这些接口我们可以绘制出很多复杂交互性优秀的程序，下面是一个优秀应用的截图（图三）：图三、Canvas的图形绘制功能2.4、HTML5之Web存储在客户端存储数据，在HTML5中提供了以下两种方式：? localStorage? sessionStorage在HTML4中客户数据的存储主要是依靠cookie来实现的，但是cookie得缺点是不适合大数据的存储，因为他们的传递依赖于对服务器的请求，这使得cookie的速度慢并且效率低下。在HTML5中数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据，HTML5使用JavaScript来存储和访问数据。localStorage方法说明：localStorage方法存储的数据没有时间限制使用方式如下：<scripttype="text/javascript">localStorage.lastname="Smith";/*使用javascript写入数据*/document.write(localStorage.lastname);</script>sessionStorage方法说明：该方法是基于会话来存储数据的，当浏览器关闭后，存储的数据就会被删除。<scripttype="text/javascript">sessionStorage.lastname="Smith";/*使用javascript写入数据*/document.write(sessionStorage.lastname);</script>2.5、新的input类型HTML5提供了新的input类型，这些新加的类型可以让对用户输入数据的验证变得更加简单方便，主要有以下几种类型：? email? url? number? range? Datepickers(date,month,week,time,datetime,datetime-local)? search? color新的input类型提供了新的email、url地址、数字、范围、日期选择、搜索、颜色类型，在提交页面时会自动进行验证，在以前的操作中，主要是使用JavaScript脚本通过正则表达式来验证用户输入数据的合法性。2.6、新的表单类型HTML5添加了新的表单类型，主要有以下几种：? datalistdatalist元素规定输入域的选项列表，列表是通过datalist内的option元素创建的。? keygenkeygen元素的作用是提供一种验证用户的可靠方法。? outputoutput元素用于不同类型的输出，比如计算或脚本输出。2.7、新增加的表单属性新增加的表单包括新的form表单和input表单的属性，提升网站整体性能提供了更好的表现。三、HTML5与flash在客户端领域，在flash出现之前出现了很多很优秀的图形绘制工作，其中包括javaapplet，他们都各具特色，但flash推出之后便迅速占据了市场，结束了这场战争，今天的法拉盛可谓是如日中天，成为了富客户端不可缺少的一部分，大量应用于游戏，广告等领域，但在HTML5推出后迅速获得了许多业内巨头的青睐，包括Google、Apple，就连最不遵守标准的微软也在IE9中添加了对HTML5的支持，那HTML5与flash各有什么优缺点呢，能否顺利的普及，下面就就技术和商业方面做简要的比较。3.1、技术方面HTML5与Flash在功能上并不是完全重叠的，比如对于摄像头等计算机硬件的调用，仍然只能使用Flash或其他方法实现。但是HTML5却引入了一些让Flash不得不认真对待的元素。其中最为人所知的和最重要的即为canvas和video标签。在我看来，其他的新属性跟Flash的竞争关系很弱，只有此二者是真真正正要抢Flash的饭碗，而且一旦普及，将深刻的改变整个互联网，可谓是HTML5的左膀右臂。canvas相比Flash显然是有其优点的：(1)、它不依赖于外部插件、与浏览器渲染引擎紧密结合、节约资源，最重要的是极大的简化了图形和网页中其他元素的交互过程。(2)、对于Flash来说，使Flash中的元素与网页中其他元素进行交互是要消耗大量时间和资源的，另外在编程上也相当不方便。(3)、而canvas本身就是HTML5的一个元素，可以像操作普通HTML元素一样操作它。开发人员可以将所有的代码整齐的写在一个文件里，降低了维护与更新的难度。然而canvas也有其缺点：其一，开发者不得不编程描绘每一个点和矢量曲线，在旋转缩放时更需要和矩阵变换打交道，这会增加描绘复杂图形的难度。而在Flash里，图形显示的API被封装在名为“Sprite(显示列表)”的类里，大部分图形元素都继承于此类，开发者可以使用多种工具设计图形，对图形进行旋转放缩只需要简单的调用类的函数。其二，动画的实现存在缺憾。canvas虽然提供了不同于传统的通过div块实现动画的方法，但这种方法仍然非常繁琐。开发者必须在每一桢动画显示时清空画布，然后重画所有元素，这必然导致包含大量元素的场景动画缓慢，只移动少量元素就要重画整个画布会浪费大量资源。而且创建动画也是一件十分繁琐的事情。相比起来，Flash的实现就方便多了，虽然从最底层来说，动画时仍然需要重画整个画布，但其被交予FlashPlayer自动处理，无需开发者手动管理。基于字节码的Flash在解析的过程中将会比即时编译的HTML5和JavaScript快速。一般来说，复杂动画将会更流畅。另外，良好封装的图形类和强大的设计工具使得动画的创建非常方便。其三，没有提供一套方便的事件体系。开发者也许需要通过捕获鼠标在canvas中点击的坐标，判断用户到底点击了什么图形元素。在这个过程中可能要遍历所有的显示元素并判定点是否在图形内，实现起来比较繁琐，更不要说实现事件的冒泡和递归模型了。虽然今后出现的图形库可以解决这个问题，但这实质上相当于使用JavaScript构建了一套事件响应模型，其效率显然不如内建于浏览器的原生事件模型高。在Flash中，事件也被良好封装为类，捕获点击等事件自然不在话下，更重要的是提供了判断两个图形是否有交集的事件和函数，这在游戏编程中非常方便。另外，Flash的最新版本将会支持多点触摸事件的响应，而HTML想要支持这点恐怕要等到HTML6了。由以上分析我们可以看出，HTML5需要的几个非常重要的东西：一个强大易用的图形库、硬件加速的图形解析和重绘、一个强大的编辑器(IDE)。目前已经出现了基于canvas实现的游戏引擎。但是从效果上看仍然无法与Flash媲美。WebGL的提出让我们看到了硬件加速的希望，这将极大的改进图形显示的速度。但是目前它只被少数开发版本的浏览器支持。IDE方面，讽刺的是恰恰是Adobe为AdobeFlashCS5添加了一个将Flash转化为canvas的功能。在JavaScript方面，鉴于其为非强制类型的编程语言，对其进行代码提示等非常困难，提高编程效率较难。如果以上三个问题不能被良好解决，将会限制canvas所能实现的效果的丰富度，增加开发的复杂度，从而最终阻碍其普及。Video标签可能是Adobe最反对的东西了，它极有可能打破Flash在在线视频领域的垄断地位。但目前的情况是作为video内容的视频存在编码问题，Apple和微软所支持的H.264不是开放标准，浏览器厂商必须为其付费。因此，作为三大浏览器之一的火狐浏览器拒绝支持此编码格式。谷歌虽然也收购了一套优质的编码技术，但是目前没有迹象表明谷歌会开放这个技术标准。根据最近的统计，虽然GoogleChrome浏览器和AppleSafiry浏览器增长很快，但浏览器市场还是主要被火狐和IE所统治。如果火狐坚持不支持H.264编码格式，video标签的推广将会十分困难。所以，HTML5需要一个既开放又优质的视频编码标准。3.2、商业方面要让微软、谷歌、苹果这三个在很多方面存在竞争关系的业界巨头团结一心的支持同一套标准是很困难的。苹果方面对Flash痛下杀手，微软方面则极少参与这场论战。至于谷歌则在支持HTML5的同时在Android中加入了Flash支持，甚至存在将Flash纳入