HTML 5&Flash之粗知淺見(jiàn):誰(shuí)對(duì)HTML 5最迫切
什么是HTML
HTML(Hyper Text Mark-up Language)即超文本標(biāo)記語(yǔ)言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說(shuō)明文字、圖形、動(dòng)畫(huà)、聲音、表格、鏈接等。HTML的結(jié)構(gòu)包括頭部(Head)、主體(Body)兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。
什么是HTML5：
我們所謂的HTML5所能達(dá)到的效果，并不是孤立的HTML升級(jí)版，而是HTML+CSS3+JS綜合起來(lái)的表現(xiàn)。HTML也只是一個(gè)標(biāo)記語(yǔ)言，只是他進(jìn)行了更加語(yǔ)義化的優(yōu)化，增加了一些被認(rèn)為更加科學(xué)的標(biāo)簽，也去掉了一些標(biāo)簽，但標(biāo)記是標(biāo)記，行為是行為，沒(méi)有CSS3、沒(méi)有JS，HTML也永遠(yuǎn)只是個(gè)HTML而已。
HTML5目前任然是個(gè)草案，仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持?，F(xiàn)在支持HTML5的瀏覽器有：Firefox 3.5、Chrome 3.0、Safari 3.0、Opera 10.5、IE9
HTML5與之前HTML對(duì)比：
簡(jiǎn)單的說(shuō)，HTML5比之前的HTML版本的標(biāo)簽更加語(yǔ)義化，更加標(biāo)準(zhǔn)化，并且增加了一些新的標(biāo)簽。
請(qǐng)看下圖：
這是以前網(wǎng)頁(yè)的HTML形式。而新的的HTML是這樣的：
很顯然，HTML5已經(jīng)不再像以前那樣一個(gè)DIV打天下了，新加了語(yǔ)義化的新標(biāo)簽?？赡軙?huì)讓前段工程師們?cè)趫F(tuán)隊(duì)協(xié)作上更加容易，因?yàn)橛辛私y(tǒng)一的新標(biāo)準(zhǔn)。
形象一點(diǎn)來(lái)說(shuō)吧，一個(gè)百貨倉(cāng)庫(kù)，管理員老王來(lái)收拾倉(cāng)庫(kù)，把各種衣帽鞋子和百貨分類(lèi)放入不同的盒子中，在盒子上貼上標(biāo)簽并寫(xiě)上自認(rèn)為合適的名字。那些盒子我們可以理解為DIV，標(biāo)簽上的起的名字class貨id。
那好了，問(wèn)題來(lái)了。老王下班了回家了，老李來(lái)接班，老李看了老王收拾的情況就開(kāi)始罵街了，因?yàn)樗床欢贤踉诤凶由蠈?xiě)的標(biāo)簽，害的他要挨個(gè)盒子打開(kāi)看看究竟里面放著什么，這大大的降低了工作效率。
現(xiàn)在的HTML5就是直接把標(biāo)記好了的盒子交給了老王，他可以根據(jù)不同的盒子來(lái)裝不同的衣帽鞋子，這樣等到老張來(lái)接班的時(shí)候就方便多了。并且不止這樣，HTML5提供了更多的標(biāo)簽來(lái)讓老張和老王們不用在麻煩其他同事而能獨(dú)立完成一些以前來(lái)講比較復(fù)雜的工作。
什么是CSS：
CSS(Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”)是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。通過(guò)使用CSS樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。頁(yè)面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或HTML文檔的某一部分，通常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡(jiǎn)練，縮短瀏覽器的加載時(shí)間。
什么是CSS3：
CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來(lái)。CSS3提供了非常多新途徑去改善你的設(shè)計(jì)工作，且做了不少重要的變化。
CSS3與之前CSS版本對(duì)比：
目前所知CSS3與之前版本相比，圓角、多背景、@font-face-用戶(hù)自定義字體、漸變色、盒陰影、RGBa – 加入透明色、文字陰影等等，讓代碼更簡(jiǎn)潔、頁(yè)面結(jié)構(gòu)更合理，性能和效果得到兼顧。
形象一點(diǎn)來(lái)說(shuō), 前面所說(shuō)的HTML，既老李和老王們只是庫(kù)管工，而這里所說(shuō)的CSS，讓老張來(lái)做。他的任務(wù)就是將貨物在商場(chǎng)上架，按照一定的順序，將貨物工整的排列到商場(chǎng)中。否則您看到的頁(yè)面就想倉(cāng)庫(kù)一樣，一大堆貨物一字長(zhǎng)蛇陣的堆砌在那里。而CSS3讓老張不但是一個(gè)商場(chǎng)上架工，還能設(shè)計(jì)裝修店面，老板，您有這樣的員工您真是賺到了。
什么是javaScript：
JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶(hù)端腳本語(yǔ)言。同時(shí)也是一種廣泛用于客戶(hù)端Web開(kāi)發(fā)的腳本語(yǔ)言，常用來(lái)給HTML網(wǎng)頁(yè)添加動(dòng)態(tài)功能，比如響應(yīng)用戶(hù)的各種操作。它最初由網(wǎng)景公司的Brendan Eich設(shè)計(jì)，是一種動(dòng)態(tài)、弱類(lèi)型、基于原型的語(yǔ)言，內(nèi)置支持類(lèi)。JavaScript也可以用于其他場(chǎng)合，如服務(wù)器端編程。完整的JavaScript實(shí)現(xiàn)包含三個(gè)部分：ECMA，DOM ，BOM。HTML 5引入了大量的新的Javascript API?？梢岳眠@些內(nèi)容與對(duì)應(yīng)的HTML元素相關(guān)聯(lián)。
#p#
什么是API?
API(Application Programming Interface,應(yīng)用程序編程接口)是一些預(yù)先定義的函數(shù)，目的是提供應(yīng)用程序與開(kāi)發(fā)人員基于某軟件或硬件的以訪(fǎng)問(wèn)一組歷程的能力，而又無(wú)需訪(fǎng)問(wèn)源碼，或理解內(nèi)部工作機(jī)制的細(xì)節(jié)。
再形象一點(diǎn)理解，Javascript可以理解成一個(gè)能請(qǐng)神上身的神棍，咱們就叫他老劉。那API呢?就是js能請(qǐng)到各種大神兒。請(qǐng)牛大神兒上身，那就變劉老牛，請(qǐng)虎大神兒，劉老虎，請(qǐng)豬大神兒，劉老豬，請(qǐng)猴大神兒，劉老猴等以此類(lèi)推。
HTML5與FLASH：
很多人認(rèn)為HTML5出現(xiàn)會(huì)秒殺Flash，以至于在各大web前端開(kāi)發(fā)論壇吵得不可開(kāi)交。我不是HTML5的忠實(shí)信徒，也犯不著做Adobe的衛(wèi)道士，讓咱們心平氣和的坐下來(lái)談?wù)?，他們兩個(gè)之間的那點(diǎn)事。
HTML5的優(yōu)點(diǎn)：
1、 無(wú)需插件
2、 開(kāi)放、免費(fèi)
3、 對(duì)搜索引擎友好
HTML5的缺點(diǎn)：
1、 由于其目前仍處于草案階段，瀏覽器兼容性差
2、 開(kāi)發(fā)模式單一，目前基本只靠記事本開(kāi)發(fā)
FLASH的優(yōu)點(diǎn)：
1、 普及率高，基本上每臺(tái)PC機(jī)上都會(huì)裝有FlashPlayer
2、 多年的積累，眾多設(shè)計(jì)人員和開(kāi)發(fā)者集中在Flash平臺(tái)
3、 不存在瀏覽器兼容性問(wèn)題
4、 Adobe提供的Flash和Flex提供有效的開(kāi)發(fā)方案。
FLASH的缺點(diǎn)：
1、 耗電、性能不佳。
2、 封閉，收費(fèi)
要說(shuō)HTML5取代FLASH，那首先咱們要來(lái)討論一下功能方面的問(wèn)題，即HTML5能否達(dá)到FlashPlayer10.1般絢麗的頁(yè)面效果。個(gè)人認(rèn)為這應(yīng)該不是問(wèn)題，HTML5目前只是個(gè)草案，他在正式發(fā)布前我們都可以有無(wú)限暢想，只要有足夠的動(dòng)力需求，我相信這一點(diǎn)應(yīng)該不會(huì)成為他發(fā)展道路上的大問(wèn)題。
其次就是兩方面爭(zhēng)議都比較大的性能問(wèn)題。也就是人們常說(shuō)的，F(xiàn)lashPlayer太耗費(fèi)系統(tǒng)資源，在移動(dòng)設(shè)備上也太耗電。HTML5的性能一定比FLASH的性能高?我看倒也不見(jiàn)得。
如果用JS引擎寫(xiě)一個(gè)Ajax版的XX農(nóng)場(chǎng)，如果所有頁(yè)面廣告動(dòng)畫(huà)都用JS來(lái)寫(xiě)，我想那才叫性能低下。為什么那么多網(wǎng)頁(yè)游戲不是是Ajax做的呢?為什么很多優(yōu)化的很好的Flash3D游戲場(chǎng)景都很流暢，而一個(gè) 2D的XX農(nóng)場(chǎng)就能拖慢你的酷睿2呢?目前Flash之所性能低下，最深的根源應(yīng)該源于他的普及率廣，上手率高，進(jìn)入門(mén)檻低，導(dǎo)致了Flash被一大部分水平參差不齊的Flash開(kāi)發(fā)的人員的濫用。所以也就產(chǎn)生了一大批性能低下的Flash產(chǎn)品面世。所以未來(lái)HTML5要取代Flash 必須有一個(gè)高效的2D/3D圖形文字渲染引擎，和一個(gè)高效的JavaScript引擎。這樣才能帶來(lái)更好的用戶(hù)體驗(yàn)。
此外還有一個(gè)比較撓頭的問(wèn)題，HTML5來(lái)了，他帶著他全新的標(biāo)準(zhǔn)雄赳赳、氣昂昂的來(lái)了。但Adobe會(huì)一直停留在FlashPlayer10.1么?他會(huì)永遠(yuǎn)不升級(jí)么?答案肯定是否定的。但FlashPlayer是一個(gè)輕量級(jí)的插件，HTML5是一個(gè)重量級(jí)得標(biāo)準(zhǔn)，難道Flash每更新一次插件HTML5要跟著更新一次瀏覽器么?這貌似不太現(xiàn)實(shí)吧，即便的瀏覽器廠(chǎng)商辦得到，用戶(hù)們也會(huì)緊跟著瀏覽器廠(chǎng)商的腳步嗎?這可就不太好說(shuō)了，看看我們頑固的IE6老大爺，我對(duì)此持保留態(tài)度。
最后說(shuō)點(diǎn)題外話(huà)，誰(shuí)對(duì)HTML5的需求最迫切?
用戶(hù)想要HTML5嗎?用戶(hù)才懶得管你什么HTML和Flash呢，用戶(hù)關(guān)心的是應(yīng)用，是體驗(yàn)。如果您能拿Ajax實(shí)現(xiàn)一個(gè)XX農(nóng)場(chǎng)，我想沒(méi)有哪個(gè)用戶(hù)會(huì)引文這不是Flash做的而拒絕接受。
開(kāi)發(fā)者想要HTML5嗎?那需要一個(gè)成熟的HTML5+CSS3+JS的開(kāi)發(fā)環(huán)境，需要各個(gè)瀏覽器提供統(tǒng)一的用戶(hù)體驗(yàn)，即標(biāo)準(zhǔn)的完全兼容。還需要增加新的學(xué)習(xí)成本。
那這轟轟烈烈的前端革命究竟誰(shuí)是最大的受益者呢?我想答案就是……Google和Apple!
我們可以意淫一下，如果HTML5真的得到了普及，那么獲利最大的無(wú)疑是Google!原因很簡(jiǎn)單，當(dāng)您面對(duì)一個(gè)功能和MicroSoft Word一摸一樣的Google Doc時(shí)，您會(huì)再去花錢(qián)買(mǎi)Word嗎?在您的面前電腦上，所有的辦公應(yīng)用和娛樂(lè)都只需要打開(kāi)瀏覽器窗口，就全部能夠滿(mǎn)足時(shí)，您還會(huì)去花錢(qián)買(mǎi)操作系統(tǒng)嗎?答案當(dāng)然是：“NO!”。
再說(shuō)Apple，Jobs想讓瀏覽器原生支持視頻音頻，這樣iPhone、iPad就不用嵌入Flash，Jobs當(dāng)然不能讓Flash進(jìn)iPhone OS，要不然App Store里的游戲誰(shuí)去買(mǎi)?同時(shí)，如果大量的應(yīng)用都能基于瀏覽器實(shí)現(xiàn)時(shí)，用戶(hù)就不會(huì)被 Windows的桌面應(yīng)用套牢了。漂亮?xí)r尚的Mac會(huì)比現(xiàn)在更暢銷(xiāo)。
綜上所述，F(xiàn)lash是一個(gè)不斷在發(fā)展的技術(shù)，有很強(qiáng)的靈活性，HTML5不可能完全取代Flash，眾多的開(kāi)發(fā)人員也不會(huì)果斷拋棄Flash。
原因就是HTML5是瀏覽器廠(chǎng)商試圖改變軟件生態(tài)格局的戰(zhàn)略需要，并非人民群眾的迫切需求。鑒于各大瀏覽器老大們以往的表現(xiàn)來(lái)看，兼容性上還有待觀察。此外HTML5還需要一個(gè)成熟的開(kāi)發(fā)環(huán)境，光一個(gè)記事本應(yīng)該是搞不定。在推廣方面最好實(shí)時(shí)的推出一些切實(shí)有力的應(yīng)用來(lái)吸引用戶(hù)積極的更新瀏覽器，才能有效的完成HTML5的布局。
原文：http://blog.sina.com.cn/s/blog_462e5c4f0102dugh.html
【編輯推薦】
