Html5學習系列（一）認識HTML5

aicoder發表於2012-05-22
HTML

引言，認識兩個標準制定的組織

        在講什麼是Html5之前得先了解兩個組織；WHATWG ：網頁超文字技術工作小組（英語：Web Hypertext Application Technology Working Group，縮寫為WHATWG），是一個以推動網路 HTML 5 標準為目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商和一些相關團體形成的一個鬆散的、非正式的協作組織，這些團體希望發展一些新的技術，從而開發人員可以在網際網路上編寫並部署應用。 另外一個就是大家熟悉的W3C ：全球資訊網聯盟（World Wide Web Consortium，W3C），又稱W3C理事會,它主要是為解決web應用中不同平臺、技術和開發者帶來的不相容問題，保障Web資訊的順利和完整流通，全球資訊網聯盟制定了一系列標準並督促Web應用開發者和內容提供者遵循這些標準。標準的內容包括使用語言的規範，開發中使用的導則和解釋引擎的行為等等。W3C也制定了包括XML和CSS等的眾多影響深遠的標準規範。

那什麼是HTML5呢？

         HTML 5草案的前身名為Web Applications 1.0，是在2004年由WHATWG提出，再於2007年獲W3C接納，併成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發布。WHATWG表示該規範是目前仍在進行的工作，仍須多年的努力。目前Firefox、Google Chrome、Opera、Safari（版本4以上）、Internet Explorer 9已支援HTML5技術。 

HTML5本質並沒有對之前HTML4版本的規範進行徹底的變革，更令人欣喜的是，HTML5一開始設計就考慮了跟之前的標準進行相容。而且把最新的WEB開發的一些新技術新的規範引入進了新版本的標準中。那麼它的本質是什麼呢？其實HTML5的發展就是html，css，jsapi的發展，用另外一句話解釋就是：HTML5=HTML+CSS+JSAPI。

HTML5帶給我們的是什麼呢？

1、讓Web再次迴歸到富客戶端地步，而且更加的獨立，減少了對第三方外掛的依賴。

     比如：之前的HTML4的標準中並沒有對於視訊、音訊以及其他的富客戶端技術支援的非常好，這就使得Flash和SilverLight變得異常的成功。而在HTML5新標準中原生的就支援音訊、視訊、畫布等技術。讓我們的WEB程式擁有更多富客戶端表現的方式，而且讓我們的WEB程式更加獨立，更好的適應多種形式的客戶端。

2、對本地離線儲存的更好的支援 

     由於之前想在客戶端儲存一些資料都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存，因為它們由每個對伺服器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。 

HTML5 提供了兩種在客戶端儲存資料的新方法：

  • localStorage – 沒有時間限制的資料儲存
  • sessionStorage – 針對一個 session 的資料儲存

在 HTML5 中，資料不是由每個伺服器請求傳遞的，而是隻有在請求時使用資料。它使在不影響網站效能的情況下儲存大量資料成為可能。

對於不同的網站，資料儲存於不同的區域，並且一個網站只能訪問其自身的資料。

HTML5 使用 JavaScript 來儲存和訪問資料。有了本地資料庫的支援，讓一些簡單的離線應用也成為了可能。 

3、新的特殊內容元素，更好的支援SEO以及方便視障人士使用

     現在所有的站點基本上都是Div+CSS佈局，幾乎所有的文章標題、內容、輔助介紹等都用Div容器來承載。搜尋引擎在抓取頁面內容時，因為沒有明確的容器的含義只能去猜測這些標籤容器承載的是文章標題還是文章內容等，HTML5新標準中直接新增了擁有具體含義的HTML標籤比如：article、footer、header、nav、section 

4、更加智慧的表單標籤

     之前的表單標籤，僅僅是簡單的型別的約束，比如文字框、文字域、下拉選單等，而跟業務結合緊密的表單標籤資料校驗等控制都沒有很好的支援，而是用這些技術都基本上都是跟第三方的JS控制元件進行結合使用，但是這些第三方總會涉及到版本控制、瀏覽器相容性、非標準等一系列的問題，而在HTML5的標準中直接新增了智慧表單，讓這一切都變得那麼的簡單，比如 calendar、date、time、email、url、search。

5、HTML5即時二維繪圖 ,也就是畫布的引入，讓Javascript子彈飛

     畫布的引入使得：Web端生成動畫效果、製作Web遊戲、更好的互動體驗設計都增加了無限的變數，當社群充斥著亂七八糟超炫的HTML5的JS控制的效果的時候，讓人無限的讚歎。HTML5 的canvas 元素使用JavaScript 在網頁上繪製影像。畫布是一個矩形區域，您可以控制其每一畫素。

canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影像的方法。

6、JS嗑藥了，支援多執行緒

     在不影響UI update 及 瀏覽器與使用者互動的情況下, 前端做大規模運算，只能通過 setTimeout 之類的去模擬多執行緒 。而新的標準中，JS新增的HTML5 Web Worker物件原生的就支援多執行緒。 

7、WebSockets讓跨域請求、長連線、資料推送等一切都變得那麼簡單，Web不僅僅是Ajax

      WebSockets是在一個(TCP)介面進行雙向通訊的技術，PUSH技術型別。WebSocket是html5規範新引入的功能，用於解決瀏覽器與後臺伺服器雙向通訊的問題，使用WebSocket技術，後臺可以隨時向前端推送訊息，以保證前後臺狀態統一，在傳統的無狀態HTTP協議中，這是“無法做到”的。  

8、更好的異常處理

      HTML5(text/html)瀏覽器將在錯誤語法的處理上更加靈活。HTML5在設計時保證舊的瀏覽器能夠安全地忽略掉新的HTML5程式碼。與HTML4.01相比，HTML5給出瞭解析的完整規則，讓不同的瀏覽器即使在發生語法錯誤時也能返回完全相同的結果。 

9、檔案API讓檔案上傳和操縱檔案變得那麼簡單

      由於專案中經常遇到用Web應用中控制操作本地檔案，而之前都是使用一些富客戶端技術比如flash，ActiveX，Silverlight等技術，面對檔案JS就是個shit，就是個雞肋。在HTML5的新的提供的FHTML5 File API 讓JS可以輕鬆上陣了。

10、編輯、拖放、微資料、瀏覽歷史管理、地理資訊介面API、裝置硬體操作API等很多的新功….

HTML5的未來？

       當然HTML5不是孤立的，Javascript API的增強，讓JS變成異常強大的未來的程式設計武器。CSS3帶給未來Web應用也是極大的新的挑戰。相信由於HTML5標準化的支援，相信未來Web技術真正的可以跑在任何的端，也讓我們的Web應用更加的獨立，更加的輕鬆的融入到各個端中，HTML5 就是未來！

總結：

        通過上面HTML5的新特點，不難總結出HTML5=Javascript+HTML+CSS。HTML5的新特性帶給開發者的是更友好更豐富的本地處理的API，更智慧的更優雅的HTML標籤，更強的本地處理的功能，通訊也進一步加強。Google很早之前就意識到了，客戶只要擁有一個瀏覽器就可以了，相信不久的將來現在的Web的應用不在對本地處理那麼雞肋，CS形式的客戶端相信也會越來越少。

        作為開發者，當Adobe公司宣佈放棄Flash，把最大的精力放到HTML5的開發上的時候，那你可能會看到這些趨勢，當微軟選擇了HTML5而放棄了Silverlight繼續升級的時候，那你基本上也沒有什麼好選擇的了。HTML5的發力，的確帶給我們每個開發者都帶來了機會。

當然以上只是筆者的觀點，每個人都有閱讀新技術的角度，歡迎大家轉載討論。

我參與的厚德IT團隊也同步更新，希望大家關注。（厚德IT專注於IT最新技術分享）

此文章在另外一個blog同步：http://www.cnblogs.com/houodeit/archive/2012/05/22/2513655.html


相關文章