[HTML] HTML5 的筆記

昨天看了intel有關enterprice API appliance的簡報，
談到了一些使用HTML5制作APP的內容，順便來複習一下HTML5。
以下是網路上擷取的資訊 :D

什麼是HTML5

• 目標是為了取代1999年所制定的HTML 4.01和XHTML 1.0標準。
• 廣義而言包含HTML、Javascript、CSS3三個技術
• 減少瀏覽器對於需要外掛程式(Flash, Silverlight, JavaFX)的豐富性網路應用服務(Rich Internet Application, RIA)的需求

HTML5技術組成

離線功能

HTML5透過JavaScript提供了數種不同的離線儲存功能，相對於傳統的Cookie而言有更好的彈性以及架構，並且可以儲存更多的內容。

• WebStorage -- 比Cookies更大、更有彈性的的儲存
• Web SQL Database -- 本地端的SQL資料庫
• Indexed DB -- Key-value的本地資料庫
• Application Cache -- 將部分常用的網頁內容cache起來

即時通訊

以往網站由於HTTP協定以及瀏覽器的設計，即時的互動性相當的受限，只能使用一些技巧來「模擬」即時的通訊效果，但HTML5提供了完善的即時通訊支援。

• WebSocket -- 即時的socket連線
• Web Workers -- 以往JavaScript都是single thread，透過Worker可以有多個運算
• Notifications -- 原生的提示訊息，類似像OS X的Growl提示

檔案以及硬體支援

不知道大家有沒有發現，在Gmail等新的網頁程式當中，已經可以透過拖拉的方式將檔案作為郵件附件？這就是這部份HTML5檔案的功能中的Drag'n Drop和File API。

• Drag'n Drop -- HTML元素的拖拉
• File API -- 讀取使用者本機電腦的內容
• Geolocation -- 地理定位
• Device orientation -- 手持裝置的方向
• Speech input -- 語音輸入

語意化

語意化的網路是可以讓電腦能夠更加理解網頁的內容，對於像是搜尋引擎的優化（SEO）或是推薦系統可以有很大的幫助。

• New tags -- 新的標籤，像是
  、

  等
• Application tags -- 也是新的標籤，像是、等
• Microdata -- 加入語意的資料讓搜尋引擎等網站可以正確顯示
• Form type --
  可以加入的type便多了，包含email和tel等屬性，瀏覽器會協助進行資料格式的驗證

多媒體

Audio、Video的標籤支援以及Canvas的功能應該是大家對於HTML5最熟悉的部份了

• Audio video -- 影片和音樂的原生播放支援
• Canvas -- 2D的繪圖功能支援
• Canvas 3D -- 3D的繪圖功能支援
• SVG -- 向量圖支援

CSS 3

CSS3支援了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。

• Selector -- 更有彈性的選擇器
• Webfonts -- 嵌入式字體
• Layout -- 多樣化的排版選擇
• Stlying radius gradient shadow -- 圓角、漸層、陰影
• Border background -- 邊框的背景支援
• Transition -- 元件的移動效果
• Transform -- 元件的變形效果
• Animation -- 將移動和變形加入動畫支援

JavaScript

在比較JavaScript的基本面也新增了DOM的API、和瀏覽器上下頁的紀錄修改。

• DOM API -- 更方便的查詢DOM元件
• History API -- 瀏覽器的上下頁內容修改，方便AJAX可以保留瀏覽記錄

線上資源

HTML5ROCK提供了許多HTML5的相關實作範例

瀏覽器支援器

可以使用http://html5test.com測試瀏覽器目前支援的程度。
目前IE11僅獲得369分。

結語

如果你的客戶不care在ie上跑不了html5的話，你的產品就有用這麼新的技術的機會了XD
不知何時IE才能支援完整的File API

參考資料

什麼是HTML5? 它與傳統的HTML有何不同呢?
HTML5 維基百科

HTML5新手入門指南