HTML5&Flash之粗知淺見

比較頭大的是Flash又插入不進來了，無奈請您移步 點擊這裏 先去看一段動畫展現：

什麼是HTML

HTML（Hyper Text Mark-up Language）即超文本標記語言。HTML文本是由HTML命令組成的描述性文本，HTML命令能夠說明文字、圖形、動畫、聲音、表格、連接等。 HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。

什麼是HTML5：

咱們所謂的HTML5所能達到的效果，並非孤立的HTML升級版，而是HTML+CSS3+JS綜合起來的表現。HTML也只是一個標記語言，只 是他進行了更加語義化的優化，增長了一些被認爲更加科學的標籤，也去掉了一些標籤，但標記是標記，行爲是行爲，沒有CSS三、沒有JS，HTML也永遠只 是個HTML而已。

HTML5目前任然是個草案，仍處於完善之中。然而，大部分現代瀏覽器已經具有了某些 HTML5 支持。如今支持HTML5的瀏覽器有：Firefox 3.五、Chrome 3.0、Safari 3.0、Opera 10.五、IE9

HTML5與以前HTML對比：

簡單的說，HTML5比以前的HTML版本的標籤更加語義化，更加標準化，而且增長了一些新的標籤。

請看下圖：

這是之前網頁的HTML形式。而新的的HTML是這樣的：

很顯然，HTML5已經再也不像之前那樣一個DIV打天下了，新加了語義化的新標籤。可能會讓前段工程師們在團隊協做上更加容易，由於有了統一的新標準。

形象一點來講吧，一個百貨倉庫，管理員老王來收拾倉庫，把各類衣帽鞋子和百貨分類放入不一樣的盒子中，在盒子上貼上標籤並寫上自認爲合適的名字。那些盒子咱們能夠理解爲DIV，標籤上的起的名字class貨id。

那好了，問題來了。老王下班了回家了，老李來接班，老李看了老王收拾的狀況就開始罵街了，由於他看不懂老王在盒子上寫的標籤，害的他要挨個盒子打開看看究竟裏面放着什麼，這大大的下降了工做效率。

如今的HTML5就是直接把標記好了的盒子交給了老王，他能夠根據不一樣的盒子來裝不一樣的衣帽鞋子，這樣等到老張來接班的時候就方便多了。而且不止這樣，HTML5提供了更多的標籤來讓老張和老王們不用在麻煩其餘同事而能獨立完成一些之前來說比較複雜的工做。

什麼是CSS：

CSS（Cascading Style Sheet，可譯爲「層疊樣式表」或「級聯樣式表」）是一組格式設置規則，用於控制Web頁面的外觀。經過使用CSS樣式設置頁面的格式，可將頁面的內容 與表現形式分離。頁面內容存放在HTML文檔中，而用於定義表現形式的CSS規則則存放在另外一個文件中或HTML文檔的某一部分，一般爲文件頭部分。將內 容與表現形式分離，不只可以使維護站點的外觀更加容易，並且還可使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。

什麼是CSS3：

CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。CSS3提供了很是多新途徑去改善你的設計工做，且作了很多重要的變化。

CSS3與以前CSS版本對比：

目前所知CSS3與以前版本相比，圓角、多背景、@font-face-用戶自定義字體、漸變色、盒陰影、RGBa – 加入透明色、文字陰影等等，讓代碼更簡潔、頁面結構更合理，性能和效果獲得兼顧。

形象一點來講， 前面所說的HTML，既老李和老王們只是庫管工，而這裏所說的CSS，讓老張來作。他的任務就是將貨物在商場上架，按照必定的順序，將貨物工整的排列到商 場中。不然您看到的頁面就想倉庫同樣，一大堆貨物一字長蛇陣的堆砌在那裏。而CSS3讓老張不可是一個商場上架工，還能設計裝修店面，老闆，您有這樣的員 工您真是賺到了。

什麼是javaScript：

JavaScript是一種基於對象和事件驅動並具備相對安全性的客戶端腳本語言。同時也是一種普遍用於客戶端Web開發的腳本語言，經常使用來給 HTML網頁添加動態功能，好比響應用戶的各類操做。它最初由網景公司的Brendan Eich設計，是一種動態、弱類型、基於原型的語言，內置支持類。JavaScript也能夠用於其餘場合，如服務器端編程。完整的JavaScript 實現包含三個部分：ECMA，DOM ，BOM。HTML 5引入了大量的新的Javascript API。能夠利用這些內容與對應的HTML元素相關聯。

什麼是API？

API（Application Programming Interface，應用程序編程接口）是一些預先定義的函數，目的是提供應用程序與開發人員基於某軟件或硬件的以訪問一組歷程的能力，而又無需訪問源碼，或理解內部工做機制的細節。

再形象一點理解，Javascript能夠理解成一個能請神上身的神棍，我們就叫他老劉。那API呢？就是js能請到各類大神兒。請牛大神兒上身，那就變劉老牛，請虎大神兒，劉老虎，請豬大神兒，劉老豬，請猴大神兒，劉老猴等以此類推。

 

HTML5與FLASH：

不少人認爲HTML5出現會秒殺Flash，以致於在各大web前端開發論壇吵得不可開交。我不是HTML5的忠實信徒，也犯不着作Adobe的衛道士，讓我們心平氣和的坐下來談談，他們兩個之間的那點事。

HTML5的優勢：

一、 無需插件

二、 開放、免費

三、 對搜索引擎友好

HTML5的缺點：

一、 因爲其目前仍處於草案階段，瀏覽器兼容性差

二、 開發模式單一，目前基本只靠記事本開發

FLASH的優勢：

一、 普及率高，基本上每臺PC機上都會裝有FlashPlayer

二、 多年的積累，衆多設計人員和開發者集中在Flash平臺

三、 不存在瀏覽器兼容性問題

四、 Adobe提供的Flash和Flex提供有效的開發方案。

FLASH的缺點：

一、 耗電、性能不佳。

二、 封閉，收費

要說HTML5取代FLASH，那首先我們要來討論一下功能方面的問題，即HTML5可否達到FlashPlayer10.1般絢麗的頁面效果。個 人認爲這應該不是問題，HTML5目前只是個草案，他在正式發佈前咱們均可以有無限暢想，只要有足夠的動力需求，我相信這一點應該不會成爲他發展道路上的 大問題。

其次就是兩方面爭議都比較大的性能問題。也就是人們常說的，FlashPlayer太耗費系統資源，在移動設備上也太耗電。HTML5的性能必定比FLASH的性能高？我看倒也不見得。

若是用JS引擎寫一個Ajax版的XX農場，若是全部頁面廣告動畫都用JS來寫，我想那才叫性能低下。爲何那麼多網頁遊戲不是是Ajax作的呢？ 爲何不少優化的很好的Flash3D遊戲場景都很流暢，而一個 2D的XX農場就能拖慢你的酷睿2呢？目前Flash之所性能低下，最深的根源應該源於他的普及率廣，上手率高，進入門檻低，致使了Flash被一大部分 水平良莠不齊的Flash開發的人員的濫用。因此也就產生了一大批性能低下的Flash產品面世。因此將來HTML5要取代Flash 必須有一個高效的2D/3D圖形文字渲染引擎，和一個高效的JavaScript引擎。這樣才能帶來更好的用戶體驗。

此外還有一個比較撓頭的問題，HTML5來了，他帶着他全新的標準雄赳赳、氣昂昂的來了。但Adobe會一直停留在FlashPlayer10.1 麼？他會永遠不升級麼？答案確定是否認的。但FlashPlayer是一個輕量級的插件，HTML5是一個重量級得標準，難道Flash每更新一次插件 HTML5要跟着更新一次瀏覽器麼？這貌似不太現實吧，即使的瀏覽器廠商辦獲得，用戶們也會緊跟着瀏覽器廠商的腳步嗎？這可就不太好說了，看看咱們頑固的 IE6老大爺，我對此持保留態度。

最後說點題外話，誰對HTML5的需求最迫切？

用戶想要HTML5嗎？用戶才懶得管你什麼HTML和Flash呢，用戶關心的是應用，是體驗。若是您能拿Ajax實現一個XX農場，我想沒有哪一個用戶會引文這不是Flash作的而拒絕接受。

開發者想要HTML5嗎？那須要一個成熟的HTML5+CSS3+JS的開發環境，須要各個瀏覽器提供統一的用戶體驗，即標準的徹底兼容。還須要增長新的學習成本。

那這轟轟烈烈的前端革命究竟誰是最大的受益者呢？我想答案就是……Google和Apple！

咱們能夠意淫一下，若是HTML5真的獲得了普及，那麼獲利最大的無疑是Google！緣由很簡單，當您面對一個功能和MicroSoft Word一摸同樣的Google Doc時，您會再去花錢買Word嗎？在您的面前電腦上，全部的辦公應用和娛樂都只須要打開瀏覽器窗口，就所有可以知足時，您還會去花錢買操做系統嗎？答 案固然是：「NO！」。

再說Apple，Jobs想讓瀏覽器原生支持視頻音頻，這樣iPhone、iPad就不用嵌入Flash，Jobs固然不能讓Flash進 iPhone OS，要否則App Store裏的遊戲誰去買？同時，若是大量的應用都能基於瀏覽器實現時，用戶就不會被 Windows的桌面應用套牢了。漂亮時尚的Mac會比如今更暢銷。

綜上所述，Flash是一個不斷在發展的技術，有很強的靈活性，HTML5不可能徹底取代Flash，衆多的開發人員也不會果斷拋棄Flash。

緣由就是HTML5是瀏覽器廠商試圖改變軟件生態格局的戰略須要，並不是人民羣衆的迫切需求。鑑於各大瀏覽器老大們以往的表現來看，兼容性上還有待觀 察。此外HTML5還須要一個成熟的開發環境，光一個記事本應該是搞不定。在推廣方面最好實時的推出一些切實有力的應用來吸引用戶積極的更新瀏覽器，才能 有效的完成HTML5的佈局。