整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

关于 HTML5 你需要了解的基础知识

TML5 是第五个且是当前的 HTML 版本,它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。 -- Palak Shah

本文导航
  • -新标签和元素 …… 08%

  • -HTML5 的高级功能 …… 16%

  • -地理位置 …… 16%

  • -网络存储 …… 33%

  • -应用缓存(AppCache) …… 44%

  • -视频 …… 50%

  • -音频 …… 61%

  • -画布(Canvas) …… 71%

  • -HTML5 工具 …… 78%

编译自: http://opensourceforu.com/2017/06/introduction-to-html5/

作者: Palak Shah

译者: geekpi

HTML5 是第五个且是当前的 HTML 版本,它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。

HTML5 通过 W3C 和Web 超文本应用技术工作组Web Hypertext Application Technology Working Group之间的合作发展起来。它是一个更高版本的 HTML,它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能,使 Web 更加动态和交互。

HTML5 的新功能是:

  • 新标签,如 <header> 和 <section>

  • 用于 2D 绘图的 <canvas> 元素

  • 本地存储

  • 新的表单控件,如日历、日期和时间

  • 新媒体功能

  • 地理位置

HTML5 还不是正式标准(LCTT 译注:HTML5 已于 2014 年成为“推荐标准”),因此,并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。

新标签和元素

  • 语义化元素: 图 1 展示了一些有用的语义化元素。

  • 表单元素: HTML5 中的表单元素如图 2 所示。

  • 图形元素: HTML5 中的图形元素如图 3 所示。

  • 媒体元素: HTML5 中的新媒体元素如图 4 所示。

图 1:语义化元素

图 2:表单元素

图 3:图形元素

图 4:媒体元素

HTML5 的高级功能

地理位置

这是一个 HTML5 API,用于获取网站用户的地理位置,用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是:

  • 公共交通网站

  • 出租车及其他运输网站

  • 电子商务网站计算运费

  • 旅行社网站

  • 房地产网站

  • 在附近播放的电影的电影院网站

  • 在线游戏

  • 网站首页提供本地标题和天气

  • 工作职位可以自动计算通勤时间

工作原理: 地理位置通过扫描位置信息的常见源进行工作,其中包括以下:

  • 全球定位系统(GPS)是最准确的

  • 网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址

  • GSM/CDMA 蜂窝 ID

  • 用户输入

该 API 提供了非常方便的函数来检测浏览器中的地理位置支持:

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。

语法是:

getCurrentPosition(showLocation, ErrorHandler, options);
  • showLocation:定义了检索位置信息的回调方法。

  • ErrorHandler(可选):定义了在处理异步调用时发生错误时调用的回调方法。

  • options (可选): 定义了一组用于检索位置信息的选项。

我们可以通过两种方式向用户提供位置信息:测地和民用。

  1. 描述位置的测地方式直接指向纬度和经度。

  2. 位置信息的民用表示法是人类可读的且容易理解。

如下表 1 所示,每个属性/参数都具有测地和民用表示。

图 5 包含了一个位置对象返回的属性集。

图5:位置对象属性

网络存储

在 HTML 中,为了在本机存储用户数据,我们需要使用 JavaScript cookie。为了避免这种情况,HTML5 已经引入了 Web 存储,网站利用它在本机上存储用户数据。

与 Cookie 相比,Web 存储的优点是:

  • 更安全

  • 更快

  • 存储更多的数据

  • 存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。

有两种类型的 Web 存储对象:

  1. 本地 - 存储没有到期日期的数据。

  2. 会话 - 仅存储一个会话的数据。

如何工作: localStorage 和 sessionStorage 对象创建一个 key=value 对。比如: key="Name", value="Palak"。

这些存储为字符串,但如果需要,可以使用 JavaScript 函数(如 parseInt() 和 parseFloat())进行转换。

下面给出了使用 Web 存储对象的语法:

  • 存储一个值:

  • localStorage.setItem("key1", "value1");

  • localStorage["key1"] = "value1";

  • 得到一个值:

  • alert(localStorage.getItem("key1"));

  • alert(localStorage["key1"]);

  • 删除一个值: -removeItem("key1");

  • 删除所有值:

  • localStorage.clear();

应用缓存(AppCache)

使用 HTML5 AppCache,我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外,所有浏览器都可以使用 AppCache(截止至此时)。

应用缓存的优点是:

  • 网页浏览可以脱机

  • 页面加载速度更快

  • 服务器负载更小

cache manifest 是一个简单的文本文件,其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的 HTML 标签中,如下所示:

<html manifest="test.appcache">

...

</html>

它应该在你要缓存的所有页面上。

缓存的应用程序页面将一直保留,除非:

  1. 用户清除它们

  2. manifest 被修改

  3. 缓存更新

视频

在 HTML5 发布之前,没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。

目前,video 元素支持三种视频格式,如表 2 所示。

下面的例子展示了 video 元素的使用:

<! DOCTYPE HTML>

<html>

<body>

<video src=" vdeo.ogg" width="320" height="240" controls="controls">

This browser does not support the video element.

</video>

</body>

</html>

例子使用了 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作,我们必须添加一个 MPEG4 和 WebM 文件。

video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式,如下所示:

<video width="320" height="240" controls="controls">

<source src="vdeo.ogg" type="video/ogg" />

<source src=" vdeo.mp4" type="video/mp4" />

<source src=" vdeo.webm" type="video/webm" />

This browser does not support the video element.

</video>

图6:Canvas 的输出

音频

对于音频,情况类似于视频。在 HTML5 发布之前,在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。

目前,HTML5 audio 元素支持三种音频格式,如表 3 所示。

audio 元素的使用如下所示:

<! DOCTYPE HTML>

<html>

<body>

<audio src=" song.ogg" controls="controls">

This browser does not support the audio element.

</video>

</body>

</html>

此例使用 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作,我们必须添加一个 MP3 和 Wav 文件。

audio 元素允许多个 source 元素,它可以链接到不同的音频文件。浏览器将使用第一个识别的格式,如下所示:

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

This browser does not support the audio element.

</audio>

画布(Canvas)

要在网页上创建图形,HTML5 使用 画布 API。我们可以用它绘制任何东西,并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布,我们可以绘制形状和线条、弧线和文本、渐变和图案。此外,画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到 HTML 页面,如下所示:

<canvas id="myCanvas" width="200" height="100"></canvas>

画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="blue";

cxt.storkeStyle = "red";

cxt.fillRect(10,10,100,100);

cxt.storkeRect(10,10,100,100);

</script>

以上脚本的输出如图 6 所示。

你可以绘制许多对象,如弧、圆、线/垂直梯度等。

HTML5 工具

为了有效操作,所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具,当需要设置工作流/网站或执行重复任务时,这些工具非常有帮助。它们提高了网页设计的可用性。

以下是一些帮助创建很棒的网站的必要工具。

  • HTML5 Maker: 用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。

  • Liveweave: 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用,并为一些代码提供自动完成功能,这使得开发和测试更快更容易。

  • Font dragr: 在浏览器中预览定制的 Web 字体。它会直接载入该字体,以便你可以知道看起来是否正确。也提供了拖放界面,允许你拖动字形、Web 开放字体和矢量图形来马上测试。

  • HTML5 Please: 可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能,你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表,语法,以及如何使用元素的一般建议等。

  • Modernizr: 这是一个开源工具,用于给访问者浏览器提供最佳体验。使用此工具,你可以检测访问者的浏览器是否支持 HTML5 功能,并加载相应的脚本。

  • Adobe Edge Animate: 这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画,可以跨多个设备运行。

  • Video.js: 这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站,你应该使用此工具。它使视频看起来不错,并且是网站的一部分。

  • The W3 Validator: W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性,你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后,你的代码将被检查,并将提供所有错误和警告。

  • HTML5 Reset: 此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。


Palak Shah

作者是高级软件工程师。她喜欢探索新技术,学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com[1] 联系她。


via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者:Palak Shah[2] 译者:geekpi 校对:wxy

本文由 LCTT 原创编译,Linux中国 荣誉推出

点击“了解更多”可访问文内链接

TML5是HTML最新的修订版本,由万维网联盟(W3C)于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在网际网路应用迅速发展的时候,使网路标准达到符合当代的网路需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要外挂程式的丰富性网路应用服务(Plug-in-Based Rich Internet Application,RIA),例如:Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网路应用的标准集。

HTML5添加了许多新的语法特征,其中包括<video>、<audio>和<canvas>元素,同时整合了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。

发展历史

网页超文本技术工作小组(WHATWG)于2004年开始制定新标准。在当时,HTML 4.01自2000年来没有更新,以及全球资讯网协会(W3C)正在将未来的发展重点放在XHTML 2.0。2009年,W3C允许XHTML 2.0工作组章程结束过期并且决定不再续订。W3C与WHATWG合作共同为发展HTML5而努力。

2004年6月,Mozilla基金会和Opera软体公司在全球资讯网协会(W3C)所主办的研讨会上提出了一份立场文件,其重点是开发与现有浏览器向后相容的技术,包括Web Forms 2.0最初草案规范。研讨会最后以——8票赞成,14票反对——否决继续对HTML的开发工作。这引起一些人的不满,在研讨会之后,网页超文本技术工作小组(WHATWG)立即根据该立场文件成立,第二个草案,Web Applications 1.0也公布了。后来这两种规范合并形成HTML5。2007年,获得W3C接纳,并成立了新的HTML工作团队。2008年1月22日,第一份公开工作草案发布。

尽管HTML5已经在网络开发人员中非常出名了,但是它成为主流媒体的一个话题是在2010年的4月,当时苹果公司的CEO乔布斯发表一篇题为“对Flash的思考”的文章,指出随着HTML5的发展,观看影片或其它内容时,Adobe Flash将不再是必须的。这引发了开发人员间的争论,包括HTML5虽然提供了加强的功能,但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同,以及HTML5和Flash间的功能差异。

特点

标记

HTML5提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理、小萤幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。一些过时的HTML 4.01标记将取消,其中包括纯粹用作显示效果的标记,如<font>和<center>,因为它们已经被CSS取代。还有一些透过DOM的网络行为。

尽管和SGML在标记上的相似性,HTML5的句法并不再基于它了,而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始列看起来就像SGML的文档类型声明,<!DOCTYPE HTML>,这会触发和标准兼容的渲染模式。在2009年1月5日,HTML5添加了Web Form 2.0的内容,HTML5开始发展起来。

新的API

HTML5相关APIs

除了原先的DOM接口,HTML5增加了更多样化的应用程序接口(API):

Canvas

定时媒体播放

离线

可编辑内容

拖放

历史

MIME和协议处理程序时表头登记

微数据

网路讯息

网路存储

以上技术尽管是WHATWG HTML说明文档的内容,但并没有全部包括在W3C HTML5的说明文档里。一些相关的技术,像下面所列的,并没有包括在这2份文档中的任何一份中。W3C给这些技术单独出版了说明文档。

地理位置

网页SQL数据库 ─ 本地SQL数据库(不再维护)

IndexedDB

文件─ 处理文件上传和操纵文件

目录和文件系统 ─ 这个API是为了满足客户端在没有好的数据库支持情况下存储要求

文件写入 ─ 从网络应用程序向文件里写内容

网路音频

ClassList

网路加密

WebRTC

一个普遍的误解是HTML5能够在网页中提供动画效果,这是不对的,动画效果是需要配合JavaScript和CSS。然而静态HTML5配合CSS可以表示出覆杂的排版结构而且原生支援与影片的混合与控制(控制一般由JavaScript执行),因此简单可以把HTML5单位时间的状态理解为动画的关键影格。

XHTML5(XML-serialized HTML5)

XHTML5是对HTML5的XML序列化。XML文档必须被设置为XML互联网文件类型,像application/xhtml+xml或者application/xml。XHTML5要求像XML一样严格的格式化的语法。在XHTML5中,HTML5的<!DOCTYPE HTML>可有可无的。

XHTML5并非XHTML的第5版,没有自己独立的标准规范,而是HTML5的一种序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language,不同于XHTML5。

异常处理

HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的完整规则,让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。

普及率

根据2011年9月30日发布的一份报告,全球排名前100的网站中有34个网站使用HTML5──主要是搜寻引擎与社群网站。2013年8月发布的另一份报告显示,财富美国500强企业中已有多达153家采用HTML5。

HTML 4.01和XHTML 1.x的差异

以下为大略的不同之处,与例子:

文件类型声明(<!DOCTYPE>)仅有一型:<!DOCTYPE HTML>。

新的解析顺序:不再基于SGML。

新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

input元素的新类型:date, email, url等等。

新的属性:ping(用于a与area), charset(用于meta), async(用于script)。

全域属性:id, tabindex, repeat。

新的全域属性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐。且不说谷歌、苹果等业内巨头把它描绘为互联网体验的未来,即便是以不服从标准著称的微软,也向它频频示好, 决心在 Internet Explorer 9 中加入对 HTML5 的大量支持。然而,HTML5的路途真的将一帆风顺么?本文将列举了一些在HTML5发展和普及过程中需要解决的问题。

   什么是HTML5?

   根据维基百科上的解释,HTML5 的前身是 Web Applications 1.0,由 WHATWG 于2004年提出。2007年,它被 W3C 接纳,并于2008年1月22日发布第一份正式草案。

   以下摘录自维基百科的文字介绍了 HTML5 的特点和与 HTML4 的差别:

新应用程序接口(API)
即时二维绘图
定时媒体播放
储存
离线
编辑
拖放
通讯/网络
后退按钮管理
MIME 和协议处理程序时表头登记

   与 HTML 4 的不同之处

新的解析顺序
新的元素:section, video, progress, nav, meter, time, aside, canvas
input 元素的新属性:日期和时间,email, url
新的通用属性:ping, charset, async
全域属性:id, tabindex, repeat
移除元素:center, font, u, strike, s, frameset, frame, applet

   战胜 Flash, HTML5 还需要什么?

   决定胜负的因素很多,在此分为两部分分析。

   一、技术方面

   HTML5 与 Flash 在功能上并不是完全重叠的,比如对于摄像头等计算机硬件的调用,仍然只能使用 Flash 或其他方法实现。但是 HTML5 却引入了一些让 Flash 不得不认真对待的元素。其中最为人所知的和最重要的即为 canvas 和 video 标签。在我看来,其他的新属性跟 Flash 的竞争关系很弱,只有此二者是真真正正要抢 Flash 的饭碗,而且一旦普及,将深刻的改变整个互联网,可谓是 HTML5 的左膀右臂。

   canvas

   在 Flash 流行之前,曾经出现过很多种在网页中实现绘图功能的方法,其中包括著名的Java Applet 。这些方法各有千秋,相互竞争不休。但是在 Macromedia 公司推出 Flash 之后,这场战争很快就结束了。

   为了对抗 Flash,又有很多新的技术被提出,其中就包括现在 Flash 的东家 Adobe 提出的 SVG。然而这没有能够阻止 Flash 迅速地被网民接受。基于 Flash 的动画、游戏等应用几乎是在一夜之间蔓延到了互联网的每个角落。

   而今,新的挑战者出现了,他就是 HTML5 的新标签 canvas。

   canvas 相比 Flash 显然是有其优点的。它不依赖于外部插件、与浏览器渲染引擎紧密结合、节约资源,最重要的是极大的简化了图形和网页中其他元素的交互过程。

   对于 Flash 来说,是 Flash中的元素与网页中其他元素进行交互是要消耗大量时间和资源的,另外在编程上也相当不方便。

而 canvas 本身就是 HTML5 的一个元素,可以像操作普通 HTML 元素一样操作它。开发人员可以将所有的代码整齐地写在一个文件里,降低了维护与更新的难度。

   然而 canvas 也有其缺点:

   其一,开发者不得不编程描绘每一个点和矢量曲线,在旋转缩放时更需要和矩阵变换打交道,这会增加描绘复杂图形的难度。而在 Flash 里,图形显示的 API 被封装在名为“Sprite(显示列表)”的类里,大部分图形元素都继承于此类,开发者可以使用多种工具设计图形,对图形进行旋转放缩只需要简单的调用类 的函数。

   其二,动画的实现存在缺憾。canvas 虽然提供了不同于传统的通过 div 块实现动画的方法,但这种方法仍然非常繁琐。开发者必须在每一帧动画显示时清空画布,然后重画所有元素,这必然导致包含大量元素的场景动画缓慢,只移动少 量元素就要重画整个画布会浪费大量资源。而且创建动画也是一件十分繁琐的事情。相比起来,Flash的实现就方便多了,虽然从最底层来说,动画时仍然需要 重画整个画布,但其被交予 Flash Player 自动处理,无需开发者手动管理。基于字节码的 Flash 在解析的过程中将会比即时编译的 HTML5 和 JavaScript 快速。一般来说,复杂动画将会更流畅。另外,良好封装的图形类和强大的设计工具使得动画的创建非常方便。

   其三,没有提供一套方便的事件体系。开发者也许需要通过捕获鼠标在 canvas 中点击的坐标,判断用户到底点击了什么图形元素。在这个过程中可能要遍历所有的显示元素并判定点是否在图形内,实现起来比较繁琐,更不要说实现事件的冒泡 和递归模型了。虽然今后出现的图形库可以解决这个问题,但这实质上相当于使用 JavaScript 构建了一套事件响应模型,其效率显然不如内建于浏览器的原生事件模型高。在 Flash 中,事件也被良好封装为类,捕获点击等事件自然不在话下,更重要的是提供了判断两个图形是否有交集的事件和函数,这在游戏编程中非常方便。另 外,Flash 的最新版本将会支持多点触摸事件的响应,而 HTML 想要支持这点恐怕要等到 HTML6 了。

   由以上分析我们可以看出,HTML5 需要的几个非常重要的东西:一个强大易用的图形库、硬件加速的图形解析和重绘、一个强大的编 机器(IDE)

   目前已经出现了基于 canvas 实现的游戏引擎。但是从效果上看仍然无法与 Flash 媲美。

WebGL 的提出让我们看到了硬件加速的希望,这将极大的改进图形显示的速度。但是目前它只被少数开发版本的浏览器支持。

   IDE 方面,讽刺的是恰恰是 Adobe 为 Adobe Flash CS5 添加了一个将 Flash 转化为 canvas 的功能。在 JavaScript 方面,鉴于其为非强制类型的编程语言,对其进行代码提示等非常困难,提高编程效率较难。

   如果以上三个问题不能被良好解决,将会限制 canvas 所能实现的效果的丰富度,增加开发的复杂度,从而最终阻碍其普及。

   图为一个用 canvas 实现的绘图应用

   video

   video 标签可能是 Adobe 最反对的东西了,它极有可能打破 Flash 在在线视频领域的垄断地位。

   但目前的情况是作为 video 内容的视频存在编码问题,Apple 和微软所支持的 不是开放标准,浏览器厂商必须为其付费。因此,作为三大浏览器之一的火狐浏览器拒绝支持此编码格式。谷歌虽然也收购了一套优质的编码技术,但是目前没有迹 象表明谷歌会开放这个技术标准。

   根据最近的统计,虽然 Google Chrome 浏览器和 Apple Safari 浏览器增长很快,但浏览器市场还是主要被火狐和 IE 所统治。如果火狐坚持不支持 编码格式,video 标签的推广将会十分困难。

   所以,HTML5 需要一个既开放又优质的视频编码标准

   图为 video 标签 的演示

   二、商业方面

   团结

   要让微软、谷歌、苹果这三个在很多方面存在竞争关系的业界巨头团结一心地支持同一套标准是很困难的。

   苹果方面对 Flash 痛下杀手,微软方面则极少参与这场论战。至于谷歌则在支持 HTML5 的同时在 Android 中加入了 Flash 支持,甚至存在将 Flash 纳入 Chorme 安全沙箱的计划。在这种情况下,如果 Adobe 能够良好利用三大巨头之间的分歧并加以运作,HTML5 的前景堪忧。

   即便 Adobe 没有那样的智慧与能力挑拨三大巨头之间的关系,三大巨头自己就可能葬送 HTML5 的未来。前车之鉴就是大名鼎鼎的 OpenGL。这一标准成立之初的联盟成员几乎可以用豪华来形容,结果因为各个成员之间为了自己的利益相互争吵,使得OpenGL的发展速度远不及 Direct3D,直至到目前这样游戏市场几乎被竞争对手占据、应用范围局限在专业领域的情况。

   用户的接受

   无论各大厂商如何宣传,用户的接受才是最后的检验标准。目前来看 HTML5 在普通桌面领域可能的作为不大,与 Flash 的关系必然是长期并存。原因在于用户并不在意页面到底使用的是什么技术,而更关心最后的效果怎么样。HTML5 的 canvas 若要达到 Flash 实现的相同效果所需要的难度更大,这样限制了中小网站在网页里使用 canvas 的积极性,如果 canvas 不能普及,就相当于 HTML5 断了一条腿,而 video 标签的编码问题再得不到解决,HTML5 真的就没办法和 Flash 竞争了。

   大胆的预测

   在最后,我将对 HTML5 和 Flash 的这场世纪之战做出我自己的预测。

   首先用一个比喻描述目前的情况:

   谷歌、微软、苹果、Adobe 四家围在一起打牌,其中 Adobe 是庄家,手中的牌最多最好。苹果、微软都很想把 Adobe 从庄家的位置上拖下来,但是又不愿意合作。谷歌与 Adobe 关系暧昧,但是也有自己的打算。

   在这场牌局中,Adobe 几乎是立于不败之地的,从目前来看 Flash 被 HTML5 完全取代的可能不大,原因在于Flash 已经占领了绝大部分传统桌面终端的市场,其地位几乎无法撼动,即便 Flash 做得不够好,但是只要没到很不好的地步,还是无法被超越。虽然传统桌面收到了新兴的移动终端的挑战,但是这一过程将发展得比 Flash 和 HTML5 之间的竞争更缓慢。Adobe 控制着 Photoshop、Dreamweaver 和 Fireworks 等知名软件,制作网页即便可以缺少 Flash 却无法缺少    Photoshop,即便是编制全 HTML5 的网页,Dreamweaver 依然是首选的网页制作利器,制作 canvas 也可以使用 Flash CS5 新加入的生成 canvas 的功能。

   图为 Adobe Flash CS5

   广受诟病的 Flash Player 并不能给 Adobe 带来直接的利润,它的意义在于将富媒体应用的市场和标准掌握在手中。用于制作 Flash 的编辑器才是 Adobe 真正的利润来源。如果在 HTML5 的时代,开发者仍然不得不选择 Adobe 的产品来制作基于 canvas 的交互页面,那么又何必需要 Flash Player 的存在呢?Adobe 更是省下了维护一个复杂系统的费用。

   至于微软,他内心是非常纠结的,他手里有 Internet Explorer 这张不知道是好是坏的牌,原因在于由 Internet Explorer 6 占领的浏览器市场份额仍然没有被有效释放,新版本的 Internet Explorer 不得不跟自己的前辈竞争。另外,微软也急于推广自己的 SliverLight ,这一产品与 Flash 和 HTML5 都是竞争关系。支持 HTML5 或多或少会对 SliverLight 的推广有所打击。所以微软必然不会全力支持 HTML5,而是只将它作为 SliverLight 的补充。

   苹果的算盘打得很响,他要从移动终端领域着手,逐步渗透到桌面领域。iPhone 是第一步,也是相当成功的一步,它的存在说明智能手机领域并不需要 Flash 的存在,事实上,Flash 在这一领域表现的确很差。但是真正关键的是 iPad。iPad无论是屏幕大小还是操作体验都更接近与普通桌面电脑,如果平板电脑被证明不需要 Flash 的存在,那么桌面电脑为什么不可以?如果大量用户通过使用平板电脑而习惯了没有 Flash 的互联网体验,那么 Flash 就真的没有未来了。iPad发售之后 Adobe 与苹果之间争论的升级,从侧面证实苹果和 Adobe 都看到了平板电脑将在这场战争中发挥的作用。

   但是苹果真的能如愿以偿么?苹果的产品即便销售很好,也不可能做到像微软的产品这样普及。原因在于苹果的产品文化就在于提供高质量和高品位的体验, 而这种体验伴随着高价。必然只有少数人能够用得起苹果,必然只有使用苹果是能够成为一种身份和品味的象征,苹果的产品才会有这么大的吸引力。难道除了苹果 就没有其他厂商可以提供同样的技术了么?难道微软不能像苹果一样以用户体验为先么?显然不是,重要的原因在于微软所要提供的是一个给所有人使用的产品,这 一产品要有广泛性,要有继承性,而且不能太昂贵。所以微软在用户体验方面改变的动力不足,微软试图在 Visita 里极大的改变用户体验的方式,原来使用 XP 非常熟练的用户到了 Visita 里就变得不知所措了。结果显而易见。

   事实上,苹果从一开始就不打算让所有人都用上苹果,只要有少部分人愿意掏钱购买,它就能赚足够的钱。

   到了平板电脑这里也是一样,iPad 不可能独自积累到足够大的用户群,以至于可以挑战传统桌面终端。更具性价比的其他厂商的产品将会让更多人享受到平板电脑。而且这些平板电脑很可能会支持 Flash。这样的话,利用新兴终端,改变用户对 Flash 的依赖的计划就会失败。

   谷歌方面,这场战争的胜负对谷歌的影响都不大,只要能把用户留在页面上,它并不在意到底使用的是 HTML5 还是 Flash。然而他却最终胜负有着非同寻常的影响力。谷歌除了 YouTube 之外,很少在自己的产品中使用 Flash。也许谷歌认为一个开放的标准更容易控制。对于 Flash 这样封闭的产品,虽然好用,但是谷歌很难对其发展方向有发言权。而今,Chrome 浏览器的迅猛发展日益增加了谷歌在 HTML 新标准中的发言权。但是这并不意味着谷歌会完全抛弃 Flash。

   Flash 可以作为谷歌牵制苹果的重要工具,作为 Android 挑战 iPhone 的筹码。谷歌正筹划将 Flash 纳入 Chrome OS 的安全沙箱。如果成功,Flash 饱受诟病的耗电问题、安全问题都能得到较好的解决。

   由此得到结论,Flash 气数未尽,仍将长期统治互联网富媒体领域的市场。在移动领域的发展将取决于谷歌的态度,但可以预见的是将会有很多困难。

   至于 HTML5,预计在1-3年内会达到相对普及的程度,但是不会取代 Flash。他们之间甚至是可以和谐相处,取长补短的。然而不要对 HTML5 的发展速度抱有太大希望,毕竟业内巨头之间矛盾重重,现有标准能够被各大浏览器无差别支持就已经相当困难了,想要加入任何新功能都要很久才会被广泛支持。 这样缓慢的发展速度如何能够体现出强大的竞争力,我们拭目以待。