整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML5 是第五個且是當前的 HTML 版本，它是用于在萬維網(wǎng)上構建和呈現(xiàn)內(nèi)容的標記語言。本文將幫助讀者了解它。 -- Palak Shah
本文導航
-新標簽和元素 …… 08%
-HTML5 的高級功能 …… 16%
-地理位置 …… 16%
-網(wǎng)絡存儲 …… 33%
-應用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%
-HTML5 工具 …… 78%
編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/作者： Palak Shah
譯者： geekpi
HTML5 是第五個且是當前的 HTML 版本，它是用于在萬維網(wǎng)上構建和呈現(xiàn)內(nèi)容的標記語言。本文將幫助讀者了解它。
HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來。它是一個更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動態(tài)。它是為所有人提供更好的 Web 體驗而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動態(tài)和交互。
HTML5 的新功能是：
新標簽，如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲
新的表單控件，如日歷、日期和時間
新媒體功能
地理位置
HTML5 還不是正式標準（LCTT 譯注：HTML5 已于 2014 年成為“推薦標準”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。
語義化元素： 圖 1 展示了一些有用的語義化元素。
表單元素： HTML5 中的表單元素如圖 2 所示。
圖形元素： HTML5 中的圖形元素如圖 3 所示。
媒體元素： HTML5 中的新媒體元素如圖 4 所示。
圖 1：語義化元素
圖 2：表單元素
圖 3：圖形元素
圖 4：媒體元素
地理位置這是一個 HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是：
公共交通網(wǎng)站
出租車及其他運輸網(wǎng)站
電子商務網(wǎng)站計算運費
旅行社網(wǎng)站
房地產(chǎn)網(wǎng)站
在附近播放的電影的電影院網(wǎng)站
在線游戲
網(wǎng)站首頁提供本地標題和天氣
工作職位可以自動計算通勤時間
工作原理： 地理位置通過掃描位置信息的常見源進行工作，其中包括以下：
全球定位系統(tǒng)（GPS）是最準確的
網(wǎng)絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入
該 API 提供了非常方便的函數(shù)來檢測瀏覽器中的地理位置支持：
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。
語法是：
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation：定義了檢索位置信息的回調方法。
ErrorHandler（可選）：定義了在處理異步調用時發(fā)生錯誤時調用的回調方法。
options （可選）： 定義了一組用于檢索位置信息的選項。
我們可以通過兩種方式向用戶提供位置信息：測地和民用。
描述位置的測地方式直接指向緯度和經(jīng)度。
位置信息的民用表示法是人類可讀的且容易理解。
如下表 1 所示，每個屬性/參數(shù)都具有測地和民用表示。
圖 5 包含了一個位置對象返回的屬性集。
圖5：位置對象屬性
網(wǎng)絡存儲在 HTML 中，為了在本機存儲用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲，網(wǎng)站利用它在本機上存儲用戶數(shù)據(jù)。
與 Cookie 相比，Web 存儲的優(yōu)點是：
更安全
更快
存儲更多的數(shù)據(jù)
存儲的數(shù)據(jù)不會隨每個服務器請求一起發(fā)送。只有在被要求時才包括在內(nèi)。這是 HTML5 Web 存儲超過 Cookie 的一大優(yōu)勢。
有兩種類型的 Web 存儲對象：
本地 - 存儲沒有到期日期的數(shù)據(jù)。
會話 - 僅存儲一個會話的數(shù)據(jù)。
如何工作： localStorage 和 sessionStorage 對象創(chuàng)建一個 key=value 對。比如： key="Name"， value="Palak"。
這些存儲為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 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（截止至此時）。
應用緩存的優(yōu)點是：
網(wǎng)頁瀏覽可以脫機
頁面加載速度更快
服務器負載更小
cache manifest 是一個簡單的文本文件，其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中，如下所示：
<html manifest="test.appcache">...
</html>
它應該在你要緩存的所有頁面上。
緩存的應用程序頁面將一直保留，除非：
用戶清除它們
manifest 被修改
緩存更新
視頻在 HTML5 發(fā)布之前，沒有統(tǒng)一的標準來顯示網(wǎng)頁上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁上顯示視頻的標準方式。
目前，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 發(fā)布之前，在網(wǎng)頁上播放音頻沒有統(tǒng)一的標準。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。
目前，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）要在網(wǎng)頁上創(chuàng)建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：
<canvas id="myCanvas" width="200" height="100"></canvas>
畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現(xiàn)繪制。所有繪畫應在 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 所示。
你可以繪制許多對象，如弧、圓、線/垂直梯度等。
為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設計人員都應該使用 HTML5 工具，當需要設置工作流/網(wǎng)站或執(zhí)行重復任務時，這些工具非常有幫助。它們提高了網(wǎng)頁設計的可用性。
以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。
HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動畫等。
Liveweave： 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用，并為一些代碼提供自動完成功能，這使得開發(fā)和測試更快更容易。
Font dragr： 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。
HTML5 Please： 可以讓我們找到與 HTML5 相關的任何內(nèi)容。如果你想知道如何使用任何一個功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表，語法，以及如何使用元素的一般建議等。
Modernizr： 這是一個開源工具，用于給訪問者瀏覽器提供最佳體驗。使用此工具，你可以檢測訪問者的瀏覽器是否支持 HTML5 功能，并加載相應的腳本。
Adobe Edge Animate： 這是必須處理交互式 HTML 動畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡和廣告領域。此工具允許用戶創(chuàng)建無瑕疵的動畫，可以跨多個設備運行。
Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應該使用此工具。它使視頻看起來不錯，并且是網(wǎng)站的一部分。
The W3 Validator： W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標記的有效性。要測試任何網(wǎng)站的標記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯誤和警告。
HTML5 Reset： 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個良好的網(wǎng)絡體驗。
Palak Shah
作者是高級軟件工程師。她喜歡探索新技術，學習創(chuàng)新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯(lián)系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者：Palak Shah[2] 譯者：geekpi 校對：wxy
本文由 LCTT 原創(chuàng)編譯，Linux中國 榮譽推出
TML5是HTML最新的修訂版本，由萬維網(wǎng)聯(lián)盟（W3C）于2014年10月完成標準制定。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在網(wǎng)際網(wǎng)路應用迅速發(fā)展的時候，使網(wǎng)路標準達到符合當代的網(wǎng)路需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術組合。它希望能夠減少網(wǎng)頁瀏覽器對于需要外掛程式的豐富性網(wǎng)路應用服務（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效加強網(wǎng)路應用的標準集。
HTML5添加了許多新的語法特征，其中包括<video>、<audio>和<canvas>元素，同時整合了SVG內(nèi)容。這些元素是為了更容易的在網(wǎng)頁中添加和處理多媒體和圖片內(nèi)容而添加的。其它新的元素如<section>、<article>、<header>和<nav>則是為了豐富文檔的數(shù)據(jù)內(nèi)容。新的屬性的添加也是為了同樣的目的。同時也有一些屬性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定義或標準化了。同時APIs和DOM已經(jīng)成為HTML5中的基礎部分了。HTML5還定義了處理非法文檔的具體細節(jié)，使得所有瀏覽器和客戶端程序能夠一致地處理語法錯誤。
發(fā)展歷史
網(wǎng)頁超文本技術工作小組（WHATWG）于2004年開始制定新標準。在當時，HTML 4.01自2000年來沒有更新，以及全球資訊網(wǎng)協(xié)會（W3C）正在將未來的發(fā)展重點放在XHTML 2.0。2009年，W3C允許XHTML 2.0工作組章程結束過期并且決定不再續(xù)訂。W3C與WHATWG合作共同為發(fā)展HTML5而努力。
2004年6月，Mozilla基金會和Opera軟體公司在全球資訊網(wǎng)協(xié)會（W3C）所主辦的研討會上提出了一份立場文件，其重點是開發(fā)與現(xiàn)有瀏覽器向后相容的技術，包括Web Forms 2.0最初草案規(guī)范。研討會最后以——8票贊成，14票反對——否決繼續(xù)對HTML的開發(fā)工作。這引起一些人的不滿，在研討會之后，網(wǎng)頁超文本技術工作小組（WHATWG）立即根據(jù)該立場文件成立，第二個草案，Web Applications 1.0也公布了。后來這兩種規(guī)范合并形成HTML5。2007年，獲得W3C接納，并成立了新的HTML工作團隊。2008年1月22日，第一份公開工作草案發(fā)布。
盡管HTML5已經(jīng)在網(wǎng)絡開發(fā)人員中非常出名了，但是它成為主流媒體的一個話題是在2010年的4月，當時蘋果公司的CEO喬布斯發(fā)表一篇題為“對Flash的思考”的文章，指出隨著HTML5的發(fā)展，觀看影片或其它內(nèi)容時，Adobe Flash將不再是必須的。這引發(fā)了開發(fā)人員間的爭論，包括HTML5雖然提供了加強的功能，但開發(fā)人員必須考慮到不同瀏覽器對標準不同部分的支持程度的不同，以及HTML5和Flash間的功能差異。
特點
標記
HTML5提供了一些新的元素和屬性，反映典型的現(xiàn)代用法網(wǎng)站。其中有些是技術上類似<div>和<span>標簽，但有一定含義，例如<nav>（網(wǎng)站導航塊）和<footer>。這種標簽將有利于搜索引擎的索引整理、小螢幕裝置和視障人士使用。同時為其他瀏覽要素提供了新的功能，通過一個標準接口，如<audio>和<video>標記。一些過時的HTML 4.01標記將取消，其中包括純粹用作顯示效果的標記，如<font>和<center>，因為它們已經(jīng)被CSS取代。還有一些透過DOM的網(wǎng)絡行為。
盡管和SGML在標記上的相似性，HTML5的句法并不再基于它了，而是被設計成向后兼容對老版本的HTML的解析。它有一個新的開始列看起來就像SGML的文檔類型聲明，<!DOCTYPE HTML>，這會觸發(fā)和標準兼容的渲染模式。在2009年1月5日，HTML5添加了Web Form 2.0的內(nèi)容，HTML5開始發(fā)展起來。
新的API
HTML5相關APIs
除了原先的DOM接口，HTML5增加了更多樣化的應用程序接口（API）：
Canvas
定時媒體播放
離線
可編輯內(nèi)容
拖放
歷史
MIME和協(xié)議處理程序時表頭登記
微數(shù)據(jù)
網(wǎng)路訊息
網(wǎng)路存儲
以上技術盡管是WHATWG HTML說明文檔的內(nèi)容，但并沒有全部包括在W3C HTML5的說明文檔里。一些相關的技術，像下面所列的，并沒有包括在這2份文檔中的任何一份中。W3C給這些技術單獨出版了說明文檔。
地理位置
網(wǎng)頁SQL數(shù)據(jù)庫 ─ 本地SQL數(shù)據(jù)庫（不再維護）
IndexedDB
文件─ 處理文件上傳和操縱文件
目錄和文件系統(tǒng) ─ 這個API是為了滿足客戶端在沒有好的數(shù)據(jù)庫支持情況下存儲要求
文件寫入 ─ 從網(wǎng)絡應用程序向文件里寫內(nèi)容
網(wǎng)路音頻
ClassList
網(wǎng)路加密
WebRTC
一個普遍的誤解是HTML5能夠在網(wǎng)頁中提供動畫效果，這是不對的，動畫效果是需要配合JavaScript和CSS。然而靜態(tài)HTML5配合CSS可以表示出覆雜的排版結構而且原生支援與影片的混合與控制（控制一般由JavaScript執(zhí)行），因此簡單可以把HTML5單位時間的狀態(tài)理解為動畫的關鍵影格。
XHTML5（XML-serialized HTML5）
XHTML5是對HTML5的XML序列化。XML文檔必須被設置為XML互聯(lián)網(wǎng)文件類型，像application/xhtml+xml或者application/xml。XHTML5要求像XML一樣嚴格的格式化的語法。在XHTML5中，HTML5的<!DOCTYPE HTML>可有可無的。
XHTML5并非XHTML的第5版，沒有自己獨立的標準規(guī)范，而是HTML5的一種序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language，不同于XHTML5。
異常處理
HTML5在設計時保證舊的瀏覽器能夠安全地忽略掉新的HTML5代碼。與HTML4.01相比，HTML5給出了解析的完整規(guī)則，讓不同的瀏覽器即使在發(fā)生語法錯誤時也能返回完全相同的結果。
普及率
根據(jù)2011年9月30日發(fā)布的一份報告，全球排名前100的網(wǎng)站中有34個網(wǎng)站使用HTML5──主要是搜尋引擎與社群網(wǎng)站。2013年8月發(fā)布的另一份報告顯示，財富美國500強企業(yè)中已有多達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 可謂如眾星捧月一般，受到許多業(yè)內(nèi)巨頭的青睞。且不說谷歌、蘋果等業(yè)內(nèi)巨頭把它描繪為互聯(lián)網(wǎng)體驗的未來，即便是以不服從標準著稱的微軟，也向它頻頻示好， 決心在 Internet Explorer 9 中加入對 HTML5 的大量支持。然而，HTML5的路途真的將一帆風順么？本文將列舉了一些在HTML5發(fā)展和普及過程中需要解決的問題。
什么是HTML5？
根據(jù)維基百科上的解釋，HTML5 的前身是 Web Applications 1.0，由 WHATWG 于2004年提出。2007年，它被 W3C 接納，并于2008年1月22日發(fā)布第一份正式草案。
以下摘錄自維基百科的文字介紹了 HTML5 的特點和與 HTML4 的差別：
新應用程序接口（API）
即時二維繪圖
定時媒體播放
儲存
離線
編輯
拖放
通訊／網(wǎng)絡
后退按鈕管理
MIME 和協(xié)議處理程序時表頭登記
與 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
戰(zhàn)勝 Flash, HTML5 還需要什么？
決定勝負的因素很多，在此分為兩部分分析。
一、技術方面
HTML5 與 Flash 在功能上并不是完全重疊的，比如對于攝像頭等計算機硬件的調用，仍然只能使用 Flash 或其他方法實現(xiàn)。但是 HTML5 卻引入了一些讓 Flash 不得不認真對待的元素。其中最為人所知的和最重要的即為 canvas 和 video 標簽。在我看來，其他的新屬性跟 Flash 的競爭關系很弱，只有此二者是真真正正要搶 Flash 的飯碗，而且一旦普及，將深刻的改變整個互聯(lián)網(wǎng)，可謂是 HTML5 的左膀右臂。
canvas
在 Flash 流行之前，曾經(jīng)出現(xiàn)過很多種在網(wǎng)頁中實現(xiàn)繪圖功能的方法，其中包括著名的Java Applet 。這些方法各有千秋，相互競爭不休。但是在 Macromedia 公司推出 Flash 之后，這場戰(zhàn)爭很快就結束了。
為了對抗 Flash，又有很多新的技術被提出，其中就包括現(xiàn)在 Flash 的東家 Adobe 提出的 SVG。然而這沒有能夠阻止 Flash 迅速地被網(wǎng)民接受。基于 Flash 的動畫、游戲等應用幾乎是在一夜之間蔓延到了互聯(lián)網(wǎng)的每個角落。
而今，新的挑戰(zhàn)者出現(xiàn)了，他就是 HTML5 的新標簽 canvas。
canvas 相比 Flash 顯然是有其優(yōu)點的。它不依賴于外部插件、與瀏覽器渲染引擎緊密結合、節(jié)約資源，最重要的是極大的簡化了圖形和網(wǎng)頁中其他元素的交互過程。
對于 Flash 來說，是 Flash中的元素與網(wǎng)頁中其他元素進行交互是要消耗大量時間和資源的，另外在編程上也相當不方便。
而 canvas 本身就是 HTML5 的一個元素，可以像操作普通 HTML 元素一樣操作它。開發(fā)人員可以將所有的代碼整齊地寫在一個文件里，降低了維護與更新的難度。
然而 canvas 也有其缺點:
其一，開發(fā)者不得不編程描繪每一個點和矢量曲線，在旋轉縮放時更需要和矩陣變換打交道，這會增加描繪復雜圖形的難度。而在 Flash 里，圖形顯示的 API 被封裝在名為“Sprite(顯示列表)”的類里，大部分圖形元素都繼承于此類，開發(fā)者可以使用多種工具設計圖形，對圖形進行旋轉放縮只需要簡單的調用類 的函數(shù)。
其二，動畫的實現(xiàn)存在缺憾。canvas 雖然提供了不同于傳統(tǒng)的通過 div 塊實現(xiàn)動畫的方法，但這種方法仍然非常繁瑣。開發(fā)者必須在每一幀動畫顯示時清空畫布，然后重畫所有元素，這必然導致包含大量元素的場景動畫緩慢，只移動少 量元素就要重畫整個畫布會浪費大量資源。而且創(chuàng)建動畫也是一件十分繁瑣的事情。相比起來，F(xiàn)lash的實現(xiàn)就方便多了，雖然從最底層來說，動畫時仍然需要 重畫整個畫布，但其被交予 Flash Player 自動處理，無需開發(fā)者手動管理。基于字節(jié)碼的 Flash 在解析的過程中將會比即時編譯的 HTML5 和 JavaScript 快速。一般來說，復雜動畫將會更流暢。另外，良好封裝的圖形類和強大的設計工具使得動畫的創(chuàng)建非常方便。
其三，沒有提供一套方便的事件體系。開發(fā)者也許需要通過捕獲鼠標在 canvas 中點擊的坐標，判斷用戶到底點擊了什么圖形元素。在這個過程中可能要遍歷所有的顯示元素并判定點是否在圖形內(nèi)，實現(xiàn)起來比較繁瑣，更不要說實現(xiàn)事件的冒泡 和遞歸模型了。雖然今后出現(xiàn)的圖形庫可以解決這個問題，但這實質上相當于使用 JavaScript 構建了一套事件響應模型，其效率顯然不如內(nèi)建于瀏覽器的原生事件模型高。在 Flash 中，事件也被良好封裝為類，捕獲點擊等事件自然不在話下，更重要的是提供了判斷兩個圖形是否有交集的事件和函數(shù)，這在游戲編程中非常方便。另 外，F(xiàn)lash 的最新版本將會支持多點觸摸事件的響應，而 HTML 想要支持這點恐怕要等到 HTML6 了。
由以上分析我們可以看出，HTML5 需要的幾個非常重要的東西：一個強大易用的圖形庫、硬件加速的圖形解析和重繪、一個強大的編 機器（IDE）。
目前已經(jīng)出現(xiàn)了基于 canvas 實現(xiàn)的游戲引擎。但是從效果上看仍然無法與 Flash 媲美。
WebGL 的提出讓我們看到了硬件加速的希望，這將極大的改進圖形顯示的速度。但是目前它只被少數(shù)開發(fā)版本的瀏覽器支持。
IDE 方面，諷刺的是恰恰是 Adobe 為 Adobe Flash CS5 添加了一個將 Flash 轉化為 canvas 的功能。在 JavaScript 方面，鑒于其為非強制類型的編程語言，對其進行代碼提示等非常困難，提高編程效率較難。
如果以上三個問題不能被良好解決，將會限制 canvas 所能實現(xiàn)的效果的豐富度，增加開發(fā)的復雜度，從而最終阻礙其普及。
圖為一個用 canvas 實現(xiàn)的繪圖應用
video
video 標簽可能是 Adobe 最反對的東西了，它極有可能打破 Flash 在在線視頻領域的壟斷地位。
但目前的情況是作為 video 內(nèi)容的視頻存在編碼問題，Apple 和微軟所支持的 不是開放標準，瀏覽器廠商必須為其付費。因此，作為三大瀏覽器之一的火狐瀏覽器拒絕支持此編碼格式。谷歌雖然也收購了一套優(yōu)質的編碼技術，但是目前沒有跡 象表明谷歌會開放這個技術標準。
根據(jù)最近的統(tǒng)計，雖然 Google Chrome 瀏覽器和 Apple Safari 瀏覽器增長很快，但瀏覽器市場還是主要被火狐和 IE 所統(tǒng)治。如果火狐堅持不支持 編碼格式，video 標簽的推廣將會十分困難。
所以，HTML5 需要一個既開放又優(yōu)質的視頻編碼標準。
圖為 video 標簽 的演示
二、商業(yè)方面
團結
要讓微軟、谷歌、蘋果這三個在很多方面存在競爭關系的業(yè)界巨頭團結一心地支持同一套標準是很困難的。
蘋果方面對 Flash 痛下殺手，微軟方面則極少參與這場論戰(zhàn)。至于谷歌則在支持 HTML5 的同時在 Android 中加入了 Flash 支持，甚至存在將 Flash 納入 Chorme 安全沙箱的計劃。在這種情況下，如果 Adobe 能夠良好利用三大巨頭之間的分歧并加以運作，HTML5 的前景堪憂。
即便 Adobe 沒有那樣的智慧與能力挑撥三大巨頭之間的關系，三大巨頭自己就可能葬送 HTML5 的未來。前車之鑒就是大名鼎鼎的 OpenGL。這一標準成立之初的聯(lián)盟成員幾乎可以用豪華來形容，結果因為各個成員之間為了自己的利益相互爭吵，使得OpenGL的發(fā)展速度遠不及 Direct3D，直至到目前這樣游戲市場幾乎被競爭對手占據(jù)、應用范圍局限在專業(yè)領域的情況。
用戶的接受
無論各大廠商如何宣傳，用戶的接受才是最后的檢驗標準。目前來看 HTML5 在普通桌面領域可能的作為不大，與 Flash 的關系必然是長期并存。原因在于用戶并不在意頁面到底使用的是什么技術，而更關心最后的效果怎么樣。HTML5 的 canvas 若要達到 Flash 實現(xiàn)的相同效果所需要的難度更大，這樣限制了中小網(wǎng)站在網(wǎng)頁里使用 canvas 的積極性，如果 canvas 不能普及，就相當于 HTML5 斷了一條腿，而 video 標簽的編碼問題再得不到解決，HTML5 真的就沒辦法和 Flash 競爭了。
大膽的預測
在最后，我將對 HTML5 和 Flash 的這場世紀之戰(zhàn)做出我自己的預測。
首先用一個比喻描述目前的情況：
谷歌、微軟、蘋果、Adobe 四家圍在一起打牌，其中 Adobe 是莊家，手中的牌最多最好。蘋果、微軟都很想把 Adobe 從莊家的位置上拖下來，但是又不愿意合作。谷歌與 Adobe 關系曖昧，但是也有自己的打算。
在這場牌局中，Adobe 幾乎是立于不敗之地的，從目前來看 Flash 被 HTML5 完全取代的可能不大，原因在于Flash 已經(jīng)占領了絕大部分傳統(tǒng)桌面終端的市場，其地位幾乎無法撼動，即便 Flash 做得不夠好，但是只要沒到很不好的地步，還是無法被超越。雖然傳統(tǒng)桌面收到了新興的移動終端的挑戰(zhàn)，但是這一過程將發(fā)展得比 Flash 和 HTML5 之間的競爭更緩慢。Adobe 控制著 Photoshop、Dreamweaver 和 Fireworks 等知名軟件，制作網(wǎng)頁即便可以缺少 Flash 卻無法缺少 Photoshop，即便是編制全 HTML5 的網(wǎng)頁，Dreamweaver 依然是首選的網(wǎng)頁制作利器，制作 canvas 也可以使用 Flash CS5 新加入的生成 canvas 的功能。
圖為 Adobe Flash CS5
廣受詬病的 Flash Player 并不能給 Adobe 帶來直接的利潤，它的意義在于將富媒體應用的市場和標準掌握在手中。用于制作 Flash 的編輯器才是 Adobe 真正的利潤來源。如果在 HTML5 的時代，開發(fā)者仍然不得不選擇 Adobe 的產(chǎn)品來制作基于 canvas 的交互頁面，那么又何必需要 Flash Player 的存在呢？Adobe 更是省下了維護一個復雜系統(tǒng)的費用。
至于微軟，他內(nèi)心是非常糾結的，他手里有 Internet Explorer 這張不知道是好是壞的牌，原因在于由 Internet Explorer 6 占領的瀏覽器市場份額仍然沒有被有效釋放，新版本的 Internet Explorer 不得不跟自己的前輩競爭。另外，微軟也急于推廣自己的 SliverLight ，這一產(chǎn)品與 Flash 和 HTML5 都是競爭關系。支持 HTML5 或多或少會對 SliverLight 的推廣有所打擊。所以微軟必然不會全力支持 HTML5，而是只將它作為 SliverLight 的補充。
蘋果的算盤打得很響，他要從移動終端領域著手，逐步滲透到桌面領域。iPhone 是第一步，也是相當成功的一步，它的存在說明智能手機領域并不需要 Flash 的存在，事實上，F(xiàn)lash 在這一領域表現(xiàn)的確很差。但是真正關鍵的是 iPad。iPad無論是屏幕大小還是操作體驗都更接近與普通桌面電腦,如果平板電腦被證明不需要 Flash 的存在，那么桌面電腦為什么不可以？如果大量用戶通過使用平板電腦而習慣了沒有 Flash 的互聯(lián)網(wǎng)體驗，那么 Flash 就真的沒有未來了。iPad發(fā)售之后 Adobe 與蘋果之間爭論的升級，從側面證實蘋果和 Adobe 都看到了平板電腦將在這場戰(zhàn)爭中發(fā)揮的作用。
但是蘋果真的能如愿以償么？蘋果的產(chǎn)品即便銷售很好，也不可能做到像微軟的產(chǎn)品這樣普及。原因在于蘋果的產(chǎn)品文化就在于提供高質量和高品位的體驗， 而這種體驗伴隨著高價。必然只有少數(shù)人能夠用得起蘋果，必然只有使用蘋果是能夠成為一種身份和品味的象征，蘋果的產(chǎn)品才會有這么大的吸引力。難道除了蘋果 就沒有其他廠商可以提供同樣的技術了么？難道微軟不能像蘋果一樣以用戶體驗為先么？顯然不是，重要的原因在于微軟所要提供的是一個給所有人使用的產(chǎn)品，這 一產(chǎn)品要有廣泛性，要有繼承性，而且不能太昂貴。所以微軟在用戶體驗方面改變的動力不足，微軟試圖在 Visita 里極大的改變用戶體驗的方式，原來使用 XP 非常熟練的用戶到了 Visita 里就變得不知所措了。結果顯而易見。
事實上，蘋果從一開始就不打算讓所有人都用上蘋果，只要有少部分人愿意掏錢購買，它就能賺足夠的錢。
到了平板電腦這里也是一樣，iPad 不可能獨自積累到足夠大的用戶群，以至于可以挑戰(zhàn)傳統(tǒng)桌面終端。更具性價比的其他廠商的產(chǎn)品將會讓更多人享受到平板電腦。而且這些平板電腦很可能會支持 Flash。這樣的話，利用新興終端，改變用戶對 Flash 的依賴的計劃就會失敗。
谷歌方面，這場戰(zhàn)爭的勝負對谷歌的影響都不大，只要能把用戶留在頁面上，它并不在意到底使用的是 HTML5 還是 Flash。然而他卻最終勝負有著非同尋常的影響力。谷歌除了 YouTube 之外，很少在自己的產(chǎn)品中使用 Flash。也許谷歌認為一個開放的標準更容易控制。對于 Flash 這樣封閉的產(chǎn)品，雖然好用，但是谷歌很難對其發(fā)展方向有發(fā)言權。而今，Chrome 瀏覽器的迅猛發(fā)展日益增加了谷歌在 HTML 新標準中的發(fā)言權。但是這并不意味著谷歌會完全拋棄 Flash。
Flash 可以作為谷歌牽制蘋果的重要工具，作為 Android 挑戰(zhàn) iPhone 的籌碼。谷歌正籌劃將 Flash 納入 Chrome OS 的安全沙箱。如果成功，F(xiàn)lash 飽受詬病的耗電問題、安全問題都能得到較好的解決。
由此得到結論，F(xiàn)lash 氣數(shù)未盡，仍將長期統(tǒng)治互聯(lián)網(wǎng)富媒體領域的市場。在移動領域的發(fā)展將取決于谷歌的態(tài)度，但可以預見的是將會有很多困難。
至于 HTML5，預計在1-3年內(nèi)會達到相對普及的程度，但是不會取代 Flash。他們之間甚至是可以和諧相處，取長補短的。然而不要對 HTML5 的發(fā)展速度抱有太大希望，畢竟業(yè)內(nèi)巨頭之間矛盾重重，現(xiàn)有標準能夠被各大瀏覽器無差別支持就已經(jīng)相當困難了，想要加入任何新功能都要很久才會被廣泛支持。 這樣緩慢的發(fā)展速度如何能夠體現(xiàn)出強大的競爭力，我們拭目以待。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
