HTML5資料大全

jopen 12年前發布 | 120K 次閱讀 HTML5 前端技術

幾點說明：

  1. 本次收集的信息以HTML5為主，這里的HTML5 ~= HTML5 + Javascript + CSS3
  2. 以下資料的協議相關部分主要來自W3C、WHATWG；demo庫和開發工具等主要來自IT企業、技術組織的官網或其信息站點
  3. W3C正式發布的協議稱為Recommendation（推薦），下文中“協議”、“推薦”、“REC”是同義詞；“協議”未通過之前以“草案”的形式存在

[基本信息]

2個組織

  • 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

HTML5資料大全

 

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

HTML5資料大全

 

[Demo庫]

這里將所有demo庫粗略分為應用和游戲，涵蓋了組織、企業、個人開發或收集的demo

[應用demo庫]

Edge的Samples，Adobe Edge制作的html5動畫

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：

[游戲demo庫]

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

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

html5games，第三方游戲demo庫

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的支持

兼容性工具

[開發]

開發手冊&文檔

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

Swiffy，flash轉html5工具

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

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

HTML5研究小組

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

來自：http://www.cnblogs.com/luics/archive/2012/11/17/2775190.html

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！