首页 > 代码库 > HTML5资料整理 [From luics]

HTML5资料整理 [From luics]

 

项目组要做html5这块,花了一周左右时间收集的,快有一年时间了,部分内容需要更新,仅供参考。如需更新请回复

 

几点说明:

  1. 本次收集的信息以HTML5为主,这里的HTML5 ~= HTML5 + Javascript + CSS3
  2. 以下资料的协议相关部分主要来自W3CWHATWGdemo库和开发工具等主要来自IT企业、技术组织的官网或其信息站点
  3. W3C正式发布的协议称为Recommendation(推荐),下文中“协议”、“推荐”、“REC”是同义词;“协议”未通过之前以“草案”的形式存在

[基本信息]

2个组织

  • W3C,万维网联盟,Web标准制定者
  • WHATWG,由浏览器厂商的员工发起的非正式组织,致力于改进HTML,其成员来自MozillaOperaAppleGoogle

HTML5发展

  • HTML 4.011999年发布,2000W3C发布了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希望创建一个有本地存储、富客户界面、高效网络IOWeb AppHTML5 Presentation是以下文字和图表更加直观的版本:

  • 语义(Semantic),新增headerfooternavfig等含有语义的标签,以及一系列含有语义的标签属性
  • 离线&存储(Offline&Storage),主要包括Local Storage、Indexed DB、File API
  • 设备访问(Device Access),定位信息已经广泛应用,其他还有视频、音频流(如语音输入 ),移动设备的传感器(如方向传感器)
  • 网络连接(Connectivity),增加Web Socket、服务器数据推送
  • 多媒体(Multimedia),增加videoaudio标签,提供原生的视频、音频访问
  • 图形接口(GDI),增加canvas标签,提供2D3D GDI,现已有第3方的WebGL可以提供3D加速渲染
  • 性能&整合(Performance & Integration),Web Workers实现脚本后台运行,并提供前后台交互接口,XMLHttpRequest 2提供更好的网络IO
  • CSS3,目前仍在开发之中,主流浏览器已经支持其中部分特性Dashboard是更完整的CSS3 demo

 

最新进展参见WHATWG NewsW3C HTML首页

  • 最新草案发表于2011.9.6
  • W3C希望能在2014html5成为Recommendation ,参见html5 FAQ

 

[Demo]

这里将所有demo库粗略分为应用和游戏,涵盖了组织、企业、个人开发或收集的demo

[应用demo]

EdgeSamplesAdobe Edge制作的html5动画

  • AdobeRain制作的logo动画1动画2
  • 比较精美的齿轮动画
  • 过山车动画
  • 2Banner广告
    • 简单的banner动画广告js库文件138KB 动画自身js+css 10KB
    • 另一个Banner公益广告

Html5Rocks Google demo

  • HTML5 Presentation h5ppt,详细介绍了h5的新特性,里面的demo可直接玩
  • WebGL Globe,使用WebGL 3D加速,展示canvas 3D特性
  • Ascii Art,使用WebSocket同步服务器数据(字符视频)
  • Notification TimeNotification API,提供页面范围以外的消息提示,目前主流浏览器中只有chrome实现
  • Drag n Drop Photos, 拖拽文件到浏览器,使用DnDFile API
  • Page Flip,书本翻页,基于CSS3 2D transformanimation

html5demos ,人气很高的第三方demo库,提供按特性过滤查看demo

Web O‘ Wonder,奇幻网络,Mozilla提供的demo

  • Dashboard,展示HTML5CSS3SVGJS等技术的新特性,CSS3demo很丰富

Safari Technology DemosApple提供的demo

  • Photo Transitions,图片切换的动画效果
  • Gallery,幻灯片,多种展现模式:水平、垂直、3D滚动..
  • 虚拟现实(VR),基于css3 transforms
  • 360°360°旋转,本以为是3D效果,竟然用了72张图片

IE Test DriveMicrosoftIE开的demo库站点,大量html5demo

10K ApartHTML5竞赛作品,基本要求是打包后10KB以内

canvasdemos,专注于canvasdemo

HTML5研究小组收集的demo,“HTML5研究小组”是中国首个HTML5推广和交流的开放组织

一些零散的demo

  • iGrapher,很炫的报表程序
  • Cloudkick3D,显示云服务器状态

[游戏demo]

Mozilla Labs GamingMozilla官方的html5游戏demo库,下面是库中获奖作品

  • Marble Run,冠军游戏(best web-iness),画面精细,chrome13下运行较流畅(汗)
  • Robots are people too,获得“最有趣奖”(most fun

html5games,第三方游戏demo

  • html5版的俄罗斯方块

HTML5研究小组收集的游戏demo

游戏引擎:ImpactRocketGameClosureYoYo

一些零散的demo

  • CubeSpace,搭积木,强大的回放功能

[兼容性]

Html5 test,提供html5新特性的检测

html5兼容性手册

  • Where can I use..,提供详尽的兼容性信息,提供按特性查找
  • HTML5 readiness,数据来源于前者,提供按时间查询HTML5兼容性,有趣的展现形式

Compatibility Master Tablequirksmode提供的兼容性数据库,涵盖了DOMCSSJS

HTML5 in FirefoxMozilla 提供的Firefox html5兼容性列表

HTML5 in ChromeChromium提供的开发进度信息

HTML5 in IE官方版本非官方版本

Mobile HTML5Mobile BrowserHTML5的支持

兼容性工具

  • Compatibility Detector for Firefox,Firefox插件
  • W3C HTML验证,支持对html5文档进行验证
  • W3C CSS验证还不支持CSS3
  • html5shiv,让IE支持大部分html5特性,2KB

[开发]

开发手册&文档

  • HTML5 参考手册(中文版英文版),W3school的入门级手册,内含简单的demo
  • HTML5: Edition for Web AuthorsW3C面向web开发者的高级手册 WHATWG版本
  • HTML5 full specification,完整版手册,主要面向浏览器厂商 WHATWG版本
  • Dive Into HTML5,免费的在线h5教程
  • Mozilla HTML5

EdgeAdobe开发的html5动画制作工具,生成的动画依赖的库较多,直接用于mobile设备文件过大

Swiffyflashhtml5工具

Modernizrjavascript库,对html5css3 做退化处理

CSS3-HTML5之家,国内的一个站点

HTML5研究小组

ScirraHTML5 游戏开发平台(付费)