`
guoyiqi
  • 浏览: 967204 次
社区版块
存档分类
最新评论

史无前例的 HTML5 资源参考指南(转自:http://www.mangguo.org/the-ultimate-html5-resource-guide/)

 
阅读更多

尽管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技术优势的伟大概览,以及一些非常有用的技巧。

使用语义类名称为 HTML5 做预先准备
Jon Tan 写的一篇文章,关于HTML5中的新语义类。

HTML5:基础介绍
一份HTML5介绍,讲述 API,新元素等内容。

你必须知道的关于 HTML5 的一切
来自 TechRadar UK 的扫盲文章。

HTML5 教程
非常基础的教程站。

HTML5 中的结构化标签
介绍那些即将替换诸多 div 元素的结构化标签。

令人惊叹的 HTML5
非常实用的HTML5入门教程

HTML5,再一次
一份关于使用HTML5进行前端设计简要指南。

HTML5 演讲稿

一个关于HTML5的超大幻灯片,本身也是使用HTML5制作的。

Header 元素
来自HTML5Doctor 的一篇介绍 header 元素的文章。

HTML5 和 Web 的未来
从 2009 年 7 月开始,这篇文章包含了HTML5基础。

HTML5 中的 CSS 代码结构:一些实用指南
一些来自 Woork 的实用指南。

HTML5 如虎添翼:贴士,技巧和技术
一份HTML5概览,包括关于语义标记,表单等内容。

2、使用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 中编码HTMLCSS3系列的第一部分

使用 HTML5 和 CSS3 创建现代网站
来自 IMB’s developerWorks 的教程

使用 HTML5 编写网页
来自 Webmonkey 站点

使用 HTML5 设计一个博客

3、Canvas 教程

一个结合 HTML5 Canvas 和 jQuery 的幻灯片

使用 HTML5 和 Java Script 设计弹跳球

如何使用 HTML5 Canvas 画画
来自 Think Vitamin 的教程,介绍如何使用 Canvas 画画

HTML5 Canvas – 基础
来自 Dev.Opera 的HTML5Canvas 基础介绍

考虑 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 表单

使用HTML5CSS3设计搜索框

重新考量HTML5表单

HTML5 表单来了
一些简要信息,关于HTML5对表单设计意味着神马

6、视频和多媒体教程

使用 CSS3 和 jQuery 创建自定义的 HTML5 视频播放器

如何创建 HTML5 视频播放器

映射到 3D 空间的 HTML5 视频

打造跨浏览器的 HTML5 视频(包括 iPad)
关于HTML5视频的教程

HTML5 视频元素
来自HTML5Doctor 的关于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 不再遗憾
使得HTML5CSS3技术更加跨浏览器兼容的工具和技术

实现 HTML5 拖拽
一份来自 Nettuts+ 的教程

我的 5 个 HTML 编码习惯
一些个人编码喜好分享和指导意见

HTML5 微数据:欢迎来到机器世界
一个关于微数据 (microdata) 规范的概览

结合 CSS3 和 HTML5 技术
一份来自 Nettuts+ 的教程

HTML5:解决 nav 的歧义
来自 Jeffrey Zeldman 关于使用 nav 元素的一些说明

9、HTML5备忘单和快速参考

HTML5 和 CSS3 支持
一个非常方便的表格,包括了HTML5CSS3的浏览器兼容性检查

HTML5 蓄势待发
一个互动性质的图标,给出了每个主流浏览器的对HTML5的兼容性差异

HTML5 口袋书
一个袖珍的HTML5参考指南

HTML5 Canvas 备忘单

HTML5 备忘小抄

HTML 5 备忘单 (PDF)

HTML5 图表参考手册
一个图标,解释了HTML5HTML5所能做到的事情

HTML5 标签手册
来自 W3CSchools 的手册

HTML5 词汇表
来自HTML5Doctor 站点

HTML 5 参考手册
官方的 W3C 参考手册

HTML5 和 HTML4 不同
来自 W3C 站点

HTML5 所支持的特性
一个涵盖浏览器对HTML5特性支持情况的参考手册

神马时候能用 HTML5?
检查各种不同浏览器的HTML5支持差异

布局引擎比较 (HTML5)
诸多浏览器布局引擎对HTML5和 HTML4 的支持情况对比,来自维基百科

HTML5 ID/Class 命名参考
HTML5结构性元素指南

HTML5 测试
测试你的当前浏览器对HTML5的支持情况,并显示其他浏览器的评分

HTML5 追踪
一个跟踪HTML5标准修订的参考表

HTML5 安全备忘录
一个方便的网站,显示了某些场景下浏览器是如何处理HTML5元素的

10、专业的HTML5站点

W3C HTML5 Logo
包括官方的HTML5Logo、以及画廊和商品链接等

HTML5 教程
HTML5教程站点有很多HTML5教程和新闻

免费 HTML5 模版
一个基本、免费HTML5模版集合

HTML5 Rocks
包括教程、资源,一级HTML5试验场

HTML5 Doctor
包括问答,文章等等和HTML5相关的信息

HTML Canvas 教程
一个讲解HTML5Canvas 教程和展示案例的站点

WHATWG 工作组博客
HTML5标准 WHATWG 工作组的官方博客

HTML5Trends.com
一个HTML5新闻资讯类站点

移动端 HTML5
一个专门用于教学HTML5的移动 Web 应用与开发的网站

11、框架

HTML5 Boilerplate
一份坚实可靠的HTML5框架

Less Framework 4
Less Framework 4 框架是一个结合CSS3HTML5的框架,可选移动端端和桌面端

52 Framework
一个关联HTML5CSS3JavaScript的框架

SproutCore
一个HTML5应用程序框架

Roots WordPress 主题
一个HTML5CSS3WordPress基础主题

LimeJS
一个HTML5游戏框架

Baseline
一个CSS栅格,包括一些HTML5元素预定义样式

Baker 电子书框架
一个适用于 iPad 的电子书框架,基于HTML5构建

Popcorn.js
一个用于视频的HTML5JavaScript

DHTMLX Touch
一个基于HTML5JavaScript库,适用于移动端的应用

适用于 WordPress 的 HTML5 多媒体框架
一个HTML5多媒体框架WordPress插件

H5 WordPress 主题
一份基于HTML5WordPress主题

SwitchToHTML5
一个HTML5框架生成器

Jo
一个移动端的HTML5应用框架

HTML5 样板官方指南
来自 Nettuts+ 站点的指南

12、案例展示

HTML5 Mania
HTML5Web 设计画廊

HTML5 展示
专业HTML5站点画廊

HTML5 网站
有一个HTML5站点画廊

HTML5 精英
有一份HTML5案例展示

基于 HTML5
HTML5Web 设计案例展示

HTML5 案例:48 个击败 Flash 的案例

HTML5 画廊
HTML5站点大集合

Canvas 案例
关于HTML5Canvas 的应用程序、游戏、工具和教程

12 个漂亮的 HTML5 Web 设计案例
12 个HTML5站点展示

潜伏在未来:25 个超现代的使用 HTML5 的网站
25 个基于HTML5站点的案例展示

30 个布局由 HTML5 核心支持的壮丽网站
另一份基于HTML5站点的展示案例

13、演示和案例

HTML5 演示和案例
一些HTML5功能演示,一份浏览器兼容手册

HTML5 Canvas 和 Audio 视频音频实验
一个很酷的HTML5Canvas 动画

HTML5 和 CSS3 实验
一系列的HTML5元素、布局实验和演示

SublimeVideo
一个HTML5视频播放器

Projekktor
一个免费的HTML5视频播放器

10 个能让你忘记 Flash 的 HTML5 演示

12 个难以置信的 HTML5 实验

给大家的 Video
另一个HTML5视频播放器

HTML5 媒体
使得 video 和 audio 在住浏览器上都能正常使用

Modernizr
一个使得HTML5CSS3元素兼容老浏览器的JavaScript

14、书籍

给 Web 设计师的HTML5书籍

HTML5:设计富 Web 应用

真实世界的 HTML5 和 CSS 3

使用游戏学习 HTML5 和 JavaScript,一份 HTML5 基础教程

HTML5CSS3,用明天的标准做今天的设计

HTML5 Canvas:原生的交互和动画

专业的 HTML5 和 CSS3 设计模式

专业的 HTML5 编程:用于开发富 Web 应用的强大的 API

HTML5 解决方案:适合于 HTML5 开发人员的基本技术

利用HTML5Canvas 实现游戏

使用 JavaScript 实现 HTML5 动画

HTML5 视频权威指南

HTML5 24 小时培训

深入 HTML5

HTML5 简介

了不起的 HTML5

15、更多资源和教程

HTML5 Web Sockets 如何与代理服务器实现互动

HTML5 概览
来自 A List Apart,发布于 2007 年 12 月

是的,你现在可以使用 HTML5 了!
一篇 Sitepoint 文章,发布于 2009 年中

HTML5 和 CSS3 的力量
一篇深入介绍HTML5CSS3的文章,发布于 2009 年中

HTML5 语义
2009 年 A List Apart 上发布的一篇谈论HTML5元素语义的文章

Kaltura HTML5 媒体库
一个JavaScript类库,让你能在各种浏览器下应用HTML5视频和音频

有关开发命名约定,微格式,和 HTML5
来自 For A Beautiful Web 站点

HTML5 崛起
来自 Adactio 站点

Steve Smith 谈 HTML5 和 CSS3
谈论HTML5CSS3对 Web 设计意味着什么,来自 Think Vitamin

HTML5 和 CSS3 把你带到另一个设计层次
来自Web Design Ledger站点

HTML5:现实和神话
来自Smashing Magazine的关于HTML5的许多神话和误解

HTML5 和你
来自Nettuts+ 站点

HTML5 在 App 上的应用
讲述HTML5如何应用在 App 上

16、更多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 案例,教程和技术

英文原稿:The ultimate HTML5 resource guide | Webdesigner Depot
翻译整理:终极 HTML5 资源参考指南 | 芒果小站

分享到:
评论

相关推荐

    p-mangguo-H5:基于uiapp,芒果H5,实名认证,手写签名

    ios。uni.uploadFile ios eggjs传视频的问题 1,ios的视频格式与安卓不同,需要在eggjs配置格式白名单 2,formdata中添加_csrf:“安全”参数 3,增加一个文件类型:“视频”...5,最后有可能是hbuilderx编译器的问题

    JQuery 技巧和窍门整理(8个)

    1. 新窗口打开链接 XHTML 1.0 Strict 版本不支持 target=”_blank” 属性,而使用 ... /* Usage: <a>mangguo.org</a> */ 2. 获得匹配元素的总数 以下代码将返回匹配元素的数目: $(‘element’).size(); 3. 预加载图

    湖南电视-mangguoTV

    收看湖南的电视的手机应用程序,很好用的,速度也比较快

    软件项目管理师辅导教程上

    软件项目管理师辅导教程软件项目管理师辅导教程

Global site tag (gtag.js) - Google Analytics