Bomomo

Tunneler

Geolocation

Magnetic

Google Box

HTML5 Video Destruction

Sinuous

Cloth Simulation

Canvas Paint

Canvas Gradient(move the mouse to change the color)

Lines go all over the place

Drag and drop

Editable Content

Two videos in sync

Storage events

以下例子来自Chrome实验室，可能需要特殊方式访问。

Pong 3D

Interactive Circles

Geoid Viewer

The WebGL Globe

Tron Tank Program

Typographic Effects

Guess What Cup

Fractal Lab

Walking with CSS3

Core

如此精彩的例子确实让人感叹，HTML5技术值得学习……
原文链接：http://www.cnbeta.com/articles/144722.htm

HTML5 & CSS3 准备就绪

该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。

HTML5安全手册

CSS3按钮生成器

所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。

When can I use…（HTML5 & CSS3 浏览器兼容性）

很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。

CSS3颜色值/名称速查手册

CSS3颜色值查询手册，包括颜色英文名、16进制值、rgb百分比、rgb整数值、颜色缩写和颜色效果等…

CSS3生成器

在线测试CSS3新特性，即时生成效果。

Modernizr

当前浏览器对HTML5支持情况测试

该工具可以帮助你测试当前你使用的浏览器对HTML5的兼容情况，很详细，很有用！

CSS 边框半径(代码生成器)

通过输入数值即可生成CSS3代码的CSS 边框代码生成器。使用很简便。

FindMeByIP（HTML5 & CSS3 浏览器兼容性手册）

很详细的HTML5和CSS3浏览器兼容性手册。

CSS3渐变生成器

CSS3 Watch

前端开发工具&资源小集合

CSS3, please!(实时体验CSS3代码)

font dragr

CSS3生成器

CSS桌面

CSS桌面可以让你在线练习CSS3代码，并实时将渲染效果呈现在右侧，很棒的CSS3在线练习工具。

HTML5修订版本跟踪器

font-face 生成器

CSS3 选择器测试工具

IE 打印保险器

详细CSS 浏览器支持情况列表

原文地址：http://www.20ju.com/content/V148926.htm

1.Blowing up HTML5 video and mapping it into 3D space（将HTML5视频吹散并组成3D效果）最近我研究了HTML 5中的Canvas 和Video 标签，并发现了一些很酷的特性。其中之一就是Canvas.drawImage() api。此为详细介绍。

2.Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3（用HTML5 和CSS3 打造向下兼容的网页）HTML5更加语义化，使用HTML5 我们不必在网页上布满没有意义的div。它引入了有意义的tag，比如 navigations 和 footers 使代码更有意义也更接近自然语言。

3.Coding A HTML 5 Layout From Scratch（HTML 5 布局）
这篇文章将教你

• 用原有技术将元素放置在特定位置
• 最新的技术潮流
• Microformats与HTML5协同使用
• 介绍HTML5与CSS3的新特性

4.Coding a CSS3 and HTML5 One Page Website Template（制作CSS3和 HTML5 一页式站点模板）这篇文章介绍了如何利用CSS3 和jQuery的新特性制作HTML5 网页模版。 HTML5 仍在完善当中，你也可以选择性的下载XHTML版。

5.Comprehensive video tutorial on HTML5（全面的HTML5视频指南）这 是一个叫Brad Neuberg的工程师制作的HTML5教学视频。

6.Create modern Web sites using HTML5 and CSS3（用HTML5与CSS3打造时尚站点）这篇文章介绍了许多HTML5的功能和语法及API，还有CSS3的新的选择器，效果和特性。最 后， 还将教你如何利用这些新特性开发一个网页。当你读完这篇文章，你就能用HTML5和CSS3开发一个自己的站点啦。

7.Designing a blog with html5（用html5设计博客）许多HTML5 特性要结合JavaScript API一起使用，以增加网页的互动性。但仍有一些新元素可让传统的Web1.0页面更加语义化。为了学习这些，我们来看怎样建立一个博客。

8.Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices（为未来设计：HTML 5 和 CSS3 指南与最佳案例）这篇文章将介绍用 HTML5和CSS3搭建的几个最佳站点。

9.Design and Code a Cool iPhone App Website in HTML5（用HTML5设计和实现一个超酷 iPhone App 网站）

10.Have a Field Day with HTML5 Forms（建立HTML 5表格）这篇文站将教你 如果用HTML 5 和高级CSS技术与最新的CSS3技术建立一个漂亮的表格。

11.How To Create A Nice Blog Design Touching The Future(不用photoshop，完成网页设计)

12.How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6（怎样让所有浏览器都渲染HTML5标记——即使是IE6）这篇文章将教你如何用JavaScript和CSS，使 HTML5页面向下兼容，即使是IE6也不例外。

13.How to Make an HTML5 iPhone App（制作HTML5 iPhone 应用）这是 一篇针对iPhone的指导，但是许多技术也可用在兼容HTML5的手机浏览器上。

14.HTML 5 and CSS 3: The Techniques You’ll Soon Be Using（HTML 5 和CSS 3：你将用到的技术）这篇文章使用HTML 5和CSS 3 搭建博客页面。如果你已经熟悉html 和CSS，将很容易跟上。

15.HTML5 for Beginners. Use it now, its easy!（HTML 5初学指南）给 所有具有基础HTML知识的初学者的HTML 5 入门指南

16.HTML5 Presentation这篇文章介绍了HTML5 的发展历史和它的基本特性

17.HTML5 Tutorial – Getting Started（HTML 5 入门指导）

18.How to Build Web Pages With HTML 5（怎样建立HTML 5网页）

19.Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3布局指南）

HTML5最令人期待的新标签包括<header>, <footer>, <aside>, <nav>, <audio>，同时它还包括画图，线下存储数据，拖放等API。页面布局将会更易理解。这里将介绍一个最简单的HTML 5 布局页面，用CSS3 设置样式。最终结果如下

20.Structural Tags in HTML5（HTML 5 结构标签）HTML5 有许多标签帮助网页结构化，这能省去以网页中许多div

21.HTML5 Boilerplates（HTML 5模板）此文介绍了一些你能拿来就用的HTML5 模板文件

22.HTML 5 canvas – the basics（HTML 5 基础——Canvas）对HTML 5 Canvas使用方法的全面指导

23.HTML 5 Tutorials（HTML 5 指南）

24.Implementing HTML5 Drag and Drop: New Premium Tutorial（HTML 5 拖放）HTML5 的一个新特性就是拖放，不过IE早在5.5时代就支持拖放了，而HTML 5 的拖放也是基于IE的。本例将教你如果用拖放实现一个简单的购物车界面。

25.Preview of HTML 5这是一篇比较老的文章，介绍了HTML5的特性和优点。

26.The HTML 5 Canvas For Flash Developers : Drawing（HTML 5 Canvas 的画图功能）

27.The Power of HTML 5 and CSS 3介绍了HTML 5 与CSS3能创造的各种效果。

28.View Source Tutorial: Sticky Notes With HTML5 and CSS3（HTML5 和CSS3 打造便利贴效果）

29.webOS HTML5 Database Storage Tutorial（webOS HTML5 数据存储指南）HTML5 的本地存储功能将使数据存储十分简便。

30.Yes, You Can Use HTML 5 Today!本文介绍了一些现已被支持的HTML 5 特性，对初学者十分有用。

文章来源：NTT.cc
翻译：lovelyashes
转载地址：http://www.cnbeta.com/articles/112981.htm

从 IETF 到 W3C: HTML 4 之路
HTML 1 并不曾存在，HTML 的第一个官方版本就是由 IETF （互联网工程任务组） 推出的 HTML 2.0。问世之前，这个版本中的很多细则已经被实现，比如，1994年的 Mosaic 浏览器已经实现了在文档中嵌入图片的方法，后来 HTML 2.0 便吸纳了 img 这个标签。

后来，W3C 取代 IETF 的角色，成为 HTML 的标准组织，1990年代的后半页，HTML 的版本被频繁修改，直到1999年的 HTML 4.01，至此，HTML 到达了它的第一个拐点。

XHTML 1: XML 风格的 HTML
HTML 在 HTML 4.01 之后的第一个修订版本就是 XHTML 1.0，其中 X 代表 “eXtensible” ，扩展，当然也有人将之解读为 “eXtreme”，极端。XHTML 1.0 是基于 HTML 4.01 的，并没有引入任何新标签或属性，唯一的区别是语法，HTML 对语法比较随便，而 XHTML 则要求 XML 般的严格语法。

使用严格的语法规范并非坏事，要求开发者使用单一的代码风格，比如，HTML 4.01 允许你使用大写或小写字母标识标记元素和属性，XHTML 则只允许小写字母。XHTML 1.0 的推出刚好碰上了 CSS 的崛起，Web 开发设计者们开始意识到 Web 标准问题，基于 XHTML 的严格语法规范被视为编写 HTML 代码的最佳实践。

于是，W3C 推出 XHTML 1.1。

如果说 XHTML 1.0 是 XML 风格的 HTML，XHTML 1.1 则是货真价实的 XML。这意味着 XHTML 1.1 无法使用 text/html mime-type 直接输出，然而，如果 Web 开发者使用 XML mime-type，则当时的主流浏览器，IE 则压根不支持。看上去，W3C 似乎正在与当时的 Web 脱节。

出力不讨好的 XHTML 2
对 W3C 而言，到了 HTML 4 已经是功德圆满，他们的下一步工作是 XHTML 2，希望将 Web 带向 XML 的光明未来。虽然 XHTML 2 听上去和 XHTML 1 类似，它们却有很多差别，XHTML 2 不向前兼容，甚至不兼容之前的 HTML。它是一种全新的语言，赤条条来去无牵挂。这实在是一场灾难。

WHATWG：与 W3C 决裂
W3C 闭门造车的作风引起了一些人的不满，来自 Opera, Apple, 以及 Mozilla 的代表开始表达反对声音。2004年，Opera 的 Ian Hickson 提议在 HTML 基础上进行扩展以适应新的 Web 应用，该提议遭到 W3C 的拒绝。于是，他们自发组织成立了超文本应用技术工作组，就是 WHATWG。

从 Web Apps 1.0 到 HTML5
从一开始，WHATWG 就和 W3C 走不同的路线，W3C 对问题的讨论是集体投票，而 WHATWG 则由主笔 Ian Hickson 定度。表面上看，W3C 更民主，然而事实上，各种内部纷争会使一些决议限于泥潭，在 WHATWG，事情的进展会更容易，不过，主笔的权力并非无限大，他们的委员会可以对那些过于偏执的主笔进行弹劾。

一开始，WHATWG 的主要工作包括两部分，Web Forms 2.0 和 Web Apps 1.0，它们都是 HTML 的扩展，后来，他们合并到一起成为现在的 HTML5 规范。

言归于好
在 WHATWG 致力于 HTML5 的同时，W3C 继续他们的 XHTML 2.0，然而，他们慢慢地陷入困境。

2006年10月，Web 之父 Tim Berners-Lee 发表了一篇博客文章，表示，从 HTML 走向 XML 的路是行不通的，几个月后，W3C 组建了一个新的 HTML 工作组，他们非常明智地选择了 WHATWG 的成果作为基础。这一转变带来一些困惑，W3C 同时进行这两套规范，XHTML 2 和 HTML 5 （注意，W3C 的 HTTML 5 在 5 之前有个空格，而 WHATWG 的 HTML5 则没有空格），而 WHATWG 也在进行着同样的工作。

XHTML 已死: XHTML 语法永存
这一混乱局面到了 2009 年开始变得清晰，W3C 宣布终止 XHTML 2 的工作，这是一份关于 XHTML 2 的迟到的讣告。这一消息被那些 XML 的反对者视为珍宝，他们借此嘲笑那些使用 XHTML 1 规范的人，然而他们似乎忘记了，XHTML 1 和 XHTML 2 是截然不同的东西。于此同时，XHTML 1 规范的制定者担心，XHTML 1 中的严格语法规范会被 HTML5 弃用，这种担心后来证明是多余的，HTML5 既支持松散语法，也支持 XHTML 1 般的严格语法。

HTML5 路线图
HTML5 的现状是，它不再象以前那样让人困惑，然而仍不够明朗。有两个组织在同时制定它的规范，这两个组织有着完全不同的行事风格，WHATWG 是先买后尝，W3C 是先尝后买，他们形成了一个不太靠谱的联姻，最终人们必将面临一个 HTML5 还是 HTML 5 的问题。

更让开发者困惑的是，他们什么时候才可以试水 HTML5。

在一次访谈中，Ian Hickson 提到了 2022，表示要到那时 HTML5 才会形成”推荐标准”，此话一出，立刻招来 Web 设计者们的愤怒，尽管他们不知道推荐标准时什么意思，但他们明白，2022 已经是猴年马月的事了。

这还不算，更重要的是，这个推荐标准涉及两套规范，考虑到 HTML5 标准的规模，这个日期还是太乐观了，毕竟，各大浏览器以往对既有标准的兼容并不遂人意，想当初，IE 花了10年才接纳 abbr 这个标签。

2012 年，HTML5 会被接纳为候选标准，这将是 HTML5 真正开始发力的日子。对 Web 开发设计者来说，这并不重要，重要的是浏览器的支持，就像 CSS 2.1，当有浏览器开始支持这一规范的时候，就有开发设计者在使用了，倘若必须等到所有浏览器都支持才开始入手，恐怕我们现在还在等待中。

HTML5 也一样，并不会有一个时间点，宣布 HTML5 已经准备妥当，相反，我们会先开始使用它的部分功能，HTML5 并不是一个从零开始全新的东西，它是旧的 HTML 标准的改进，事实上，不管你正在使用的 HTML 是哪个版本，你已经在使用 HTML5 了。

本文国际来源：A List Apart A Brief History of Markup （原文作者：Jeremy Keith）

原文链接：http://www.comsharp.com/GetKnowledge/zh-CN/It_News_K965.aspx