HTML5資料整理

• W3C，萬維網聯盟，Web標準制定者
• WHATWG，由瀏覽器廠商的員工發起的非正式組織，致力於改進HTML，其成員來自Mozilla、Opera、Apple、Google等

HTML5發展

• HTML 4.01於1999年發佈，2000年W3C發佈了XHTML 1.0
• 第一份正式草案公佈於2008.1.22，最新草案發佈於2011.9.6
• HTML5草案的前身爲Web Applications 1.0，2004年由WHATWG提出，2007年被W3C接納，併成立了新的HTML工做組（合併XHTML團隊）

「WHATWG致力於web表單和應用程序，而W3C專一於XHTML 2.0。在2006年，雙方決定進行合做，來建立一個新版本的HTML」 —— 摘自W3school。

• WHATWG目前仍然是HTML5的主力，HTML5的最新進展會發布在這兩個組織的官網，如下默認使用W3C公佈的信息

HTML5的新特性體如今下圖顯示的8個部分，HTML5但願建立一個有本地存儲、富客戶界面、高效網絡IO的Web App。HTML5 Presentation是如下文字和圖表更加直觀的版本：

• 語義（Semantic），新增header、footer、nav、fig等含有語義的標籤，以及一系列含有語義的標籤屬性
• 離線&存儲（Offline&Storage），主要包括Local Storage、Indexed DB、File API
• 設備訪問（Device Access），定位信息已經普遍應用，其餘還有視頻、音頻流（如語音輸入 ），移動設備的傳感器（如方向傳感器）
• 網絡鏈接（Connectivity），增長Web Socket、服務器數據推送
• 多媒體（Multimedia），增長video、audio標籤，提供原生的視頻、音頻訪問
• 圖形接口（GDI），增長canvas標籤，提供2D，3D GDI，現已有第3方的WebGL能夠提供3D加速渲染
• 性能&整合（Performance & Integration），Web Workers實現腳本後臺運行，並提供先後臺交互接口，XMLHttpRequest 2提供更好的網絡IO
• CSS3，目前仍在開發之中，主流瀏覽器已經支持其中部分特性，Dashboard是更完整的CSS3 demo

 

最新進展參見WHATWG News和W3C HTML首頁：

• 最新草案發表於2011.9.6
• W3C但願能在2014讓html5成爲Recommendation ，參見html5 FAQ

 

[Demo庫]

這裏將全部demo庫粗略分爲應用和遊戲，涵蓋了組織、企業、我的開發或收集的demo

[應用demo庫]

Edge的Samples，Adobe Edge製做的html5動畫

• Adobe請Rain製做的logo動畫1、動畫2
• 比較精美的齒輪動畫
• 過山車動畫
• 2個Banner廣告
  • 簡單的banner動畫廣告，js庫文件138KB， 動畫自身js+css 10KB
  • 另外一個Banner公益廣告

Html5Rocks， Google demo庫

• HTML5 Presentation ，h5版ppt，詳細介紹了h5的新特性，裏面的demo可直接玩
• WebGL Globe，使用WebGL 3D加速，展現canvas 3D特性
• Ascii Art，使用WebSocket同步服務器數據（字符視頻）
• Notification Time，Notification API，提供頁面範圍之外的消息提示,目前主流瀏覽器中只有chrome實現
• Drag n Drop Photos, 拖拽文件到瀏覽器，使用DnD，File API
• Page Flip，書本翻頁，基於CSS3 2D transform和animation

html5demos ，人氣很高的第三方demo庫，提供按特性過濾查看demo

Web O' Wonder，奇幻網絡，Mozilla提供的demo庫

• Dashboard，展現HTML5、CSS3、SVG、JS等技術的新特性，CSS3的demo很豐富

Safari Technology Demos，Apple提供的demo庫

• Photo Transitions，圖片切換的動畫效果
• Gallery，幻燈片，多種展示模式：水平、垂直、3D滾動..
• 虛擬現實(VR)，基於css3 transforms
• 360°，360°旋轉，本覺得是3D效果，居然用了72張圖片

IE Test Drive，Microsoft爲IE開的demo庫站點，大量html5的demo

10K Apart，HTML5競賽做品，基本要求是打包後10KB之內

canvasdemos，專一於canvas的demo庫

HTML5研究小組收集的demo庫，「HTML5研究小組」是中國首個HTML5推廣和交流的開放組織

一些零散的demo：

• iGrapher，很炫的報表程序
• Cloudkick，3D，顯示雲服務器狀態

[遊戲demo庫]

Mozilla Labs Gaming，Mozilla官方的html5遊戲demo庫，下面是庫中獲獎做品

• Marble Run，冠軍遊戲(best web-iness)，畫面精細，chrome13下運行較流暢（汗）
• Robots are people too，得到「最有趣獎」（most fun）

html5games，第三方遊戲demo庫

• html5版的俄羅斯方塊

HTML5研究小組收集的遊戲demo庫

遊戲引擎：Impact、Rocket、GameClosure、YoYo

一些零散的demo：

• CubeSpace，搭積木，強大的回放功能

[兼容性]

Html5 test，提供html5新特性的檢測

html5兼容性手冊

• Where can I use..，提供詳盡的兼容性信息，提供按特性查找
• HTML5 readiness，數據來源於前者，提供按時間查詢HTML5兼容性，有趣的展示形式

Compatibility Master Table，quirksmode提供的兼容性數據庫，涵蓋了DOM、CSS、JS等

HTML5 in Firefox，Mozilla 提供的Firefox html5兼容性列表

HTML5 in Chrome，Chromium提供的開發進度信息

HTML5 in IE：官方版本，非官方版本，

Mobile HTML5，Mobile Browser對HTML5的支持

兼容性工具

• Compatibility Detector for Firefox，Firefox插件
• W3C HTML驗證，支持對html5文檔進行驗證
• W3C CSS驗證，還不支持CSS3
• html5shiv，讓IE支持大部分html5特性，2KB

[開發]

開發手冊&文檔

• HTML5 參考手冊（中文版，英文版），W3school的入門級手冊，內含簡單的demo
• HTML5: Edition for Web Authors，W3C面向web開發者的高級手冊 WHATWG版本
• HTML5 full specification，完整版手冊，主要面向瀏覽器廠商 WHATWG版本
• Dive Into HTML5，免費的在線h5教程
• Mozilla HTML5

Edge，Adobe開發的html5動畫製做工具，生成的動畫依賴的庫較多，直接用於mobile設備文件過大

Swiffy，flash轉html5工具

Modernizr，javascript庫，對html5、css3 作退化處理

CSS3-HTML5之家，國內的一個站點

HTML5研究小組

Scirra，HTML5 遊戲開發平臺（付費）