[置顶] HTML5新特性归纳和同类比较

第一章 HTML5定义

什么是 HTML5?

HTML5 是下一代 HTML 标准。

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果,W3C指World Wide Web Consortium ，WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成

 

自HTML5诞生以来，一共经历了两个阶段，分别是Web增强和移动互联网。我们先从Web 增强说起。

HTML5第一阶段： Web 增强与破垄断

　　web体验的丰富增强主要表现在：1. webapp，比如gmail;2. 流媒体;3. 游戏。我们就这3个方面来讲HTML5做了什么。

　　1. webApp

　　HTML5新增了离线存储、更丰富的表单(比如Input type=date)、js线程、socket、标准扩展embed、以及很多css3新语法…

　　2. 流媒体

　　HTML5新增了audio、video

　　3. 游戏

　　HTML5新增了canvas、webgl

　　另外，还有Google努力在HTML5中推进Header和Section等标签，以利于搜索引擎分析

HTML5第二阶段： 移动互联网

HTML5是唯一一个通吃PC、Mac、iPhone、iPad、Android、Windows Phone等主流平台的跨平台语言。

W3C成立了Device API工作组，为HTML5扩展了Camera、GPS等手机特有的API，然而麻烦的是，移动互联网初期的迭代太快了，手机OS在不停的扩展硬件API，陀螺仪、距离感应器、气压计。每年手机OS都有大版本更新。而W3C作为一个数百家会员单位共同决策的组织，从标准草案的提出到达成一致是非常复杂的过程，跟不上移动互联网初期的快速迭代。

 

2014年10月底，W3C宣布HTML5正式定稿。这个时间，硬件性能更强、手机OS迭代速度下降。

  1. 硬件升级。2011年，iPhone 4s的CPU是A5，现在iPhone 6是A8，按苹果的历次发布会的说法，速度共提升了7.5倍

　2. 苹果、Google的策略变化。两大手机操作系统霸主和浏览器巨头的态度发生了变化，使得HTML5在手机上的发展不再受限。

3. 软件技术的成熟。

a) 性能：提升HTML5性能的手机端引擎，让侧滑菜单、下拉刷新等动态交互卡顿的问题得以解决;

　　b) 工具：HTML5开发IDE产品HBuilder, 超快的编程利器;

　　c) 能力：把40万原生API封装成JavaScript对象，以解决HTML5能力不足问题的Native.js技术;

　　d) 最接近原生体验的高性能框架：MUI框架，体积只有几十K，加载、运行远快于一般框架。

第二章 HTML5新特性介绍

HTML5 中的一些有趣的新特性：

• 用于绘画的 canvas 元素

• 用于媒介回放的 video 和 audio 元素

• 对本地离线存储的更好的支持

• 新的特殊内容元素，比如 article、footer、header、nav、section

• 新的表单控件，比如 calendar、date、time、email、url、search

2.1 核心：Canvas

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

   Canvas将在游戏、图表制作、banner广告、模拟器、远程计算机控制、字体设计、图形编辑器、其他可嵌入网站的内容，这几个方面大有可为。

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas	SVG
· 依赖分辨率 · 不支持事件处理器 · 弱的文本渲染能力 · 能够以 .png 或 .jpg 格式保存结果图像 · 最适合图像密集型的游戏，其中的许多对象会被频繁重绘	· 不依赖分辨率 · 支持事件处理器 · 最适合带有大型渲染区域的应用程序（比如谷歌地图） · 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） · 不适合游戏应用

参考：

1 W3school的具体对它的解析：http://www.w3school.com.cn/html5/html5_canvas.asp 参考手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp

2分享8款令人惊叹的HTML5 Canvas动画特效http://www.html5tricks.com/8-html5-canvas-animation.html

3 八大核心要点：我们能用HTML5 Canvas做什么？ http://www.csdn.net/article/2013-05-24/2815426-8-points-of-html5-canvas

2.2 Video元素解析：

直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。通用的视频播放解决方案是flash和flv（flash从9开始支持h.264的mp4）。但是随着ios设备的流行，flash已经不是万能药了，越来越多的视频网站提供多元的解决方案，而且偏向于html5：也就是说，通过检测agent是否支持html5来决定使用video还是flash。在面对IE8以下的浏览器时，flash几乎是唯一的选择(silverlight的接受度普遍不高)。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。HTML5影音标准诞生的困难，显示出它取代Flash的难度。Flash影片能在影片从服务器传送到使用者计算机时，利用各种"codec"影音编/译码器。使用者只需单纯按下播放键。

　 但目前HTML5只接受两种codec：苹果Safari和Google Chrome支援的H.264，及Firefox、Chrome和Opera支援的Ogg Theora。最多人用的浏览器IE，目前不支持任何HTML5影音。

　 串流影音网站该怎么作？如果某个网站支持HTML5影音（YouTube正在试验），最好还是保留Flash支持，以服务许多现用浏览器尚未支持HTML5的使用者。

同理可见audio元素。

 

参考资料：

HTML5&Flash之粗知浅见 http://uedc.163.com/6675.html （介绍了html+css+js,比较了HTML5和flash）。

2.3应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

1. 离线浏览 - 用户可在应用离线时使用它们

2. 速度 - 已缓存资源加载得更快

3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

 

2.4表单元素和属性

   Form的新元素<datalist>、<keygen>、<output>,新属性autocomplete、novalidate

   Input的新类型，color、 date、 datetime、 datetime-local、 email、 month、 number、 range 、search 、tel、 time、 url 、week；<input>新属性autocomplete、 autofocus、form、required、placeholder、step、 min and max等

 

2.5语义和结构元素

HTML5提供了新的元素来创建更好的页面结构

许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

HTML5提供了新的语义元素来明确一个Web页面的不同部分:

· <header>

· <nav>

· <section>

· <article>

· <aside>

· <figcaption>

· <figure>

· <footer>

 

2.6拖放

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

API有，拖动什么 - ondragstart 和 setData()，放到何处 – ondragover，进行放置 - ondrop

 

其他元素

Web worker, 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

 

Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

 

Web Storage与Cookie相比存在不少的优势，概括为以下几点：
1. 存储空间更大：能提供5MB的存储空间（不同浏览器的提供的空间不同），Cookie仅4KB
2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。(开发者的福利)
4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

 

Geolocation API 用于获得用户的地理位置。实例:

· 更新本地信息

· 显示用户周围的兴趣点

· 交互式车载导航系统 (GPS) 

 

第三章 HTML5与Flash

Flash：YouTube上的FLV影片得通过一个SWF（Shockwave Flash）播放器播放，而这个播放器会呼叫Flash Player Plug-In来播放影片。 
   HTML5：YouTube上的M4V影片直接利用标签即可播放，而播放器是以JavaScript写成，一切都以浏览器内建功能完成。不需任何外挂就能达成，是相对稳定许多的。

 

1 功能上：现代浏览器正在迅速地拓展javascript的应用范围: 原生的视频／音频API，2D绘图有Canvas，3D有WebGL，即时通信有WebSockets，还有Local Storage。正在讨论并有可能会在将来加入标准的API还有Geolocation（地理位置），File API（更强大的上／下传），WebStorage（加强版cookie），甚至还有本地文件处理能力等。Flash现阶段在功能已经没有太大优势可言，作为流媒体解决方案暂时还有一席之地，但浏览器原生API普及之后被取代是迟早的事情。在数据存储和本地操作方面，由于是一个插件，更是受到各种安全性的制约。 （这里基于web，不讨论Air）

2 性能上：曾经Flash在整体性能上具有明显优势，AS3是编译语言，在虚拟机上运行效率比当年的javascript要快很多。但是现在各大浏览器都注重了javascript引擎的优化，尤其是Chrome的V8，单纯在代码运行的效率上已经和AS3并驾齐驱。但是在2D动画上，Flash的优势依然明显，即使是在Chrome上，平均fps依然要比canvas高出一截。另外Flash本身的IDE对矢量图的支持也是Canvas所不具备的。从这一点来看，Flash在依赖大量2D图像的游戏上仍然保持着绝对优势。3D方面，Flash Player通过Molehill API获得了GPU支持，而WebGL也是直接调用GPU的，性能上没有太大差别，主要是开发上API和第三方3D引擎的比较，这方面Flash显然更为成熟，但js正迎头赶上。

3语言上：AS3本身是从ECMAScript（也就是javascript的ISO标准的正式名称）拓展出来的，但是提供了更完善的类型支持，风格上变得更接近于java，在复杂的OO项目上要比js更容易管理。Javascript本身是一个很独特的语言，兼具OOP, imperative和functional的风格，但是对类型的支持很弱(prototype-based)，这使得用js开发复杂的项目比较麻烦，但是近来随着js的升温，各种针对js的design pattern和模块化js库相继出现，借助它们也可以有效的加强js代码的结构性。另外需要指出的是js现在的应用范围已经远远超越了浏览器内部，Node.js提供了一个基于V8引擎的js运行环境，使得js可以用来作为服务器语言，也可以用来写各种命令行工具。其他也有如MongoDB就是使用js的数据库。javascript的未来应用前景要比AS3广泛的多。

4平台支持上：Flash是嵌入型的，只要能运行，那么在它本身的虚拟机内就不存在兼容性的问题，只存在版本的问题；而Flash Player的版本更新adopt rate向来是非常高的。这一点上对开发者而言少了很多麻烦。HTML5最令人头痛的就是参差不齐的浏览器兼容性，这也是现阶段HTML5最大的硬伤。但是HTML5在平台上也有一个明显优势，那就是越来越重要的移动平台上，HTML5的支持情况要好很多很多（iOS支持几乎所有的HTML5 API和CSS3属性，而大多数移动浏览器都是HTML5支持良好的webkit内核），相比之下Flash在iOS上直接出局，也是一个硬伤。从长远来看，HTML5还是绝对赢家，因为浏览器支持度只会越来越好，而移动平台上Flash已经没有竞争力，Adobe最近已经宣布停止了移动平台上Flash Player的继续开发。

从长远来看，HTML5会挤占Flash大部分的市场，但Flash主要是在游戏开发方面还是会有一块生存空间。 

参考资料：

HTML5和Flash游戏上的对比：作者偏Flash。http://www.cnbeta.com/articles/175631.htm

第四章 HTML5和原生APP

4.1 HTML5对开发者的7大优势

   跨平台，快速迭代，持续交付，发达的开源生态系统，开放的数据交换，容易推广、更易爆发，流量大、导流效率高

   跨平台：在多屏年代，开发者的痛苦指数非常高，人人都期盼HTML5能扮演救星。多套代码、不同技术工种、业务逻辑同步，这是折磨人的过程。有点类似个人电脑早期世界，那个时候的每家电脑都有自己的操作系统和编程语言，开发者疲于做不同版本，其实DOS的盛行也很大程度是因为开发者实在没精力给其他电脑写程序。跨平台技术在早期大多因为性能问题夭折，但中后期硬件能力增强后又会占据主流，因为跨平台确实是刚需。

　　快速迭代：移动互联网是一个快鱼吃慢鱼的时代，谁对用户的需求满足的更快，谁的试错成本更低，谁就拥有巨大的优势。互联网产品大多免费、且有网络效应，后入者抢夺用户的难度非常大。使用原生开发，从招聘、开发、上线各个环节的效率都慢一倍以上，而且参与的人越多，沟通效率往往拖慢不止一倍。

　　持续交付：很多人有这样的体会，一个原生应用上线Appstore，突然有一个大bug，只好连夜加班修复，然后静静等待2周或更长时间的Apple审核，这2个星期被用户的涂抹淹死，市场上一片差评，用户大量流失。等新应用被审核上线了，用户已经卸载了。但是，HTML5没有这些问题，你可以实时更新，有问题立即响应。

　　大幅下降成本：创业者融资并不容易，如何花钱更高效非常重要。如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别，但你的开发成本高出一倍，我相信没有投资人会喜欢给你投钱。

　　开源生态系统发达：HTML5前端是开放的正反馈循环生态系统，大量的开源库可以使用，开发应用变得更轻松、更敏捷，当然这也体现在了快速迭代和成本下降上。不过更重要的是，这种开放的正反馈循环生态系统未来的生命力是比原生生态系统更强劲的。

　　开放的数据交换：HTML是以page为单元开放代码的，它无需专门开发SDK，只要不混淆，就能与其他应用交互数据。开发者可以让手机搜索引擎很容易检索到自己的数据， 也更容易通过跨应用协作来满足最终用户需求。

　　更容易推广、更容易爆发：导流入口多：HTML5应用导流非常容易，超级App(如微信朋友圈)、搜索引擎、应用市场、浏览器，到处都是HTML5的流量入口。而原生App的流量入口只有应用市场。聪明的HTML5开发者当然会玩转各种流量入口从而取得更强的优势。

　　流量大：前段时间微信朋友圈风靡一时《神经猫》，这个游戏如果放到Appstore，绝对没有那么多流量，超级App带来的流量，远大于原生应用市场。假如微信允许游戏在桌面创建快捷方式、假如游戏后续升级解决持续娱乐问题，未来不可想象。

　　导流效率高：除了入口多、流量大，导流效率高也不可忽视，谁都知道：页游和端游打同样的广告，广告变用户的转化率，页游远远高于端游。

 

4.2 HTML5对最终用户的3大优势

1大幅降低使用门槛

为什么流媒体会替代下载视频成为主流?为什么页游会如此火爆?只因用户太“懒”。让用户更方便的满足需求， 用户眼睛看到一个兴趣点，点击后，就应该立即开始满足用户需求。比如流媒体可以立即看，页游可以立即玩。而目前的原生应用市场，用户需要这样操作：选一个应用、等待下载、确认权限、等待安装，然后点击打开。这样糟糕的体验迟早要被颠覆。

不管是App、游戏还是音视频，未来都将即点即用。谁先满足用户这个需求，谁就制胜。

2实时更新、差量更新的优秀体验

HTML5应用可以绕开应用市场的限制进行自主实时更新，用户可以快速享受新服务。而且这种更新完全可以是差量更新，比如某个HTML页面或某个js文件有问题，只更新这个几k的小文件就可以了，这比原生应用的更新体验好太多。

3跨应用的使用体验

目前手机应用切换是以桌面或任务管理器为中心的，但事实上这些中心很影响效率和体验。举个例子，用户想出差三亚，先打开去哪App订票，然后切回桌面，再找到并打开天气App，搜索输入三亚，再切到桌面，找到并打开航旅纵横App，输入航班号值机，哦对了，航班号多少来着，再切到桌面，找到并打开去哪App看航班号，最后找到并打开租车App，输入租车地点，然后再切回桌面。

在原生应用体系下，用户只能这样。但在HTML5体系下，他不需要切回桌面，他可以在App间方便的直接跳来跳去，而不是使用一个一个孤岛App;他更不用重复录入数据，应用间可以方便的互相传递数据。这种模式需要一点想象力，但未来迟早会来。

HTML5!=传统浏览器，虽然编程语言还是HTML、Javascript、CSS，但发行方式绝不是传统网站那么简单。HTML5应用的入口，反而很少是启动浏览器输入URL，它可以是存在于手机桌面的图标、也可以来自超级App(如微信朋友圈)、以及搜索引擎、应用市场、广告联盟。到处都是它的入口。它的入口，比原生App更多。

参考资料：

1  使用HTML的十大原因 http://www.williamlong.info/archives/3024.html

2 BI报告：HTML5和App争论终于有答案了！ http://www.leiphone.com/news/201406/0121-keats-html-5-app.html

3 HTML5来了：5个好用的混合式App开发工具   http://www.chinaz.com/free/2015/0422/400470.shtml

4 Html5将颠覆原生App世界 手机App3年内恐消失? http://game.91.com/chanye/news/21809930.html

文献[4]其中描述了HTML5对开发者的7大优势，HTML5对最终用户的3大优势，产业变革中的厂商服务商等转变，HTML5的诞生、困难、阶段性发展，现状。

 

第五章 HTML5游戏

一 引擎

HTML5游戏引擎排行榜，http://www.csdn.net/article/2015-02-28/2824046-html5gameengine。

二 框架

   国外:优秀HTML5前端开发框架非常之多如,jQuery Mobile、Twitter Bootstrap、Schena Touch以及BackBone。  

 国内：腾讯团队开发的JX、淘宝团队开发的KISSY、百度团队开发的QWrap和Tangram，以及上海康尚实验室推出的Como。

三HTML5 游戏举例

   (1)       微信上流行的《神经猫》

(2)   水果忍者网页版 http://www.w2bc.com/demo/2015-02-03-fruit-ninja-master/index.html

网页版的切水果游戏由百度 JS 小组开发，采用 vml + svg 绘图，使用了 Raphael。Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础，你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表，还可以绘制任意形状的图形，可以进行图表或图像的裁剪和旋转等复杂操作。

(3)     35款优秀的基于 HTML5 开发的网页游戏 http://www.html5cn.org/article-7915-1.html

   (4)     TFC白鹭专场 精品HTML5游戏  http://games.qq.com/a/20150324/042222.htm

参考资料：

  1 HTML5移动游戏生态在成型  http://it.sohu.com/20141015/n405126971.shtml

2碎片化结构 酝酿着HTML5游戏爆款http://www.html5cn.org/article-7910-1.html （注意工程师角度和用户需求角度同时考虑问题）

 

参考资料： 1 http://www.runoob.com/html/html5-intro.html