如需更新请回复,7个有用的HTML5学习资源

作者: 前端  发布:2019-09-29

7个有用的HTML5学习资源

2011/01/18 · HTML5 · HTML5

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

  一、HTML5开发者指南

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

  二、WHATWG博客

9159.com 1

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

  三、Dive Into HTML 5(钻研HTML5)

9159.com 2

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

  四、HTML5医生

9159.com 3

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

  五、When can I use

9159.com 4

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

  六、HTML5可视备忘单

9159.com 5

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

  七、HTML5画廊

9159.com 6

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

原文:webdesignledger  译文:龙南客

 

赞 收藏 评论

9159.com 7

HTML5 Working Draft Specification

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

 

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

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

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

HTML5 Boilerplate

9159.com 8

 

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

  1. WTF is HTML5

几点说明:

LEADTOOLS Imaging HTML5 Module:

9159.com 9

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

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

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

[基本信息]

HTML5 Doctor

  1. Dive Into HTML 5

2个组织

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

9159.com 10

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

Can I Use

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

HTML5发展

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

  1. HTML5 Doctor
  • 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团队)

Modernizr

9159.com 11

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

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

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

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

TeeChart for Javascript & HTML5

  1. When Can I Use…

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

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

9159.com 12

  • 9159.com,语义(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

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

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

The HTML5 test

  1. HTML5 W3C Specifications (Editor’s Draft)

 

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

9159.com 13

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

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

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

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

HTMLLabel   

  1. Yes, You Can Use HTML 5 Today!

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

9159.com 14

 

Smashing Magazine

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

[Demo库]

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

  1. Coding A HTML 5 Layout from Scratch

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

HTML5 Demos and Examples

9159.com 15

[应用demo库]

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

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

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

HTML 5 Web开发人员的指南

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

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

9159.com 16

Html5Rocks, Google demo库

HTMLGoodies的HTML基础

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

  • 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

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

  1. HTML5 Gallery

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

9159.com 17

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

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

  • Dashboard,展示HTML5、CSS3、SVG、JS等技术的新特性,CSS3的demo很丰富
  1. A Web Developer’s Guide to HTML 5

Safari Technology Demos,Apple提供的demo库

9159.com 18

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

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

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

  1. HTML5 Demos and Examples

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

9159.com 19

canvasdemos,专注于canvas的demo库

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

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

  1. Web Designer’s Checklist: HTML5 Support Tables

一些零散的demo:

9159.com 20

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

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

[游戏demo库]

  1. HTML 5 differences from HTML 4

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

9159.com 21

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

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

html5games,第三方游戏demo库

  1. HTML5 – Wikipedia
  • html5版的俄罗斯方块

9159.com 22

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

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

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

  1. The HTML5 test

一些零散的demo:

9159.com 23

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

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

[兼容性]

原文作者

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

9159.com 24

html5兼容性手册

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

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

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

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

作者:Justin
出处:

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

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

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

Mobile HTML5,Mobile Browser对HTML5的支持

兼容性工具

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

[开发]

开发手册&文档

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

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

Swiffy,flash转html5工具

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

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

HTML5研究小组

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


本文由9159.com发布于前端,转载请注明出处:如需更新请回复,7个有用的HTML5学习资源

关键词: