来自http://www.cnblogs.com/luics/,新浪微博@徐凯-鬼道

HTML5资料整理

 

项目组要做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

最新进展参见WHATWG NewsW3C HTML首页

[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库

游戏引擎:ImpactRocketGameClosureYoYo

一些零散的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/,新浪微博@徐凯-鬼道

HTML5资料整理 [From luics]的更多相关文章

  1. iOS 开发学习资料整理(持续更新)

      “如果说我看得比别人远些,那是因为我站在巨人们的肩膀上.” ---牛顿   iOS及Mac开源项目和学习资料[超级全面] http://www.kancloud.cn/digest/ios-mac ...

  2. zz 圣诞丨太阁所有的免费算法视频资料整理

    首发于 太阁实验室 关注专栏   写文章     圣诞丨太阁所有的免费算法视频资料整理 Ray Cao· 12 小时前 感谢大家一年以来对太阁实验室的支持,我们特地整理了在过去一年中我们所有的原创算法 ...

  3. iOS 学习资料整理

    iOS学习资料整理 https://github.com/NunchakusHuang/trip-to-iOS 很好的个人博客 http://www.cnblogs.com/ygm900/ 开发笔记 ...

  4. H.264的一些资料整理

    本文转载自 http://blog.csdn.net/ljzcom/article/details/7258978, 如有需要,请移步查看. Technorati 标签: H.264 资料整理 --- ...

  5. 转:基于IOS上MDM技术相关资料整理及汇总

    一.MDM相关知识: MDM (Mobile Device Management ),即移动设备管理.在21世纪的今天,数据是企业宝贵的资产,安全问题更是重中之重,在移动互联网时代,员工个人的设备接入 ...

  6. 3分钟带你了解PowerShell发展历程——PowerShell各版本资料整理

    本文带你了解PowerShell发展历程,顺便整理了一点资料,方便大家查询. Windows PowerShell® 是基于任务的命令行管理程序和脚本语言,专为进行系统管理而设计. 在 .NET Fr ...

  7. (转载)2016 CCF大数据与计算智能大赛 开源资料整理

    本文转载自:http://blog.sina.com.cn/s/blog_5399b8660102wxks.html 2016 CCF 大数据与计算智能大赛已经落下帷幕,11个赛题由众多大神包揽奖项, ...

  8. Java 学习资料整理

    Java 学习资料整理 Java 精品学习视频教程下载汇总 Java视频教程 孙鑫Java无难事 (全12CD) Java视频教程 即学即会java 上海交大 Java初级编程基础 共25讲下载 av ...

  9. Niagara帮助文档资料整理

    1.任何软件额发布都会有说明文档,有的不会附具体实践的操作步骤,存在不懂得问题一般可以通过查看榜文文档解决问题 一些软件的帮助文档是一PDF格式存储在软件安装的目录下面,如Niagar workben ...

随机推荐

  1. Linux问题,磁盘分区打不开了

    Metadata kept in Windows cache, refused to mount. chkdsk /f http://www.bubuko.com/infodetail-1184937 ...

  2. C++代码书写模板 -- 如何判断函数类型

    先说一个简单的方案. 经过验证 g++ 和 vs2010 都可以.原理就是利用函数类型可以直接转换成函数指针. template<class T> bool test( T * t ) { ...

  3. Html.DropDownListFor的选项值为字符型问题

    我快要疯了.asp.net mvc的这个DropDownListFor,无论在服务器端如何设置,设置哪个值被选中,结果到了页面输出,选中值根本没有被选中,没有任何一个值被选中,下拉框只冷冰冰地显示一个 ...

  4. 【BZOJ3162】独钓寒江雪 树同构+DP

    [BZOJ3162]独钓寒江雪 题解:先进行树hash,方法是找重心,如果重心有两个,则新建一个虚点将两个重心连起来,新点即为新树的重心.将重心当做根进行hash,hash函数不能太简单,我的方法是: ...

  5. define tensorflow and run it

    import tensorflow as tf a, b, c, d, e = tf.constant(5, name='input_a'), tf.constant(6, name='input_b ...

  6. Fastjson 简介

    Fastjson is a Java library that can be used to convert Java Objects into their JSON representation. ...

  7. UVA11551 Experienced Endeavour —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/UVA-11551 题意: 给定一列数,每个数对应一个变换,变换为原先数列一些位置相加起来的和,问r次变换后的序列是多少 题解: 构造矩 ...

  8. 基于BASYS2的VHDL程序——数字钟(最终版)

    转载请注明原地址:http://www.cnblogs.com/connorzx/p/3674178.html 调时电路正常工作.一切正常.发现做FPGA还是得从数电的思路思考,设置一个预置使能端,预 ...

  9. SQL:内连接、左外连接、右外连接、全连接、交叉连接区别

    有两个表A和表B.表A结构如下: Aid:int:标识种子,主键,自增ID Aname:varchar 数据情况,即用select * from A出来的记录情况如下图1所示: 图1:A表数据表B结构 ...

  10. 字符编码乱码问题(servlet底层 编码大揭秘)

    好多初学者会遇到,请求过去的信息内包含中文(一般会是get方式提交过去的请求会出现).好郁闷,这是为什么呢.有下面分析下,说的不好可以吐槽 话说我们能遇到这种编码的问题,归根结底就是这  这 web开 ...