今天的 HTML5 可以用来做什么？答案

【问题标题】：What can be used of HTML5 today?今天的 HTML5 可以用来做什么？
【发布时间】：2011-07-12 19:43:27
【问题描述】：

现在可以可靠使用的 HTML5 有哪些特性？

微软有一些cool HTML5 demos，但其中哪些部分是经典的 EEE，他们正在追赶什么？

我在 SO：pushState 上找到的有用功能示例。

除了包含 HTML5 的标签和属性的完整列表的页面之外，请考虑更多。
@Jan Zyka 的 http://slides.html5rocks.com 答案就是一个很好的例子。（谢谢！）

您今天在生产代码中实际使用了什么？

【问题讨论】：

@tiagoinu 你想支持什么版本的IE？ IE8及以上？
嗨@Šime Vidas。越多越好。（我想指出我的目标不是最前沿的 Web 开发人员。）您可能在您的 Web 应用程序中使用 HTML5，所以：哪些部分？
@tiagoinu 嗯，除了 DOCTYPE 和 META 字符集的新的更短的符号外，我使用 data-* 属性。我还没有开始使用新的语义元素，目前我不需要 AUDIO/VIDEO/CANVAS/SVG。不过，我确实使用了 jQuery，它利用了许多 HTML5 特性。
@Šime Vidas。很高兴知道 jQuery 利用了 HTML5。也许我在不知情的情况下间接使用了 HTML5。您能否将我指向一篇讨论 jQuery 使用的 HTML5 功能的博客文章或文档页面？
@tiaoinu 1. data-* 属性（在 jQuery 源代码中出现 2 次），2. getElementsByClassName（7 次出现），3. setTimeout（5 次出现）和 setInterval（1 次出现），4。 innerHTML（出现 14 次）……应该还有更多。恐怕没有文章明确列出 jQuery 中使用了哪些 HTML5 功能。

标签： html

【解决方案1】：

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Canvas)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5_Media)
http://caniuse.com/
https://developer.mozilla.org/en/HTML/HTML5（在 Firefox 中实现的）

在 IE8 中实现的 HTML5 功能列表：

<meta charset="UTF-8">
contenteditable 属性（使任何 HTML 元素可编辑）
表单元素的autocomplete 属性
onhashchange 事件
拖放
data-* 属性

在 IE9 中实现的 HTML5 功能列表（附加）：

<canvas>
getElementsByClassName
<video> 和 <audio>
新的语义元素（<section>、<article> 等）
内嵌 SVG

注意：以上所有内容都是在现代浏览器中实现的。

【讨论】：

【解决方案2】：

查看http://slides.html5rocks.com/。真的很不错，而且会定期更新。

但不要在 IE8 中尝试，否则您可能会失望 ;-)

【讨论】：

【解决方案3】：

有一个名为 When can I use... 的网站列出了各种 HTML5、CSS3 和其他现代网络标准，并指出哪些浏览器版本支持它。

您能否使用某项功能在很大程度上取决于您的用户是谁。如果您的目标是尖端的 Web 开发人员，那么您可能会依赖他们拥有更新版本的浏览器，而不是针对企业会计。因此，您需要决定必须支持哪些浏览器版本，并进行适当的渐进增强或回退以支持旧浏览器，同时引入它们不支持的新功能。

一些 HTML5、CSS3 和其他功能可以使用“polyfills”在旧版浏览器中使用，这些功能是使用 JavaScript、Flash、专有功能等实现缺失功能的。例如，您可以通过使用ExplorerCanvas 在旧版本的 Internet Explorer 中使用 <canvas> 元素，它使用 JavaScript 和 Microsoft 专有的 VML 实现 HTML5 <canvas> 元素。 “我什么时候可以使用...”网站列出了许多功能的 polyfill，因此如果您愿意使用 polyfill，请选中 polyfill 复选框。

【讨论】：

【解决方案4】：

This page on the Browserscope website 让您可以选择相同或不同浏览器（桌面版和移动版）的版本，并查看它们在支持 HTML5 功能方面的表现。

【讨论】：