前所未有的 HTML5 資源參考指南

 儘管 HTML5 規範在 2014 年以前不會有正式版本,不少設計師已經開始試水高級瀏覽器已經支持的部分 HTML5 功能。HTML5 爲 Web 設計和應用開發打開了一扇全新的門,原生支持了之前只可能使用 JavaScript 或 Flash 實現的東西。這裏收集了學習 HTML5 的 175 個參考資源,包括教程,框架,示例等。基本上算是 HTML5 葵花寶典了吧? javascript

一、基礎教程

HTML5 教程
來自 W3schools.com 的灰常灰常基礎的教程。php

HTML5 入門,簡單易懂,立刻使用!
來自 What!? 的指南,介紹 HTML5 初步。css

你必須知道的 28 個 HTML5 特性、小貼士和技術
來自 Nettuts+ 的實用 HTML5 小貼士。html

HTML 簡介
一個 40 分鐘的視頻教程,來源於 Google 員工 Brad Neuberg。前端

快速技巧:你應該立刻使用的 HTML5 特性
來自 Nettuts+ 的示範影片。html5

學習熱愛 HTML5java

一個關於 HTML5 技術優點的偉大概覽,以及一些很是有用的技巧。jquery

使用語義類名稱爲 HTML5 作預先準備
Jon Tan 寫的一篇文章,關於 HTML5 中的新語義類。ios

HTML5:基礎介紹
一份 HTML5 介紹,講述 API,新元素等內容。css3

你必須知道的關於 HTML5 的一切
來自 TechRadar UK 的掃盲文章。

HTML5 教程
很是基礎的教程站。

HTML5 中的結構化標籤
介紹那些即將替換諸多 div 元素的結構化標籤。

使人驚歎的 HTML5
很是實用的 HTML5 入門教程

HTML5,再一次
一份關於使用 HTML5 進行前端設計簡要指南。

HTML5 演講稿

一個關於 HTML5 的超大幻燈片,自己也是使用 HTML5 製做的。

Header 元素
來自 HTML5 Doctor 的一篇介紹 header 元素的文章。

HTML5 和 Web 的將來
從 2009 年 7 月開始,這篇文章包含了 HTML5 基礎。

HTML5 中的 CSS 代碼結構:一些實用指南
一些來自 Woork 的實用指南。

HTML5 如虎添翼:貼士,技巧和技術
一份 HTML5 概覽,包括關於語義標記,表單等內容。

二、使用 HTML5 建立網站

HTML5 教程 – 從這裏開始
一份基礎 HTML5 教程,包括一個基本的模版文件。

使用 HTML5 和 CSS3 編寫一個充滿活力的專業網站

使用 HTML5 和 CSS3 編寫一個向後兼容的單頁面做品集

HTML5 & CSS3 案例學習教程

觸摸將來:使用 HTML5 和 CSS3 建立一個優雅的網站

編寫一個 CSS3 & HTML5 單頁面網站模版

從無到有編寫一個 HTML5 佈局

HTML5 和 CSS3:你即將使用的技術

使用 HTML5 設計編碼一個炫酷的 iPhone App 網站

用 HTML5 和 CSS3 實現簡單的網站佈局

使用 HTML5 轉換 WordPress TwentyTen 主題
利用 HTML5 優點改進 WordPress 默認 TwentyTen 主題的教程

Dreamweaver CS5 中的 HTML5 和 CSS3 第一部分:構建網頁
來自 Adobe 的關於在 Dreamweaver CS5 中編碼 HTML 和 CSS3 系列的第一部分

使用 HTML5 和 CSS3 建立現代網站
來自 IMB’s developerWorks 的教程

使用 HTML5 編寫網頁
來自 Webmonkey 站點

使用 HTML5 設計一個博客

三、Canvas 教程

一個結合 HTML5 Canvas 和 jQuery 的幻燈片

使用 HTML5 和 Java Script 設計彈跳球

如何使用 HTML5 Canvas 畫畫
來自 Think Vitamin 的教程,介紹如何使用 Canvas 畫畫

HTML5 Canvas – 基礎
來自 Dev.Opera 的 HTML5 Canvas 基礎介紹

考慮 HTML5 Canvas 的可訪問性
Canvas 可訪問性概覽

HTML5 Canvas 特性指南
一份來自 Six Revisions 的綜合指南

Canvas 教程
來自 mozilla 的開發者網絡,包括繪製形狀,使用圖像,以及更多其餘教程。適合 Canvas 初學者。

四、本地存儲教程

使用 HTML5 本地存儲實現便籤功能
一個本地存儲實踐教程

使用 HTML5 和 CSS3 技術實現便籤功能
這個案例的便籤在被關閉時有一個很酷的動畫效果

HTML5 應用的瀏覽器存儲
又一個在 HTML5 應用中使用本地存儲的教程

HTML5 本地存儲 – 第一部分
一份 HTML5 本地存儲教程的第一部分

快速技巧:學習 HTML5 本地存儲
來自 Nettuts+ 的視頻教程

webOS HTML5 數據庫存儲教程
一個關於在 Palm webOS 上使用 HTML5 本地存儲功能的教程

五、表單教程

使用 HTML5 表單大幹一番

如何建立跨瀏覽器的 HTML5 表單

使用 HTML5 和 CSS3 設計搜索框

從新考量 HTML5 表單

HTML5 表單來了
一些簡要信息,關於 HTML5 對錶單設計意味着神馬

六、視頻和多媒體教程

使用 CSS3 和 jQuery 建立自定義的 HTML5 視頻播放器

如何建立 HTML5 視頻播放器

映射到 3D 空間的 HTML5 視頻

打造跨瀏覽器的 HTML5 視頻(包括 iPad)
關於 HTML5 視頻的教程

HTML5 視頻元素
來自 HTML5 Doctor 的關於 HTML5 視頻元素的教程

七、移動設備應用教程

如何建立基於 HTML5 的 iPhone 應用
這份教程告訴你如何爲 iPhone 建立一個離線的 HTML5 應用

HTML5 應用:使用 Geolocation 定位
介紹 HTML5 中的地理定位 (geolocation) API

使用 HTML5 建立移動 Web 應用,第一部分
來自 IBM’s developerWorks 2010 年的某篇參考文章的第一部分

使用 HTML5 在移動設備上建立離線 Web 應用
又一個來自 IBM’s developerWorks 的教程

HTML5 應用:神馬,爲神馬,咋整?
來自Nettuts+ 的 HTML5 應用概覽

八、更多教程

如何使用 HTML5,CSS3,jQuery 技術建立可愛的彈窗工具
來自 SpyreStudios 的實踐教程

如何讓全部瀏覽器正確渲染 HTML5 標籤,甚至是 IE6
來自 Nettuts+ 站點

讓使用 HTML5 和 CSS3 再也不遺憾
使得 HTML5 和 CSS3 技術更加跨瀏覽器兼容的工具和技術

實現 HTML5 拖拽
一份來自 Nettuts+ 的教程

個人 5 個 HTML 編碼習慣
一些我的編碼喜愛分享和指導意見

HTML5 微數據:歡迎來到機器世界
一個關於微數據 (microdata) 規範的概覽

結合 CSS3 和 HTML5 技術
一份來自 Nettuts+ 的教程

HTML5:解決 nav 的歧義
來自 Jeffrey Zeldman 關於使用 nav 元素的一些說明

九、HTML5 備忘單和快速參考

HTML5 和 CSS3 支持
一個很是方便的表格,包括了 HTML5 和 CSS3 的瀏覽器兼容性檢查

HTML5 蓄勢待發
一個互動性質的圖標,給出了每一個主流瀏覽器的對 HTML5 的兼容性差別

HTML5 口袋書
一個袖珍的 HTML5 參考指南

HTML5 Canvas 備忘單

HTML5 備忘小抄

HTML 5 備忘單 (PDF)

HTML5 圖表參考手冊
一個圖標,解釋了 HTML5 和 HTML5 所能作到的事情

HTML5 標籤手冊
來自 W3CSchools 的手冊

HTML5 詞彙表
來自 HTML5 Doctor 站點

HTML 5 參考手冊
官方的 W3C 參考手冊

HTML5 和 HTML4 不一樣
來自 W3C 站點

HTML5 所支持的特性
一個涵蓋瀏覽器對 HTML5 特性支持狀況的參考手冊

神馬時候能用 HTML5?
檢查各類不一樣瀏覽器的 HTML5 支持差別

佈局引擎比較 (HTML5)
諸多瀏覽器佈局引擎對 HTML5 和 HTML4 的支持狀況對比,來自維基百科

HTML5 ID/Class 命名參考
HTML5 結構性元素指南

HTML5 測試
測試你的當前瀏覽器對 HTML5 的支持狀況,並顯示其餘瀏覽器的評分

HTML5 追蹤
一個跟蹤 HTML5 標準修訂的參考表

HTML5 安全備忘錄
一個方便的網站,顯示了某些場景下瀏覽器是如何處理 HTML5 元素的

十、專業的 HTML5 站點

W3C HTML5 Logo
包括官方的 HTML5 Logo、以及畫廊和商品連接等

HTML5 教程
HTML5 教程站點有不少 HTML5 教程和新聞

免費 HTML5 模版
一個基本、免費 HTML5 模版集合

HTML5 Rocks
包括教程、資源,一級 HTML5 試驗場

HTML5 Doctor
包括問答,文章等等和 HTML5 相關的信息

HTML Canvas 教程
一個講解 HTML5 Canvas 教程和展現案例的站點

WHATWG 工做組博客
HTML5 標準 WHATWG 工做組的官方博客

HTML5Trends.com
一個 HTML5 新聞資訊類站點

移動端 HTML5
一個專門用於教學 HTML5 的移動 Web 應用與開發的網站

十一、框架

HTML5 Boilerplate
一份堅實可靠的 HTML5 框架

Less Framework 4
Less Framework 4 框架是一個結合 CSS3 和 HTML5 的框架,可選移動端端和桌面端

52 Framework
一個關聯 HTML5CSS3 和 JavaScript 的框架

SproutCore
一個 HTML5 應用程序框架

Roots WordPress 主題
一個 HTML5 和 CSS3 的 WordPress 基礎主題

LimeJS
一個 HTML5 遊戲框架

Baseline
一個 CSS 柵格,包括一些 HTML5 元素預約義樣式

Baker 電子書框架
一個適用於 iPad 的電子書框架,基於 HTML5 構建

Popcorn.js
一個用於視頻的 HTML5 JavaScript 庫

DHTMLX Touch
一個基於 HTML5 的 JavaScript 庫,適用於移動端的應用

適用於 WordPress 的 HTML5 多媒體框架
一個 HTML5 多媒體框架 WordPress 插件

H5 WordPress 主題
一份基於 HTML5 的 WordPress 主題

SwitchToHTML5
一個 HTML5 框架生成器

Jo
一個移動端的 HTML5 應用框架

HTML5 樣板官方指南
來自 Nettuts+ 站點的指南

十二、案例展現

HTML5 Mania
HTML5 Web 設計畫廊

HTML5 展現
專業 HTML5 站點畫廊

HTML5 網站
有一個 HTML5 站點畫廊

HTML5 精英
有一份 HTML5 案例展現

基於 HTML5
HTML5 Web 設計案例展現

HTML5 案例:48 個擊敗 Flash 的案例

HTML5 畫廊
HTML5 站點大集合

Canvas 案例
關於 HTML5 Canvas 的應用程序、遊戲、工具和教程

12 個漂亮的 HTML5 Web 設計案例
12 個 HTML5 站點展現

潛伏在將來:25 個超現代的使用 HTML5 的網站
25 個基於 HTML5 站點的案例展現

30 個佈局由 HTML5 核心支持的壯麗網站
另外一份基於 HTML5 站點的展現案例

1三、演示和案例

HTML5 演示和案例
一些 HTML5 功能演示,一份瀏覽器兼容手冊

HTML5 Canvas 和 Audio 視頻音頻實驗
一個很酷的 HTML5 Canvas 動畫

HTML5 和 CSS3 實驗
一系列的 HTML5 元素、佈局實驗和演示

SublimeVideo
一個 HTML5 視頻播放器

Projekktor
一個免費的 HTML5 視頻播放器

10 個能讓你忘記 Flash 的 HTML5 演示

12 個難以置信的 HTML5 實驗

給你們的 Video
另外一個 HTML5 視頻播放器

HTML5 媒體
使得 video 和 audio 在住瀏覽器上都能正常使用

Modernizr
一個使得 HTML5 和 CSS3 元素兼容老瀏覽器的 JavaScript 庫

1四、書籍

給 Web 設計師的 HTML5 書籍

HTML5:設計富 Web 應用

真實世界的 HTML5 和 CSS 3

使用遊戲學習 HTML5 和 JavaScript,一份 HTML5 基礎教程

HTML5 和 CSS3,用明天的標準作今天的設計

HTML5 Canvas:原生的交互和動畫

專業的 HTML5 和 CSS3 設計模式

專業的 HTML5 編程:用於開發富 Web 應用的強大的 API

HTML5 解決方案:適合於 HTML5 開發人員的基本技術

利用 HTML5 Canvas 實現遊戲

使用 JavaScript 實現 HTML5 動畫

HTML5 視頻權威指南

HTML5 24 小時培訓

深刻 HTML5

HTML5 簡介

了不得的 HTML5

1五、更多資源和教程

HTML5 Web Sockets 如何與代理服務器實現互動

HTML5 概覽
來自 A List Apart,發佈於 2007 年 12 月

是的,你如今可使用 HTML5 了!
一篇 Sitepoint 文章,發佈於 2009 年中

HTML5 和 CSS3 的力量
一篇深刻介紹 HTML5 和 CSS3 的文章,發佈於 2009 年中

HTML5 語義
2009 年 A List Apart 上發佈的一篇談論 HTML5 元素語義的文章

Kaltura HTML5 媒體庫
一個 JavaScript 類庫,讓你能在各類瀏覽器下應用 HTML5 視頻和音頻

有關開發命名約定,微格式,和 HTML5
來自 For A Beautiful Web 站點

HTML5 崛起
來自 Adactio 站點

Steve Smith 談 HTML5 和 CSS3
談論 HTML5 和 CSS3 對 Web 設計意味着什麼,來自 Think Vitamin

HTML5 和 CSS3 把你帶到另外一個設計層次
來自 Web Design Ledger 站點

HTML5:現實和神話
來自 Smashing Magazine 的關於 HTML5 的許多神話和誤解

HTML5 和你
來自Nettuts+ 站點

HTML5 在 App 上的應用
講述 HTML5 如何應用在 App 上

1六、更多 HTML5 搜捕

終極 HTML5 工具包:60+ 文章、教程、資源和啓發靈感的案例展現

學習 HTML5:10 個必要緣由

HTML5 的將來

HTML5 和 CSS3 資源終極收藏集

15 個實用的 CSS3 和 HTML5 模版和框架

23 個高質量 HTML5 資源

70 個必須收藏的 HTML5 和 CSS3 教程資源

HTML5 教程資源收集

25 個優質 HTML5 教程和技術

讓你忙死的 HTML5 教程和技術

15 個實用的 HTML5 教程和備忘單

惟一須要立刻閱讀的 HTML5 資源

22 個優秀的 HTML5 教程

40+ 開發者必看的 HTML5 教程,技術和案例

30+ 實用的 HTML5 案例,教程和技術

相關文章
相關標籤/搜索