尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 JavaScript 或 Flash 实现的东西。这里收集了学习 HTML5 的 175 个参考资源,包括教程,框架,示例等。基本上算是 HTML5 葵花宝典了吧?
1、基础教程
HTML5 教程
来自 W3schools.com 的灰常灰常基础的教程。
HTML5 入门,简单易懂,马上使用!
来自 What!? 的指南,介绍 HTML5 初步。
你必须知道的 28 个 HTML5 特性、小贴士和技术
来自 Nettuts+ 的实用 HTML5 小贴士。
HTML 简介
一个 40 分钟的视频教程,来源于 Google 员工 Brad Neuberg。
快速技巧:你应该马上使用的 HTML5 特性
来自 Nettuts+ 的示范影片。
一个关于 HTML5 技术优势的伟大概览,以及一些非常有用的技巧。
使用语义类名称为 HTML5 做预先准备
Jon Tan 写的一篇文章,关于 HTML5 中的新语义类。
HTML5:基础介绍
一份 HTML5 介绍,讲述 API,新元素等内容。
你必须知道的关于 HTML5 的一切
来自 TechRadar UK 的扫盲文章。
HTML5 教程
非常基础的教程站。
HTML5 中的结构化标签
介绍那些即将替换诸多 div 元素的结构化标签。
令人惊叹的 HTML5
非常实用的 HTML5 入门教程
HTML5,再一次
一份关于使用 HTML5 进行前端设计简要指南。
一个关于 HTML5 的超大幻灯片,本身也是使用 HTML5 制作的。
Header 元素
来自 HTML5 Doctor 的一篇介绍 header 元素的文章。
HTML5 和 Web 的未来
从 2009 年 7 月开始,这篇文章包含了 HTML5 基础。
HTML5 中的 CSS 代码结构:一些实用指南
一些来自 Woork 的实用指南。
HTML5 如虎添翼:贴士,技巧和技术
一份 HTML5 概览,包括关于语义标记,表单等内容。
2、使用 HTML5 创建网站
HTML5 教程 – 从这里开始
一份基础 HTML5 教程,包括一个基本的模版文件。
使用 HTML5 和 CSS3 编写一个向后兼容的单页面作品集
触摸未来:使用 HTML5 和 CSS3 创建一个优雅的网站
使用 HTML5 设计编码一个炫酷的 iPhone App 网站
使用 HTML5 转换 WordPress TwentyTen 主题
利用 HTML5 优势改进 WordPress 默认 TwentyTen 主题的教程
Dreamweaver CS5 中的 HTML5 和 CSS3 第一部分:构建网页
来自 Adobe 的关于在 Dreamweaver CS5 中编码 HTML 和 CSS3 系列的第一部分
使用 HTML5 和 CSS3 创建现代网站
来自 IMB’s developerWorks 的教程
使用 HTML5 编写网页
来自 Webmonkey 站点
3、Canvas 教程
一个结合 HTML5 Canvas 和 jQuery 的幻灯片
如何使用 HTML5 Canvas 画画
来自 Think Vitamin 的教程,介绍如何使用 Canvas 画画
HTML5 Canvas – 基础
来自 Dev.Opera 的 HTML5 Canvas 基础介绍
考虑 HTML5 Canvas 的可访问性
Canvas 可访问性概览
HTML5 Canvas 特性指南
一份来自 Six Revisions 的综合指南
Canvas 教程
来自 mozilla 的开发者网络,包括绘制形状,使用图像,以及更多其他教程。适合 Canvas 初学者。
4、本地存储教程
使用 HTML5 本地存储实现便签功能
一个本地存储实践教程
使用 HTML5 和 CSS3 技术实现便签功能
这个案例的便签在被关闭时有一个很酷的动画效果
HTML5 应用的浏览器存储
又一个在 HTML5 应用中使用本地存储的教程
HTML5 本地存储 – 第一部分
一份 HTML5 本地存储教程的第一部分
快速技巧:学习 HTML5 本地存储
来自 Nettuts+ 的视频教程
webOS HTML5 数据库存储教程
一个关于在 Palm webOS 上使用 HTML5 本地存储功能的教程
5、表单教程
HTML5 表单来了
一些简要信息,关于 HTML5 对表单设计意味着神马
6、视频和多媒体教程
使用 CSS3 和 jQuery 创建自定义的 HTML5 视频播放器
打造跨浏览器的 HTML5 视频(包括 iPad)
关于 HTML5 视频的教程
HTML5 视频元素
来自 HTML5 Doctor 的关于 HTML5 视频元素的教程
7、移动设备应用教程
如何创建基于 HTML5 的 iPhone 应用
这份教程告诉你如何为 iPhone 创建一个离线的 HTML5 应用
HTML5 应用:使用 Geolocation 定位
介绍 HTML5 中的地理定位 (geolocation) API
使用 HTML5 创建移动 Web 应用,第一部分
来自 IBM’s developerWorks 2010 年的某篇参考文章的第一部分
使用 HTML5 在移动设备上创建离线 Web 应用
又一个来自 IBM’s developerWorks 的教程
HTML5 应用:神马,为神马,咋整?
来自Nettuts+ 的 HTML5 应用概览
8、更多教程
如何使用 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 元素的一些说明
9、HTML5 备忘单和快速参考
HTML5 和 CSS3 支持
一个非常方便的表格,包括了 HTML5 和 CSS3 的浏览器兼容性检查
HTML5 蓄势待发
一个互动性质的图标,给出了每个主流浏览器的对 HTML5 的兼容性差异
HTML5 图表参考手册
一个图标,解释了 HTML5 和 HTML5 所能做到的事情
HTML5 标签手册
来自 W3CSchools 的手册
HTML 5 参考手册
官方的 W3C 参考手册
HTML5 和 HTML4 不同
来自 W3C 站点
HTML5 所支持的特性
一个涵盖浏览器对 HTML5 特性支持情况的参考手册
神马时候能用 HTML5?
检查各种不同浏览器的 HTML5 支持差异
布局引擎比较 (HTML5)
诸多浏览器布局引擎对 HTML5 和 HTML4 的支持情况对比,来自维基百科
HTML5 ID/Class 命名参考
HTML5 结构性元素指南
HTML5 测试
测试你的当前浏览器对 HTML5 的支持情况,并显示其他浏览器的评分
HTML5 安全备忘录
一个方便的网站,显示了某些场景下浏览器是如何处理 HTML5 元素的
10、专业的 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 应用与开发的网站
11、框架
HTML5 Boilerplate
一份坚实可靠的 HTML5 框架
Less Framework 4
Less Framework 4 框架是一个结合 CSS3 和 HTML5 的框架,可选移动端端和桌面端
52 Framework
一个关联 HTML5、CSS3 和 JavaScript 的框架
SproutCore
一个 HTML5 应用程序框架
Roots WordPress 主题
一个 HTML5 和 CSS3 的 WordPress 基础主题
Baseline
一个 CSS 栅格,包括一些 HTML5 元素预定义样式
Baker 电子书框架
一个适用于 iPad 的电子书框架,基于 HTML5 构建
Popcorn.js
一个用于视频的 HTML5 JavaScript 库
DHTMLX Touch
一个基于 HTML5 的 JavaScript 库,适用于移动端的应用
适用于 WordPress 的 HTML5 多媒体框架
一个 HTML5 多媒体框架 WordPress 插件
H5 WordPress 主题
一份基于 HTML5 的 WordPress 主题
SwitchToHTML5
一个 HTML5 框架生成器
HTML5 样板官方指南
来自 Nettuts+ 站点的指南
12、案例展示
HTML5 Mania
HTML5 Web 设计画廊
Canvas 案例
关于 HTML5 Canvas 的应用程序、游戏、工具和教程
12 个漂亮的 HTML5 Web 设计案例
12 个 HTML5 站点展示
潜伏在未来:25 个超现代的使用 HTML5 的网站
25 个基于 HTML5 站点的案例展示
30 个布局由 HTML5 核心支持的壮丽网站
另一份基于 HTML5 站点的展示案例
13、演示和案例
HTML5 演示和案例
一些 HTML5 功能演示,一份浏览器兼容手册
HTML5 Canvas 和 Audio 视频音频实验
一个很酷的 HTML5 Canvas 动画
HTML5 和 CSS3 实验
一系列的 HTML5 元素、布局实验和演示
SublimeVideo
一个 HTML5 视频播放器
Projekktor
一个免费的 HTML5 视频播放器
给大家的 Video
另一个 HTML5 视频播放器
HTML5 媒体
使得 video 和 audio 在住浏览器上都能正常使用
Modernizr
一个使得 HTML5 和 CSS3 元素兼容老浏览器的 JavaScript 库
14、书籍
给 Web 设计师的 HTML5 书籍
HTML5:设计富 Web 应用
使用游戏学习 HTML5 和 JavaScript,一份 HTML5 基础教程
专业的 HTML5 编程:用于开发富 Web 应用的强大的 API
HTML5 解决方案:适合于 HTML5 开发人员的基本技术
15、更多资源和教程
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 上
16、更多 HTML5 搜捕
终极 HTML5 工具包:60+ 文章、教程、资源和启发灵感的案例展示