金沙总站手机登陆网址7个有用的HTML5学习资源,

2019-11-26 18:13 来源:未知

7个有用的HTML5学习资源

2011/01/18 · HTML5 · HTML5

虽然HTML5还是很新,没有被所有主要浏览器支持,但现在还是有许多设计师和开发人员使用。毫无疑问,几年下来,HTML5将对web开发起着很重要的作用。我注意到很多人都在使用它,但也有许多人还没有接触过HTML5。为了帮助学习这个任务,我们收集了7个有用的HTML5学习资源

  一、HTML5开发者指南

这个文档举例说明了如何编写HTML5文档,为初学者提供了简单和可实践的应用程序,也为高级开发人员提供了更深度的信息。

  二、WHATWG博客

金沙总站手机登陆网址 1

  WHATWG博客是网络超文本应用技术工作小组(Web Hypertext Application Technology Working Group)的博客,就是负责HTML5规格的那群人。

  三、Dive Into HTML 5(钻研HTML5)

金沙总站手机登陆网址 2

  Dive Into HTML 5是从HTML5规格和其他标准中精心挑选并详述其特征的一本书。

  四、HTML5医生

金沙总站手机登陆网址 3

  HTML5医生发表了许多文章,都是关于HTML5及其语义、及如何正确使用它的。他们也通过”询问医生”收集了很多问题,并在文章中予以回答,所有人都可从中受益。

  五、When can I use

金沙总站手机登陆网址 4

  这是一个以表格制成的备忘单形式的单页面,描述了HTML5、CSS3、SVG及其他未来网络技术的特征。

  六、HTML5可视备忘单

金沙总站手机登陆网址 5

  这个备忘单就是一个简单的可视网格,包含了所有HTML5标签和相关的属性。

  七、HTML5画廊

金沙总站手机登陆网址 6

  HTML5画廊有两个主要目标,一个是展示用HTML5布局的网站,我们可以从中看到别人如何理解HTML5规格和如何应用它。第二是帮助学习HTML5、如何使用HTML5及如何应用HTML5。

原文:webdesignledger  译文:龙南客

 

赞 收藏 评论

金沙总站手机登陆网址 7

HTML 5 Web开发人员的指南

金沙总站手机登陆网址 8

[应用demo库]

HTML5 Working Draft Specification

  1. HTML5 W3C Specifications (Editor’s Draft)

最新进展参见WHATWG News和W3C HTML首页:

Dive Into HTML 5
Mark Pilgrim 是知名软件开发师与博客作者,他在线编写了一本有关 HTML5 的书,侧重 HTML5 的编程方面的功能。

SitePoint 有一篇非常出色的文章,鼓励开发和设计者现在就开始部署使用 HTML5,还讲述了改如何编写代码,以适应那些尚不支持 HTML5 的浏览器,如 IE8。

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

HTMLLabel   

金沙总站手机登陆网址 9

  • WHATWG目前仍然是HTML5的主力,HTML5的最新进展会发布在这两个组织的官网,以下默认使用W3C公布的信息

本网站提供一个最新的HTML5,CSS3和相关技术的兼容性表,还提供了IE浏览器,火狐,Safari浏览器,浏览器和Opera的信息,包括最新的版本。其丰富的资源深受开发者和设计人员的一致好评。

金沙总站手机登陆网址 10

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

Smashing Magazine为开发人员和设计人员提供资源和建议。该网站并不是专门针对HTML5的行业网站,但是它提供HTML5相关教程和最新技术。

金沙总站手机登陆网址 11

Swiffy,flash转html5工具

包括HTML 5的功能,键盘事件,视频内容,媒体事件,鼠标事件和更多的教程。如果您正在寻找的文章来介绍如何使用HTML 5,它是一个开始的好地方。

  1. The HTML5 test

HTML5 in Chrome,Chromium提供的开发进度信息

TeeChart for Javascript & HTML5

这是 HTML5 的最新的草案,由 W3C 起草,如果你想对 HTML5 的方方面面有个权威的了解,这是最好的资源。

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

Smashing Magazine

  1. HTML5 Gallery

HTML5研究小组收集的游戏demo库

WTF is HTML5
这是一个关于 HTML5 Infographics 的站点,包含诸如 HTML5 同 Flash 的对比,HTML5 不同浏览器支持情况,HTML5 最受欢迎的功能等资料。

  1. HTML5 Demos and Examples

 

Modernizr

这是来自 Smashing Magazine 的一篇文章,讲述了如何使用 HTML5 的新元素进行页面布局设计。

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

Can I Use

这个站点可以帮您测试你的浏览器对 HTML5 的支持情况,并为你打出分数。

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

HTML5 Demos and Examples

金沙总站手机登陆网址 12

[开发]

LEADTOOLS Imaging HTML5 Module:

  1. When Can I Use…

html5games,第三方游戏demo库

HTML5 Doctor

作者:Justin
出处:

HTML5研究小组

Remy Sharp 是一位来自英国的 web 开发者,他编译了这套 HTML5 演示,包括简单的,基于浏览器的聊天程序,地理位置信息程序等等。

这个简单的单页式站点是一份 HTML5 各种功能同当前主流浏览器(以及它们的不同版本)的兼容清单。

Modernizr,javascript库,对html5、css3 做退化处理

这个站点可以帮您测试你的浏览器对 HTML5 的支持情况,并为你打出分数。

  1. HTML5 – Wikipedia

HTML5发展

其口号是“帮助你今天实现HTML5”,提供关于HTML5的文章和教程,介绍目前我们可以借助 HTML5 实现的应用。站点中的一些文章和栏目,也是 HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。

金沙总站手机登陆网址 13

 

HTML5 Boilerplate

原文作者

“WHATWG致力于web表单和应用程序,而W3C专注于XHTML 2.0。在2006年,双方决定进行合作,来创建一个新版本的HTML” —— 摘自W3school。

Modernizr是一个JavaScript库,可监测用户浏览器中的HTML5和CSS3 功能。并且它还自带HTML5模板,因此它已经成为HTML5开发者不可或缺的工具。有了Modernizr,开发人员可以轻松编写Javascript 条件语句和条件CSS来处理每种情况。

  1. HTML 5 differences from HTML 4

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

The HTML5 test

  1. HTML5 Doctor
  • 语义(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

HTMLGoodies的HTML基础

维基百科上有关 HTML5 的词条,非常权威,文章下方还提供了大量 HTML5 的权威资源。

兼容性工具

HTMLLabel是一个非常实用的HTML渲染器,其被封装为一个极轻量级的ActiveX控件,并特意为那些期望为其软件增强HTML功能的软件开发者们量身订做。

Remy Sharp 是一位来自英国的 web 开发者,他编译了这套 HTML5 演示,包括简单的,基于浏览器的聊天程序,地理位置信息程序等等。

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

通过往LEADTOOLS Imaging Pro Developer Toolkit中添加一个HTML5查看器控件,JavaScript库以及RESTful web服务,开发者可开发出强健、却又轻量级的无痕图像应用程序,这些应用程序可以在任何台式机、平板电脑或移动设备上运行。

一份非常全面的 HTML5 和 CSS3 浏览器兼容清单。

HTML5的新特性体现在下图显示的8个部分,HTML5希望创建一个有本地存储、富客户界面、高效网络IO的Web App。HTML5 Presentation是以下文字和图表更加直观的版本:

HTML 5的Web开发人员的指南被写在W3C上,旨在指导Web开发人员使用HTML5,并讨论了语法,API,词汇和其他方面的即将到来的标准。

这篇来自 W3C 的文章面向 Web 开发者,介绍了HTML5 的语法,API,术语以及各种开发者们关心的资源和技术。

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

TeeChart for Javascript & HTML5 是一个100%由 javascript TeeChart图表库开发的图表组件,可以在所有兼容的浏览器中以原生的Javascript格式使用HTML5 Canvas绘制图表。

金沙总站手机登陆网址 14

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

HTML5 Boilerplate是一个前端开发模板,拥有众多具有先进特性的框架。支持下载经典的HTML5 模板或者使用预先配置的响应式设计或者引导设计。开发人员可以利用HTML5模板来获取他们的HTML5 网站。

  1. Yes, You Can Use HTML 5 Today!

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

HTML5 Working Draft Specification译为HTML 5工作草案标准,它是 HTML5 的最新草案,由 W3C 起草,如果你想对 HTML5 的方方面面有个权威的了解,这是最好的资源。

发布 HTML5 相关的文章,介绍目前我们可以借助 HTML5 实现的应用。站点中的一些文章和栏目,也是 HTML5 相应技术的最佳注解,如 dl element ,article element 以及 Q&As 部分。这个站点由一群在 Future of Web Design 大会相遇相识的开发人员共同创办。

  • html5版的俄罗斯方块
  1. Coding A HTML 5 Layout from Scratch

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

金沙总站手机登陆网址 15

2个组织

HTML5 和 HTML4 到底有什么区别,这是 W3C 官方对比清单。

  • 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

金沙总站手机登陆网址 16

Edge的Samples,Adobe Edge制作的html5动画

金沙总站手机登陆网址 17

一些零散的demo:

这是一个 HTML5 站点展示站点,定期推出一些基于 HTML5 的站点介绍,你可以藉此借鉴先行者们的技巧和经验。

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

本文国际来源:sixrevisions.com The Only HTML5 Resources You Need for Getting Up to Speed

[基本信息]

  1. HTML5 presentation

Compatibility Master Table,quirksmode提供的兼容性数据库,涵盖了DOM、CSS、JS等

  1. Web Designer’s Checklist: HTML5 Support Tables

[游戏demo库]

金沙总站手机登陆网址 18

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

金沙总站手机登陆网址 19

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

这是一份关于 HTML5 的演示,是一份有关 HTML5 非常超前的资料,原本是为 Google Chrome用户 设计,因此,在某些浏览器上可能无法观看。

Safari Technology Demos,Apple提供的demo库

金沙总站手机登陆网址 20

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

Jacob Gube 是著名 Web 技术博客 Six Revisions 的创办者及主编,他是一个 Web 前端开发设计师,同时从事 PHP 开发,他还是 MooTools 1.2 Beginner's Guide 一书的作者。他的 Twitter 账号是 sixrevisions 。

Scirra,HTML5 游戏开发平台(付费)

点评:HTML5 越来越引起人们的关注,苹果甚至将 HTML5 视为 Flash 的掘墓人。然而,作为一种尚未成型的技术,HTML5 对很多人来说仍然是陌生的。

Mobile HTML5,Mobile Browser对HTML5的支持

金沙总站手机登陆网址 21

[Demo库]

  1. WTF is HTML5

  1. Dive Into HTML 5

 

金沙总站手机登陆网址 22

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

本文收集了 15 个非常值得收藏的 HTML5 资源,这些资源可以让你同 HTML5 的发展保持一致,并始终处于这门技术的最前沿。

[兼容性]

这是一个关于 HTML5 Infographics 的站点,包含诸如 HTML5 同 Flash 的对比,HTML5 不同浏览器支持情况,HTML5 最受欢迎的功能等资料。

开发手册&文档

金沙总站手机登陆网址 23

 

  1. A Web Developer’s Guide to HTML 5

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

Mark Pilgrim 是知名软件开发师与博客作者,他在线编写了一本有关 HTML5 的书,侧重 HTML5 的编程方面的功能。

几点说明:

金沙总站手机登陆网址 24

html5兼容性手册

一些零散的demo:

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

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

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

游戏引擎:Impact、Rocket、GameClosure、YoYo

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

IE Test Drive,Microsoft为IE开的demo库站点,大量html5的demo

canvasdemos,专注于canvas的demo库

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

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

Html5Rocks, Google demo库

  • Dashboard,展示HTML5、CSS3、SVG、JS等技术的新特性,CSS3的demo很丰富
TAG标签:
版权声明:本文由金沙总站手机登陆网址发布于金沙总站手机登陆网址,转载请注明出处:金沙总站手机登陆网址7个有用的HTML5学习资源,