浅谈HTML5的发展与现状最标准格式论文.docx

1、浅谈HTML5的发展与现状最标准格式论文石-院顶岗实习岗位技术工作论文 浅谈HTML5的发展与现状学 号: - 姓 名: - 专 业: 软件技术 年 级: - 企业指导老师: 二一五年三月题 目 浅谈HTML5的发展与现状 企业指导教师评 语 指导教师 (签章) 年 月 日 摘 要自从 1991 年世界上第一个网页诞生以来，HTML 作为万维网最主要的一门语言一直在不断发展与进化。1999年，HTML 4 成为 W3C 推荐的标准规范，并在此后很长一段时间，被作为网络开发和浏览器实现的一项官方指导 来解读。但网络的发展从未停滞不前，相反，随着机器硬件配置和软件支持的不断升级，它也在持续地向前发

2、展。今天，酷炫、快速、跨平台，这些词已经紧密地和 HTML5 联系起来。在 HTML5 的帮助下，传统的网页，已经 带给人们堪比桌面程序的用户体验。2012 年 12 月 17 日，W3C 发布了HTML5 以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定。2015 年，随着移动互联网的高速发展，HTML5 也将迎来前所未有的发展机会。在中国， 360 安全浏览器是用户数领先的浏览器，也是对 HTML5 支持较好的浏览器。在 360 的带动下，国内已经有越来越多的浏览器在提高着对 HTML5 的支持度。可以预见，2015 年将成为 HTML5 在中国的

3、引爆年。 关键词：HTML5； 网络； 关键词；W3C ；互联网第一章 HTML5的解析1.1 HTML5存在的意义Html5的优点即是“一次性开发，多次分发”，使得一次设计适应不同终端成为可能。信息流架构应用化都是直接在WEB(或wap)端抓取数据，html5可以直接使用跨平台数据面不使用后台API，大大降低研发维护成本而且呈现的效果几乎没有什么区别。Html5最大的意义在于改变WEB文档的结构方式，借助于header,foot,section,article，这些标配、标签我们可以实现更具结构化语义化的WEB文档，这样，搜索引擎更容易索引到WEB站点，我们可以搜索到更快更准备的信息。1.2

4、 HTML是什么从1991年世界上第一个网页诞生以来，HTML作为万维网最主要的一门语言一直在不断发展与进化。1999年，HTML 4 成为 W3C 推荐的标准规范，并在此后很长一段时间，被作为网络开发和浏览器实现的一项官方指导来解读。但网络的发展从未停滞不前，随着机器硬件配置和软件支持的不断升级，它也在持续地向前发展。HTML5 的诞生，来自对浏览器和网页开发技术的改进，是一系列 Web 标准草案的集合。HTML5 不仅仅局限于 HTML 语言本身，还包括了 CSS3 以及 JavaScript 语言里新增的函数和功能。HTML5 能始终坚持不断发展，并很快得到广泛认可，与其在制定之初就确立

5、的核心理念有很大的关系。这些核心理念就是我们今天在 W3C 站点上所看到的 HTML5 设计原理这份文档，概括起来就是兼容性、实用性、互操作性以及普遍可访问性。1.3 Html可以做什么酷炫、快速、跨平台，在 HTML5 出现前，这些词从未这样紧紧与网页关联在一起。HTML5 改变了人们脑海中对传统网页的印象，取而代之的是堪比桌面程序和移动原生应用程序的用户体验。相比于 HTML 4，现在的网页可以做到的显然要更多：音频、视频不再需要插件的支持，避免插件安装失败等可能导致的问题； JavaScript 能力大为增强，借助 HTML 中新增的元素，更是能在网页中进行 2D 和 3D 图形、图 像

6、的实时绘制； CSS3 的强大和良好的支持度让网页变得更加生动，同时还可以利用浏览器本身的硬件加速完成 transition、animation 动画效果以及合成（compositing）； 网页可以直接通过 JavaScript 访问摄像头、陀螺仪等等硬件设备。 等等这些，所有的目的只有一个让网页可以做得和原生应用一样强大、一样优秀。我们以下面 6 种特性为例，一窥 HTML5 的优势：1.3.1 Canvas 带来实时绘制的便利本身是 HTML 中新增的一个元素，但通过这个元素，我们就可以用JavaScript 来实时画图。HTML5 2012 年度报告Canvas 不仅仅支持 2D 绘制

7、模式，同时也可以支持 3D 绘制模式，即我们平时所称的 WebGL。Canvas 的出现对于网页开发来说具有革命性的意义，页游从此不再局限于 Flash 这一种实现方式，除了免除插件安装可能引起的失败及插件带来的崩溃之外， Canvas 绘图能借力于浏览器自身的硬件加速，在效率方面不需要开发者费心。除了游戏，在数据可视化方面 Canvas 表现也非常优秀，数据图可根据数据实时变化，并可建立三维模 型让你从各个角度看得更加透彻。目前基于 Canvas 的类库较多，也比较成熟，相对 Flash 来说，开发成本 也较低。1.3. 2 Web Notifications 带来更友好的桌面通知 Web

8、Notifications 提供两种桌面通知方式，分别是 text 和 html 方式。通过 Web Notifications 接口显示的桌面通知不需要当前页面处于活跃状态，只要浏览器进程存在即可，而传统的通知方式通常显示在本页面内，如果当前用户的焦点不在需要发送通知的页面，用户是很难察觉到的。1.3.3 基于Geolocation提供的位置信息， 网页可以提供更好的服务 在Geolocation API 出现之前，基于 IP 地址的地理定位是获得位置信息的唯一方式，但其返回的位置 信息准确度取决于服务器的 IP 地址库的精确度。一般来说，这样的定位方式通常只能精确到城市级别，且 在服务器端

9、处理，对服务器会产生压力。 Geolocation API 不指定浏览器通过使用何种设备底层技术来定位，一般来说设备可以使用 IP 地址、GPS、Wi-Fi 接入点、手机通讯基站等等综合信息来确定用户当前所在位 置。在无线网络下精确度一般会高一些，除了给出当前设备（也可看作用户）所在经纬度坐标之外，还能提供位置坐标的准确度。在设备支持的情况下，还可提供海拔、海拔准确度、行驶方向和行驶速度等信息。1.3.4 WebRTC网页视频不再需要任何插件 2011 年，在还没被浏览器支持之前就被标准所废弃，一个新的 APIgetUserMedia 被提出，取代来完成对摄像头和麦克风设备的访问。通过网页就可

10、以直接取得用户的影像和声音，并在网页中展示出来，再借助于 PeerConnection API，网页聊天也可以用 JavaScript 来实现。1.3.5 Video 标签带来可与网页内容交互的视频 Video 标签不仅仅提供了一种无需插件就可播放视频的方式，更重要的通过 Video 标签播放的视频不再是独立的个体，而可以与网页中的其它元素交互，真真正正成为网页中的一部分。譬如通过与 Canvas 元素结合，可以将视频的每一帧做变形和动画，甚至还可以对视频中的内容做图像识别，在其出现时准确捕捉到；或与 PageVisibility API 结合，在当前页面不是活动状态时，停止视频播放，对性能和

11、用户体验都是一种提升。1.3.6 Application Cache 配合本地存储，打造离线访问新体验 Application Cache 处于浏览器缓存之上。正确地使用 Application Cache，可以有效减少请求数，带来真正的离线应用体验。但是对于 Wiki 百科、大众点评或者天气预报这样的站点而言，把所有访问过的页面的都整个通过Application Cache 缓存下来，显然不是一种好方法，但如果借助本地存储（localStorage 或者 IndexedDB）来存储数据，把用于页面展示的 HTML 模板放在缓存中，会好很多。第二章 HTML5在2012年发展的状况2.1 标准

12、的发展渐趋稳定2012 年， HTML5 的标准在更加细化的过程中不断趋向稳定，虽然其中也有一些调整，但变动不大。相较于过去的 3 年时间，2012 年新增的内容非常少，而且相对来说，都属于一些细节和增强，如对已有元素增加新的属性，或为已有接口增加新的方法。本年度有两个 CSS 方面的变化可能在不久之后，会导致部分现有 HMTL5 网页或网站显示异常，分别是Flexible Box 和 Gradient。这两个特性在语法方面有明显改变，样式的名称和值的语法都与之前有比较明显的变化，值得开发者注意，虽然目前主流浏览器尚未实现对最新标准的支持。2.2 浏览器厂商态度积极在Web标准长达21年的发展

13、过程中，浏览器厂商的态度一直对标准的制定和变化有着非常重要的影响。到目前为止，IE6 至 IE8 的市场份额已有很明显的下降，我们相信其原因是复杂的，但不能排除与这些 老的 IE 版本不能支持 HTML5 以及其它新技术有关。除 IE 外的独立内核浏览器，在诞生之初，就将对标准的 支持放在很重要的位置，并通过自动升级，始终保证用户使用支持最新特性的版本，所以 HTML5 从诞生的那 一刻就紧随其发展。只有 IE 一直特立独行，在 IE9 之前的版本对 HTML5 支持度非常低，并且也没有自动升 级。而 2012 年 5 月之前，IE 始终都占据着浏览器市场的霸主地位，这在很大程度上阻碍了 HT

14、ML5 的发展。幸运的是，从 2012 年初开始，情况逐渐好转。微软开始投入大量资源在 HTML5 上。IE9 的推出，使我 们终于看到微软向标准靠拢，并在 Canvas 硬件加速、h.264 视频格式、SVG、CSS3 等方面做出很大改进。IE10则更向前进了一步，而且是很大的一步，在 CSS3、表单元素、离线存储、网络传输、多线程计算（Web Workers）、动画等方面都有巨大改善，在 HTML5 支持度上已经由 IE9 的 40%上升到 68%。微软在浏览器战争中正在加速 前进。2012 年，国内有 5 家公司和组织加入 W3C 成为 W3C 正式会员，参与到标准制定的过程中。在对标准

15、的 支持方面也有了非常大的改进。360 作为国内首家加入 HTML 工作组的互联网企业，其旗下 360 安全浏览器6.0 超速版和 360 极速浏览器，在对标准的支持方面领先于国内同行。2.3 浏览器支持状况明显提升浏览器支持是决定 HTML5 命运的一项至关重要的因素。各浏览器越快统一对标准的支持，HTML5 标准落到实处也就越快。2.3.1 支持 html5 浏览器市场份额在增加 从全球浏览器市场份额来看，Chrome 的用户量步步攀升，至 2012 年 11 月 Chrome 占有量超过 35%，再加上对 HTML5 支持度一贯很好的 Firefox 和 Safari 浏览器，目前对 H

16、TML5 支持度较好的浏览器实际占有量达 66%。而不支持 HTML5 的浏览器份额逐步萎缩，IE6 至 IE8 这三个版本的保有量总和已经从 2011年1 月的 46%下降到现在的 13%（见图 2-1）。其他 IE 内核IE7浏览器 19%9% IE8非 IE 内核浏览器5%2%2.3.2 浏览器对 HTML5 特性支持度在提升从国际形式看，通过对比各独立内核浏览器（IE、Firefox、Chrome、Safari、Opera）2011 年最后发 布的正式版本和截止到 2012 年 11 月 30 日发布的最新正式版，不难发现各大浏览器对标准的支持都有显著 提高。其中 Chrome 23

17、对标准的支持度高达 87.2%，位居第一。Safari 6.0 的支持度也比 5.1 提高了 10%，上升至 75.6%。同时，我们也看到，IE8 版本以下的浏览器对 HTML5 的支持度低于 20%，IE6 对 HTML5 的支持度仅为 6.8%（详情图 2-5）。所以，在此，我们也呼吁各个网站团结起来，提醒用户告别 IE6，为 HTML5 的普及奠定基础。HTML5 2012 年度报告相对于 PC 平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比 PC 更快，硬件支持和浏览器的状况都要比 PC平台的状况更

18、好。移动平台上主流的 5 款浏览器（iOS Safari 6.0，Android Browser 4.1，Opera Mobile 12.1，Chrome for Android 18.0，Firefox for Android 15.0），目前对标准的支持度均高于 60%，其中表现居首的是 Chrome for Android，而支持度相对较低的 Android 系统自带的浏览器 Android Browser 对 HTML5 的支持度也在 60%以上（见图 2-6）。90.00%80.00%70.00%60.00%iOS Safari 6.0AndroidOpera MobileChrom

19、e forFirefox forBrowser 4.112.1Android 18.0Android 15.050.00%40.00%30.00%20.00%10.00%0.00%通过各款浏览器最新正式版对 HTML5 特性支持状况来分析，44.4%的特性得到了跨平台跨浏览器的完全支持，而如果把 IE9 也考虑进来的话，也有 32.3%的特性是跨浏览器支持的。就国内形式而言， 360 旗下 360 安全浏览器、360 极速浏览器对 HTML5 的支持度达 88%（见图 2-7），一直处于行业领先水平。国内主流浏览器对于 HTML5 支持度最低值也在 70%以上，但部分双核浏览器默认使用兼容模式

20、打开网站，我们呼吁这些浏览器厂商默认使用 WebKit 内核打开网站，为国内的 HTML5 普及营造一个更好的环境。图 2-7 国内浏览器对 HTML5 的支持度（数据来自 HTML，按 HTML5 评分/总分 520）鉴于各大浏览器对于 HTML5 特性支持度的不断提升，对 HTML5 支持的浏览器市场份额的不断扩大，现在，开发者可以放心的使用这些特性，即使要考虑多平台以及各浏览器的兼容性。2.4硬件加速促进了标准的发展和应用在使用 HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用 HTML5 动画、Canvas、WebGL 究竟能否带来更好的用户体验，与其实际性能密不可分。目前

21、国内外主流浏览器均支持硬件加速，这对 HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome 18+，Firefox 4+，IE 9+，Safari 5.1+，Opera 12+，360 安全浏览器 6.0 超速版，360极速浏览器，搜狗浏览器（默认使用兼容模式打开，需切换到高速模式），QQ 浏览器（默认使用兼容模式打开，需切换到极速模式）。傲游浏览器的最新版（Maxthon v4.0.0.2000）依然不支持硬件加速。从系统平台的角度而言，Linux 要远远落后于 Windows 和 Mac OS。手机系统情况比较乐观，主流的智能手机系统 iOS、Android 以及

22、 Windows Phone 上的原生浏览器都已经支持硬件加速，Android 4.0+上的 Chrome在硬件加速方面更是超越了原生浏览器的表现。但有些显卡在硬件加速的支持上有比较明显的问题，如被多款笔记本使用的“Intel(R) HD Graphics 3000”在 Windows 7 系统上使用硬件加速容易崩溃；“Nvidia Geforce 7025 / Nvidia nForce 630a”显卡在 Windows XP 系统上开启硬件加速多次被报告导致蓝屏等等2.5 HTML5在商业方面的影响力越来越多的公司和初创者开始采用一种非常微妙的移动开发的方式结合HMTL5的原生应用的常处，

23、一边开发HTML5应用，一边开发一款，或更多的原生的应用，覆盖所有用户群体。一些开发人员转向混合式解决方案，以HTML5为中心引入原生元素，让应用打入应用商店给人以更自然的感觉，别一个选择是针对某个目标用户，尤其重要的平台，开发一款100% 的原生的应用，然后在用HTML5或混合手段开发面向其与平台的应用。2.6 产品状况未达预期2012 年 HTML5 在实际产品市场的发展并没有像之前预测的那样迅猛，尤其是对比 2011 年底 Ben Savage做出的14项预测。这曾让很多开发者觉得大失所望，并断章取义地引用Facebook CEO扎克伯格在TechCrunch技术大会中所说的，“Face

24、book 的 HTML5 应用是我们有史以来犯过的最大的错误之一，甚至可以说是一个最 大的战略失误”，称 Web 应用已死。在面对这些悲观的消息时，不禁要问，究竟是什么原因使 HTML5 面临如此大的困境。要讨论这个问题， 则必然要先回顾一下，曾经是什么让大众觉得 HTML5 必将所向无敌。回顾 2009 至 2011 年，人们对 HTML5 寄予厚望的两个重要原因是：跨平台优势和智能机的迅速崛起。这 两点确实给了 HTML5 很大的发展机会，同时也带来了很多的障碍：2.6.1 跨平台的技术 跨平台的应用 在所有关于 HTML5 盲目乐观的预测中，“跨平台”是一个很重要的因素，但常常被忽略的一

25、个问题是跨平台的技术不代表跨平台的应用，更不能简单地认为使用 HTML5 开发的应用，就天生应该能在所有设备的浏览器上一样地使用。Web 开发者必须明白的是同样的应用在不同设备上的体验很难完全一致，除去设备尺寸的差异之外，实体键盘（keyboard）与虚拟键盘（keypad）之间、鼠标与触摸屏之间，同一套设计很难支撑所有的设备和平台，所以 “一次开发，处处皆可使用”的宣传口号终究还只是个远期梦想。2.6.2 PC上支持HTML5的浏览器份额太少在2010 年，国内 PC 浏览器对 HTML5 的支持量仅为 2%，同时，在用户电脑上大量存在的 IE6。由 于IE6 对 HTML5 的支持度仅为

26、6.8%，给 HTML5 的使用带来很大的阻碍。2011 年，微软曾发起全球告别IE6 活动，全球 IE6 使用份额急剧下降，2012 年，360 在中国发起告别 IE6 活动，使 IE6 在中国的市场份额下降到 21%。2012 年，对 HTML5 支持的浏览器占有量虽然已经提升到 37%，但仍然未达到让开发者大胆使用 HTML5 技术的程度。2.6.3 移动平台用户的使用网络服务的习惯和 PC 用户不一样 在目前阶段，大多数移动平台用户还是习惯通过 App 方式来使用应用，而不是通过浏览器访问的方式。在移动设备桌面上，创建一个指向 Web 应用的快捷方式非常容易，但想改变用户使用原生应用形

27、成的习惯却比较困难。从智能手机开始进入市场，用户已经形成了去应用商店搜索应用并下载安装的习惯，而目前无论是苹果的 App Store 还是Android 平台的 Google Play 商店，都从未上架过任何一款 Web应用。2.6.4 移动设备系统自带浏览器的引擎对 HTML5 的支持不足 为了弥补跨平台开发带来的巨大人力成本消耗和 Web 应用无法通过平台的应用商店推广的难题，又催生了混合型应用（Hybrid Apps）这样一种介于纯粹的 Web 应用和原生应用之间的应用类型。混合型应用的主体功能都是采用 Web 技术来开发，通过中间件包装成为一个可发布到应用市场的应 用程序。混合型应用运

28、行在一个原生应用容器（即中间件）里，借助移动系统自带的浏览器引擎（而不是 用浏览器本身）来渲染界面和解析脚本，完成所有的界面渲染和脚本解析。混合型应用解决了跨平台开发中语言差异的问题，统一使用 Web 开发技术（HTML/CSS/JS）来进行主 体功能开发，底层接口访问和跨平台则交给中间件来完成，并通过各平台的应用市场来进行分发。混合型应用用户体验的好坏，不仅取决于设计和用户交互界面的实现，还取决于底层中间件的系统 交互与跨平台的能力，同时还受到移动平台原生浏览器引擎的掣肘。目前除了 iOS 平台和Android 4.0+原生浏览器之外，其它移动平台原生浏览器引擎在支持 HTML5 方面都尚有

29、很大的不足。第三章 HTML5应用现状3.1 PC端已经被广泛应用的文件拖拽、地理位置标识、网页通知、语音输入、视频播放等 HTML5 技术，大大减少了开发者的工作量。在国内，360 搜索、360 云盘、新浪微博、淘宝网、优酷、豆瓣、腾讯 WebQQ、酷狗音乐等产品已经使用到了 HTML5 技术；在国外，Gmail、Facebook、Twitter、Youtube、Adobe 等也一直在使用 HTML5 技术。3.2 移动端移动端是 HTML5 最热门的使用平台。iOS、Android 都可将 Web 应用显示在它的桌面。未来几年，支持HTML5 的移动浏览器将如雨后春笋，将你的应用向 HTM

30、L5 迁移是很明智的，因为 HTML5 将很好地运行在这些设备上。3.3 跨界领域已经有公司即将发布电视平台，Google TV 以及 Apple TV。Google 表示，他们的 TV 平台将支持 HTML5。另外一些电视盒厂商，如 Boxee 已经开始支持 HTML5，如果你想为 Boxee 开发应用，与其专门为它开发，不如直接使用 HTML5。跨界领域拥有大量的平台，可联网的电视数量在不断增长，国外已经可以在电视上全屏观看 YouTube，而备受欢迎的 Wii 则内置了 Opera。所有这些，都将 HTML5 技术带到新的平台。 3.4 开发工具古人云“工欲善其事，必先利其器”，与拥有超

31、过 10 年以上历史的Flash 技术相比，HTML5 开发环境（IDE）及相关工具和类库目前并不是非常完善。但随着 HTML5 技术的发展，越来越多的开发工具（特别是游戏编辑器）和类库也在不断涌现。另外，对于已经使用 HTML5 进行开发，却苦于无法发布推广的开发者而言，还可以选择PhoneGap（Cordova）和 AppMobi 这类跨平台开发包（XDK）将 HTML5 应用包装成 iOS、Android、Windows Phone 系统的原生应用进行发布。第四章 HTML5在2013年的预测1标准更趋成熟2012 年 12 月 17 日，W3C 发布了 HTML5 以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定。虽然两份文档还不是 W3C 的正式推荐标准，但它们所包含的特性业已稳定，这就意味着广大厂商和开发者可以拥有一个稳定的 HTML5 版本进行规划和实施。2支持HTML5的PC浏览器占有量将达70%以上伴随 HTML5 完全版本的发布，HTML5 标准也会日渐成熟，浏览器对 HTML5 的支持度日渐提高。除 Chrome、Firefox 之外，微软推出的 IE9、IE10 对 HTML5 的支持度都大幅提升，相信 HTML5 大面积使用只是时