今，HTML5 可謂如眾星捧月一般，受到許多業(yè)內(nèi)巨頭的青睞。且不說谷歌、蘋果等業(yè)內(nèi)巨頭把它描繪為互聯(lián)網(wǎng)體驗(yàn)的未來，即便是以不服從標(biāo)準(zhǔn)著稱的微軟，也向它頻頻示好， 決心在 Internet Explorer 9 中加入對 HTML5 的大量支持。然而，HTML5的路途真的將一帆風(fēng)順么？本文將列舉了一些在HTML5發(fā)展和普及過程中需要解決的問題。

　　 什么是HTML5？

　　 根據(jù)維基百科上的解釋，HTML5 的前身是 Web Applications 1.0，由 WHATWG 于2004年提出。2007年，它被 W3C 接納，并于2008年1月22日發(fā)布第一份正式草案。

　　 以下摘錄自維基百科的文字介紹了 HTML5 的特點(diǎn)和與 HTML4 的差別：

新應(yīng)用程序接口（API）
即時(shí)二維繪圖
定時(shí)媒體播放
儲(chǔ)存
離線
編輯
拖放
通訊／網(wǎng)絡(luò)
后退按鈕管理
MIME 和協(xié)議處理程序時(shí)表頭登記

　　 與 HTML 4 的不同之處

新的解析順序
新的元素：section, video, progress, nav, meter, time, aside, canvas
input 元素的新屬性：日期和時(shí)間，email, url
新的通用屬性：ping, charset, async
全域?qū)傩裕篿d, tabindex, repeat
移除元素：center, font, u, strike, s, frameset, frame, applet

　　 戰(zhàn)勝 Flash, HTML5 還需要什么？

　　 決定勝負(fù)的因素很多，在此分為兩部分分析。

　　 一、技術(shù)方面

　　 HTML5 與 Flash 在功能上并不是完全重疊的，比如對于攝像頭等計(jì)算機(jī)硬件的調(diào)用，仍然只能使用 Flash 或其他方法實(shí)現(xiàn)。但是 HTML5 卻引入了一些讓 Flash 不得不認(rèn)真對待的元素。其中最為人所知的和最重要的即為 canvas 和 video 標(biāo)簽。在我看來，其他的新屬性跟 Flash 的競爭關(guān)系很弱，只有此二者是真真正正要搶 Flash 的飯碗，而且一旦普及，將深刻的改變整個(gè)互聯(lián)網(wǎng)，可謂是 HTML5 的左膀右臂。

　　 canvas

　　 在 Flash 流行之前，曾經(jīng)出現(xiàn)過很多種在網(wǎng)頁中實(shí)現(xiàn)繪圖功能的方法，其中包括著名的Java Applet 。這些方法各有千秋，相互競爭不休。但是在 Macromedia 公司推出 Flash 之后，這場戰(zhàn)爭很快就結(jié)束了。

　　 為了對抗 Flash，又有很多新的技術(shù)被提出，其中就包括現(xiàn)在 Flash 的東家 Adobe 提出的 SVG。然而這沒有能夠阻止 Flash 迅速地被網(wǎng)民接受。基于 Flash 的動(dòng)畫、游戲等應(yīng)用幾乎是在一夜之間蔓延到了互聯(lián)網(wǎng)的每個(gè)角落。

　　 而今，新的挑戰(zhàn)者出現(xiàn)了，他就是 HTML5 的新標(biāo)簽 canvas。

　　 canvas 相比 Flash 顯然是有其優(yōu)點(diǎn)的。它不依賴于外部插件、與瀏覽器渲染引擎緊密結(jié)合、節(jié)約資源，最重要的是極大的簡化了圖形和網(wǎng)頁中其他元素的交互過程。

　　 對于 Flash 來說，是 Flash中的元素與網(wǎng)頁中其他元素進(jìn)行交互是要消耗大量時(shí)間和資源的，另外在編程上也相當(dāng)不方便。

而 canvas 本身就是 HTML5 的一個(gè)元素，可以像操作普通 HTML 元素一樣操作它。開發(fā)人員可以將所有的代碼整齊地寫在一個(gè)文件里，降低了維護(hù)與更新的難度。

　　 然而 canvas 也有其缺點(diǎn):

　　 其一，開發(fā)者不得不編程描繪每一個(gè)點(diǎn)和矢量曲線，在旋轉(zhuǎn)縮放時(shí)更需要和矩陣變換打交道，這會(huì)增加描繪復(fù)雜圖形的難度。而在 Flash 里，圖形顯示的 API 被封裝在名為“Sprite(顯示列表)”的類里，大部分圖形元素都繼承于此類，開發(fā)者可以使用多種工具設(shè)計(jì)圖形，對圖形進(jìn)行旋轉(zhuǎn)放縮只需要簡單的調(diào)用類 的函數(shù)。

　　 其二，動(dòng)畫的實(shí)現(xiàn)存在缺憾。canvas 雖然提供了不同于傳統(tǒng)的通過 div 塊實(shí)現(xiàn)動(dòng)畫的方法，但這種方法仍然非常繁瑣。開發(fā)者必須在每一幀動(dòng)畫顯示時(shí)清空畫布，然后重畫所有元素，這必然導(dǎo)致包含大量元素的場景動(dòng)畫緩慢，只移動(dòng)少 量元素就要重畫整個(gè)畫布會(huì)浪費(fèi)大量資源。而且創(chuàng)建動(dòng)畫也是一件十分繁瑣的事情。相比起來，F(xiàn)lash的實(shí)現(xiàn)就方便多了，雖然從最底層來說，動(dòng)畫時(shí)仍然需要 重畫整個(gè)畫布，但其被交予 Flash Player 自動(dòng)處理，無需開發(fā)者手動(dòng)管理。基于字節(jié)碼的 Flash 在解析的過程中將會(huì)比即時(shí)編譯的 HTML5 和 JavaScript 快速。一般來說，復(fù)雜動(dòng)畫將會(huì)更流暢。另外，良好封裝的圖形類和強(qiáng)大的設(shè)計(jì)工具使得動(dòng)畫的創(chuàng)建非常方便。

　　 其三，沒有提供一套方便的事件體系。開發(fā)者也許需要通過捕獲鼠標(biāo)在 canvas 中點(diǎn)擊的坐標(biāo)，判斷用戶到底點(diǎn)擊了什么圖形元素。在這個(gè)過程中可能要遍歷所有的顯示元素并判定點(diǎn)是否在圖形內(nèi)，實(shí)現(xiàn)起來比較繁瑣，更不要說實(shí)現(xiàn)事件的冒泡 和遞歸模型了。雖然今后出現(xiàn)的圖形庫可以解決這個(gè)問題，但這實(shí)質(zhì)上相當(dāng)于使用 JavaScript 構(gòu)建了一套事件響應(yīng)模型，其效率顯然不如內(nèi)建于瀏覽器的原生事件模型高。在 Flash 中，事件也被良好封裝為類，捕獲點(diǎn)擊等事件自然不在話下，更重要的是提供了判斷兩個(gè)圖形是否有交集的事件和函數(shù)，這在游戲編程中非常方便。另 外，F(xiàn)lash 的最新版本將會(huì)支持多點(diǎn)觸摸事件的響應(yīng)，而 HTML 想要支持這點(diǎn)恐怕要等到 HTML6 了。

　　 由以上分析我們可以看出，HTML5 需要的幾個(gè)非常重要的東西：一個(gè)強(qiáng)大易用的圖形庫、硬件加速的圖形解析和重繪、一個(gè)強(qiáng)大的編 機(jī)器（IDE）。

　　 目前已經(jīng)出現(xiàn)了基于 canvas 實(shí)現(xiàn)的游戲引擎。但是從效果上看仍然無法與 Flash 媲美。

WebGL 的提出讓我們看到了硬件加速的希望，這將極大的改進(jìn)圖形顯示的速度。但是目前它只被少數(shù)開發(fā)版本的瀏覽器支持。

　　 IDE 方面，諷刺的是恰恰是 Adobe 為 Adobe Flash CS5 添加了一個(gè)將 Flash 轉(zhuǎn)化為 canvas 的功能。在 JavaScript 方面，鑒于其為非強(qiáng)制類型的編程語言，對其進(jìn)行代碼提示等非常困難，提高編程效率較難。

　　 如果以上三個(gè)問題不能被良好解決，將會(huì)限制 canvas 所能實(shí)現(xiàn)的效果的豐富度，增加開發(fā)的復(fù)雜度，從而最終阻礙其普及。

　　 圖為一個(gè)用 canvas 實(shí)現(xiàn)的繪圖應(yīng)用

　　 video

　　 video 標(biāo)簽可能是 Adobe 最反對的東西了，它極有可能打破 Flash 在在線視頻領(lǐng)域的壟斷地位。

　　 但目前的情況是作為 video 內(nèi)容的視頻存在編碼問題，Apple 和微軟所支持的 不是開放標(biāo)準(zhǔn)，瀏覽器廠商必須為其付費(fèi)。因此，作為三大瀏覽器之一的火狐瀏覽器拒絕支持此編碼格式。谷歌雖然也收購了一套優(yōu)質(zhì)的編碼技術(shù)，但是目前沒有跡 象表明谷歌會(huì)開放這個(gè)技術(shù)標(biāo)準(zhǔn)。

　　 根據(jù)最近的統(tǒng)計(jì)，雖然 Google Chrome 瀏覽器和 Apple Safari 瀏覽器增長很快，但瀏覽器市場還是主要被火狐和 IE 所統(tǒng)治。如果火狐堅(jiān)持不支持 編碼格式，video 標(biāo)簽的推廣將會(huì)十分困難。

　　 所以，HTML5 需要一個(gè)既開放又優(yōu)質(zhì)的視頻編碼標(biāo)準(zhǔn)。

　　 圖為 video 標(biāo)簽 的演示

　　 二、商業(yè)方面

　　 團(tuán)結(jié)

　　 要讓微軟、谷歌、蘋果這三個(gè)在很多方面存在競爭關(guān)系的業(yè)界巨頭團(tuán)結(jié)一心地支持同一套標(biāo)準(zhǔn)是很困難的。

　　 蘋果方面對 Flash 痛下殺手，微軟方面則極少參與這場論戰(zhàn)。至于谷歌則在支持 HTML5 的同時(shí)在 Android 中加入了 Flash 支持，甚至存在將 Flash 納入 Chorme 安全沙箱的計(jì)劃。在這種情況下，如果 Adobe 能夠良好利用三大巨頭之間的分歧并加以運(yùn)作，HTML5 的前景堪憂。

　　 即便 Adobe 沒有那樣的智慧與能力挑撥三大巨頭之間的關(guān)系，三大巨頭自己就可能葬送 HTML5 的未來。前車之鑒就是大名鼎鼎的 OpenGL。這一標(biāo)準(zhǔn)成立之初的聯(lián)盟成員幾乎可以用豪華來形容，結(jié)果因?yàn)楦鱾€(gè)成員之間為了自己的利益相互爭吵，使得OpenGL的發(fā)展速度遠(yuǎn)不及 Direct3D，直至到目前這樣游戲市場幾乎被競爭對手占據(jù)、應(yīng)用范圍局限在專業(yè)領(lǐng)域的情況。

　　 用戶的接受

　　 無論各大廠商如何宣傳，用戶的接受才是最后的檢驗(yàn)標(biāo)準(zhǔn)。目前來看 HTML5 在普通桌面領(lǐng)域可能的作為不大，與 Flash 的關(guān)系必然是長期并存。原因在于用戶并不在意頁面到底使用的是什么技術(shù)，而更關(guān)心最后的效果怎么樣。HTML5 的 canvas 若要達(dá)到 Flash 實(shí)現(xiàn)的相同效果所需要的難度更大，這樣限制了中小網(wǎng)站在網(wǎng)頁里使用 canvas 的積極性，如果 canvas 不能普及，就相當(dāng)于 HTML5 斷了一條腿，而 video 標(biāo)簽的編碼問題再得不到解決，HTML5 真的就沒辦法和 Flash 競爭了。

　　 大膽的預(yù)測

　　 在最后，我將對 HTML5 和 Flash 的這場世紀(jì)之戰(zhàn)做出我自己的預(yù)測。

　　 首先用一個(gè)比喻描述目前的情況：

　　 谷歌、微軟、蘋果、Adobe 四家圍在一起打牌，其中 Adobe 是莊家，手中的牌最多最好。蘋果、微軟都很想把 Adobe 從莊家的位置上拖下來，但是又不愿意合作。谷歌與 Adobe 關(guān)系曖昧，但是也有自己的打算。

　　 在這場牌局中，Adobe 幾乎是立于不敗之地的，從目前來看 Flash 被 HTML5 完全取代的可能不大，原因在于Flash 已經(jīng)占領(lǐng)了絕大部分傳統(tǒng)桌面終端的市場，其地位幾乎無法撼動(dòng)，即便 Flash 做得不夠好，但是只要沒到很不好的地步，還是無法被超越。雖然傳統(tǒng)桌面收到了新興的移動(dò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 帶來直接的利潤，它的意義在于將富媒體應(yīng)用的市場和標(biāo)準(zhǔn)掌握在手中。用于制作 Flash 的編輯器才是 Adobe 真正的利潤來源。如果在 HTML5 的時(shí)代，開發(fā)者仍然不得不選擇 Adobe 的產(chǎn)品來制作基于 canvas 的交互頁面，那么又何必需要 Flash Player 的存在呢？Adobe 更是省下了維護(hù)一個(gè)復(fù)雜系統(tǒng)的費(fèi)用。

　　 至于微軟，他內(nèi)心是非常糾結(jié)的，他手里有 Internet Explorer 這張不知道是好是壞的牌，原因在于由 Internet Explorer 6 占領(lǐng)的瀏覽器市場份額仍然沒有被有效釋放，新版本的 Internet Explorer 不得不跟自己的前輩競爭。另外，微軟也急于推廣自己的 SliverLight ，這一產(chǎn)品與 Flash 和 HTML5 都是競爭關(guān)系。支持 HTML5 或多或少會(huì)對 SliverLight 的推廣有所打擊。所以微軟必然不會(huì)全力支持 HTML5，而是只將它作為 SliverLight 的補(bǔ)充。

　　 蘋果的算盤打得很響，他要從移動(dòng)終端領(lǐng)域著手，逐步滲透到桌面領(lǐng)域。iPhone 是第一步，也是相當(dāng)成功的一步，它的存在說明智能手機(jī)領(lǐng)域并不需要 Flash 的存在，事實(shí)上，F(xiàn)lash 在這一領(lǐng)域表現(xiàn)的確很差。但是真正關(guān)鍵的是 iPad。iPad無論是屏幕大小還是操作體驗(yàn)都更接近與普通桌面電腦,如果平板電腦被證明不需要 Flash 的存在，那么桌面電腦為什么不可以？如果大量用戶通過使用平板電腦而習(xí)慣了沒有 Flash 的互聯(lián)網(wǎng)體驗(yàn)，那么 Flash 就真的沒有未來了。iPad發(fā)售之后 Adobe 與蘋果之間爭論的升級，從側(cè)面證實(shí)蘋果和 Adobe 都看到了平板電腦將在這場戰(zhàn)爭中發(fā)揮的作用。

　　 但是蘋果真的能如愿以償么？蘋果的產(chǎn)品即便銷售很好，也不可能做到像微軟的產(chǎn)品這樣普及。原因在于蘋果的產(chǎn)品文化就在于提供高質(zhì)量和高品位的體驗(yàn)， 而這種體驗(yàn)伴隨著高價(jià)。必然只有少數(shù)人能夠用得起蘋果，必然只有使用蘋果是能夠成為一種身份和品味的象征，蘋果的產(chǎn)品才會(huì)有這么大的吸引力。難道除了蘋果 就沒有其他廠商可以提供同樣的技術(shù)了么？難道微軟不能像蘋果一樣以用戶體驗(yàn)為先么？顯然不是，重要的原因在于微軟所要提供的是一個(gè)給所有人使用的產(chǎn)品，這 一產(chǎn)品要有廣泛性，要有繼承性，而且不能太昂貴。所以微軟在用戶體驗(yàn)方面改變的動(dòng)力不足，微軟試圖在 Visita 里極大的改變用戶體驗(yàn)的方式，原來使用 XP 非常熟練的用戶到了 Visita 里就變得不知所措了。結(jié)果顯而易見。

　　 事實(shí)上，蘋果從一開始就不打算讓所有人都用上蘋果，只要有少部分人愿意掏錢購買，它就能賺足夠的錢。

　　 到了平板電腦這里也是一樣，iPad 不可能獨(dú)自積累到足夠大的用戶群，以至于可以挑戰(zhàn)傳統(tǒng)桌面終端。更具性價(jià)比的其他廠商的產(chǎn)品將會(huì)讓更多人享受到平板電腦。而且這些平板電腦很可能會(huì)支持 Flash。這樣的話，利用新興終端，改變用戶對 Flash 的依賴的計(jì)劃就會(huì)失敗。

　　 谷歌方面，這場戰(zhàn)爭的勝負(fù)對谷歌的影響都不大，只要能把用戶留在頁面上，它并不在意到底使用的是 HTML5 還是 Flash。然而他卻最終勝負(fù)有著非同尋常的影響力。谷歌除了 YouTube 之外，很少在自己的產(chǎn)品中使用 Flash。也許谷歌認(rèn)為一個(gè)開放的標(biāo)準(zhǔn)更容易控制。對于 Flash 這樣封閉的產(chǎn)品，雖然好用，但是谷歌很難對其發(fā)展方向有發(fā)言權(quán)。而今，Chrome 瀏覽器的迅猛發(fā)展日益增加了谷歌在 HTML 新標(biāo)準(zhǔn)中的發(fā)言權(quán)。但是這并不意味著谷歌會(huì)完全拋棄 Flash。

　　 Flash 可以作為谷歌牽制蘋果的重要工具，作為 Android 挑戰(zhàn) iPhone 的籌碼。谷歌正籌劃將 Flash 納入 Chrome OS 的安全沙箱。如果成功，F(xiàn)lash 飽受詬病的耗電問題、安全問題都能得到較好的解決。

　　 由此得到結(jié)論，F(xiàn)lash 氣數(shù)未盡，仍將長期統(tǒng)治互聯(lián)網(wǎng)富媒體領(lǐng)域的市場。在移動(dòng)領(lǐng)域的發(fā)展將取決于谷歌的態(tài)度，但可以預(yù)見的是將會(huì)有很多困難。

　　 至于 HTML5，預(yù)計(jì)在1-3年內(nèi)會(huì)達(dá)到相對普及的程度，但是不會(huì)取代 Flash。他們之間甚至是可以和諧相處，取長補(bǔ)短的。然而不要對 HTML5 的發(fā)展速度抱有太大希望，畢竟業(yè)內(nèi)巨頭之間矛盾重重，現(xiàn)有標(biāo)準(zhǔn)能夠被各大瀏覽器無差別支持就已經(jīng)相當(dāng)困難了，想要加入任何新功能都要很久才會(huì)被廣泛支持。 這樣緩慢的發(fā)展速度如何能夠體現(xiàn)出強(qiáng)大的競爭力，我們拭目以待。

015-12-02 10:26:02 作者：馬榮

【中關(guān)村在線軟件資訊】12月2日消息：臭名昭著的Adobe Flash居然要改名了，Adobe今日宣布Flash Professional將在以后版本中更名為Adobe Animate CC。

Adobe Animate CC將加入對HTML5的支持，這應(yīng)該算是對趨勢的一種順應(yīng)。為此，Adobe將大部分Flash事業(yè)部員工轉(zhuǎn)移到新的部門來開發(fā)HTML5，CSS3和SVG等。

在HTMML5逐漸普及之后，Adobe Flash Professional也加強(qiáng)了對HTML5的支持，幫助開發(fā)人員創(chuàng)建更多網(wǎng)站、廣告和動(dòng)畫電影。不過Animate CC還將繼續(xù)支持Flash SWF文件。

Adobe Animate CC

目前已經(jīng)沒有人使用Flash來制作網(wǎng)站，只有網(wǎng)絡(luò)廣告還在對Flash提出需求，但是，自從推出HTML5之后，F(xiàn)lash音頻和視頻源數(shù)量也已經(jīng)顯著下降。

在業(yè)界越來越多的人排斥Flash，所以Adobe將其更名為Adobe Animate CC也是情理之中的，當(dāng)然也是轉(zhuǎn)變的開始。這樣一來CC家族的成員又壯大了。

進(jìn)行Flash到HTML5的轉(zhuǎn)換時(shí)，有許多事情需要考慮——Flash player到HTML5的格式、使用的資源以及適當(dāng)?shù)挠?jì)劃。如果你想了解更多，建議參加Web前端培訓(xùn)，可以快速掌握更多前端相關(guān)的知識(shí)和技能。

1.在沒有源文件的情況下錄制Flash課程

在審核你現(xiàn)有的Flash課程時(shí)，我相信你可能會(huì)遇到許多使用Flash制作的在線屬性沒有任何源文件。所以，你一定想知道如何將這些課程從Flash轉(zhuǎn)換成HTML5？嗯，你可以選擇錄制方式。

對于這種方法，flash文件應(yīng)符合以下要求：

他們應(yīng)該沒有閃存文件。

它們應(yīng)該是不言自明的。

他們應(yīng)該使學(xué)習(xí)者了解基本事實(shí)和概念。

你的課程將通過錄制轉(zhuǎn)換方法以與HTML5兼容的視頻形式捕獲。假設(shè)你有許多沒有源文件的課程需要Flash到HTML5的轉(zhuǎn)換。在這種情況下，你可以使用此方法輕松地縮放它們，而不存在任何潛在的障礙。

但是，如果你不想把課程轉(zhuǎn)換成視頻呢？在這種情況下，你可以從Flash課程中提取內(nèi)容，并使用Microsoft OneNote和Online OCR等軟件將其轉(zhuǎn)換為HTML5。這樣的軟件可以幫助你在沒有任何源文件的情況下提取flash課程。在Web前端培訓(xùn)中，會(huì)有很多實(shí)操項(xiàng)目的練習(xí)課程，可以充分激發(fā)你的創(chuàng)造性思維，讓你掌握技能的同時(shí)，還能提高解決問題的能力。

2.使課程與手機(jī)兼容

Flash開發(fā)的在線學(xué)習(xí)課程與手機(jī)不兼容。要使它們與手機(jī)兼容，你需要將課程重新發(fā)布到最新版本的創(chuàng)作工具，以獲得HTML5輸出。電子學(xué)習(xí)創(chuàng)作工具，如Adobe Captivate 19、Articulate Storyline 360和Lectora Inspire 18，可以幫助你將Flash轉(zhuǎn)換為HTML5。他們還可以跨所有平臺(tái)和設(shè)備提供出色的學(xué)習(xí)體驗(yàn)。

因此，重新發(fā)布方法可以幫助你完成以下工作：

使你的在線學(xué)習(xí)課程與手機(jī)兼容。

通過讓人們隨時(shí)隨地訪問課程，提供更高級別的用戶體驗(yàn)。

3.為多種設(shè)備和平臺(tái)重建Flash課程

通過使用新的創(chuàng)作工具，可以使用“重建”方法轉(zhuǎn)換在Adobe flash中開發(fā)的課程。使用重建，你可以生成無錯(cuò)誤的HTML5輸出，并加載功能豐富的功能和最新工具。它還使你能夠跨多個(gè)平臺(tái)和設(shè)備運(yùn)行課程。

使用重建方法執(zhí)行以下操作：

使用最新功能和創(chuàng)作工具升級課程。

利用不同瀏覽器和設(shè)備的功能。

在選擇新的創(chuàng)作工具之前，你必須檢查該工具是否易于使用，它對在線學(xué)習(xí)門戶的響應(yīng)程度、設(shè)計(jì)可擴(kuò)展性、功能、特性等。對HTML感興趣的同學(xué)，建議報(bào)名參加web前端培訓(xùn)，這里有清晰的學(xué)習(xí)路線，課程緊跟市場和企業(yè)需求，讓你學(xué)有所成，快速找到滿意的工作。

了解更多