当前位置：

Home
互联网
web技能
解读 HTML5：建议、技巧和技术

解读 HTML5：建议、技巧和技术

发布时间：2010/07/22 – 12:07 上午

本文链接: 解读 HTML5：建议、技巧和技术

浏览统计: 57

现今我们能用 HTML5 吗，能用它做些什么呢，是否真的是 Flash 杀手？想必你也注意到了这些日渐增长且常被问起的类似问题，被讨论着，甚至被回答过。在我看来，你必须自己回答这些基本的问题。

HTML5

HTML 5 特性

官方详细的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性：

语义化标记
Form 表单增强功能
视频 / 音频
画布（Canvas）
可编辑内容
拖放
稳健的数据存储

检测浏览器支持

在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走：

你还可以运行 Javascript（用Javascript 检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr：一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。

你可能也会想留意不断变化的”浏览器市场份额分享” — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。

值得注意的变更点

除了新的特征，你还应该记下这些重要的变更点：

简洁的 DOCTYPE HTML5 只需一个简洁的文档类型：<!DOCTYPE html>。它有意不使用版本，因此文档将会适用所有版本的HTML。
简单易记的语言标签 你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang=”en”> 将对 HTML5 有效。
简单易记的编码类型 你现在可以在 meta 标签中使用 “charset”：<meta charset=”utf-8″ />
不需要闭合标签 在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。
废弃的标签 下面这些标签并不被 HTML5 支持：

[html]
&amp;amp;amp;lt;acronym&amp;amp;amp;gt;、&amp;amp;amp;lt;applet&amp;amp;amp;gt;、&amp;amp;amp;lt;basefont&amp;amp;amp;gt;、&amp;amp;amp;lt;big&amp;amp;amp;gt;、&amp;amp;amp;lt;center&amp;amp;amp;gt;、&amp;amp;amp;lt;dir&amp;amp;amp;gt;、&amp;amp;amp;lt;font&amp;amp;amp;gt;、&amp;amp;amp;lt;frame&amp;amp;amp;gt;、&amp;amp;amp;lt;frameset&amp;amp;amp;gt;、&amp;amp;amp;lt;noframes&amp;amp;amp;gt;、&amp;amp;amp;lt;s&amp;amp;amp;gt;、&amp;amp;amp;lt;strike&amp;amp;amp;gt;、&amp;amp;amp;lt;tt&amp;amp;amp;gt;、&amp;amp;amp;lt;u&amp;amp;amp;gt; 和 &amp;amp;amp;lt;xmp&amp;amp;amp;gt;
[/html]

简单代码示例:

&amp;amp;amp;lt;/body&amp;amp;amp;gt;
&amp;amp;amp;lt;/html&amp;amp;amp;gt;

[/html]

你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。

语义化标记

HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品，并不提供额外的功能。这些都是新增的标签：<article>、<section>、<aside>、<hgroup>、<header>,<footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。

这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。

你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset：

简单代码示例: 兼容 IE 的 HTML5 页面布局

[html]
&amp;amp;amp;lt;!doctype html&amp;amp;amp;gt;
&amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;head&amp;amp;amp;gt;
&amp;amp;amp;lt;meta charset=&amp;amp;amp;quot;utf-8&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;title&amp;amp;amp;gt;HTML5 Semantic Markup Demo: Cross Browser&amp;amp;amp;lt;/title&amp;amp;amp;gt;
&amp;amp;amp;lt;link rel=&amp;amp;amp;quot;stylesheet&amp;amp;amp;quot; href=&amp;amp;amp;quot;html5reset.css&amp;amp;amp;quot; type=&amp;amp;amp;quot;text/css&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;link rel=&amp;amp;amp;quot;stylesheet&amp;amp;amp;quot; href=&amp;amp;amp;quot;html5semanticmarkup.css&amp;amp;amp;quot; type=&amp;amp;amp;quot;text/css&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;!–[if lt IE 9]&amp;amp;amp;gt;
&amp;amp;amp;lt;script src=&amp;amp;amp;quot;html5.js&amp;amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;![endif]–&amp;amp;amp;gt;
&amp;amp;amp;lt;/head&amp;amp;amp;gt;
&amp;amp;amp;lt;body&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;hgroup&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;Page Header&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;h2&amp;amp;amp;gt;Page Sub Heading&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
&amp;amp;amp;lt;/hgroup&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;
&amp;amp;amp;lt;nav&amp;amp;amp;gt;
&amp;amp;amp;lt;ul&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot;&amp;amp;amp;gt;Home&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot;&amp;amp;amp;gt;Projects&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot;&amp;amp;amp;gt;Portfolio&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot;&amp;amp;amp;gt;Profile&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;li&amp;amp;amp;gt;&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot;&amp;amp;amp;gt;Contact&amp;amp;amp;lt;/a&amp;amp;amp;gt;&amp;amp;amp;lt;/li&amp;amp;amp;gt;
&amp;amp;amp;lt;/ul&amp;amp;amp;gt;
&amp;amp;amp;lt;/nav&amp;amp;amp;gt;
&amp;amp;amp;lt;article&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;Article Heading&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;time datetime=&amp;amp;amp;quot;2010-05-05&amp;amp;amp;quot; pubdate&amp;amp;amp;gt;May 5th, 2010&amp;amp;amp;lt;/time&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;section&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;Section Heading&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Ut sapien enim, porttitor id feugiat non, ultrices non odio.&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;footer&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Section Footer: Pellentesque volutpat, leo nec auctor euismod&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;/footer&amp;amp;amp;gt;
&amp;amp;amp;lt;/section&amp;amp;amp;gt;
&amp;amp;amp;lt;section&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;Section Heading&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;figure&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-1.png&amp;amp;amp;quot; alt=&amp;amp;amp;quot;Club&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-2.png&amp;amp;amp;quot; alt=&amp;amp;amp;quot;Heart&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-3.png&amp;amp;amp;quot; alt=&amp;amp;amp;quot;Spade&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-4.png&amp;amp;amp;quot; alt=&amp;amp;amp;quot;Diamond&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;figcaption&amp;amp;amp;gt;FigCaption: Club, Heart, Spade and Diamond&amp;amp;amp;lt;/figcaption&amp;amp;amp;gt;
&amp;amp;amp;lt;/figure&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Ut sapien enim, porttitor id feugiat non, ultrices non odio&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;footer&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Section Footer: Pellentesque volutpat, leo nec auctor euismod est.&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;/footer&amp;amp;amp;gt;
&amp;amp;amp;lt;/section&amp;amp;amp;gt;
&amp;amp;amp;lt;footer&amp;amp;amp;gt;
Article Footer
&amp;amp;amp;lt;/footer&amp;amp;amp;gt;
&amp;amp;amp;lt;/article&amp;amp;amp;gt;
&amp;amp;amp;lt;aside&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;Siderbar Heading&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Ut sapien enim, porttitor id feugiat non, ultrices non odio.&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;/aside&amp;amp;amp;gt;
&amp;amp;amp;lt;footer&amp;amp;amp;gt;
Page Footer
&amp;amp;amp;lt;/footer&amp;amp;amp;gt;
&amp;amp;amp;lt;/body&amp;amp;amp;gt;
&amp;amp;amp;lt;/html&amp;amp;amp;gt;

[/html]

注意：没有一个 div 标签，id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

HTML5

注意：这个示例在 IE6 下并未正常显示。这只是因为我使用 CSS child combinators 来避免使用额外的 class。你可以在 IE6 下用自己的 CSS ，像其他浏览器一样处理 HTML5 标记。

其他资源

表单增强

HTML5 为表单提供了几个新的属性、input 类型和标签。到目前为止，只有 Opera 对HTML5 有比较好的支持。你因此应该下载 Opera 来查看大部分新特性如何工作。

新的INPUT类型
color, email, date, month, week, time, datetime, datetime-local, number,range, search, tel, 和 url
新属性
required, autofocus, pattern, list, autocomplete 和 placeholder
新元素
<keygen>, <datalist>, <output>, <meter> 和 <progress>

值得高兴的是尽管支持有限，使用这些特性也是个不错的选择。因为新的 INPUT 类型会漂亮地降级为 TEXT 类 INPUT（译注：INPUT 的默认 type 为 text）。且记住现今你仍可以折衷使用 Javascript 控制表单（这个技巧是指首先检测浏览器自身支持，然后才是使用折衷方法）。

简单代码示例：列出一些今天你可以拿来测试的新特性

[html]
&amp;amp;amp;lt;form&amp;amp;amp;gt;
&amp;amp;amp;lt;fieldset&amp;amp;amp;gt;
&amp;amp;amp;lt;legend&amp;amp;amp;gt;New Attributes&amp;amp;amp;lt;/legend&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Required:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5requied&amp;amp;amp;quot; required=&amp;amp;amp;quot;true&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera &amp;amp;amp;amp; Chrome&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;AutoFocus:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5autofocus&amp;amp;amp;quot; autofocus=&amp;amp;amp;quot;true&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera, Chrome &amp;amp;amp;amp; Safari&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;PlaceHolder:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5placeholder&amp;amp;amp;quot; placeholder=&amp;amp;amp;quot;This Will Show in WebKit&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Chrome &amp;amp;amp;amp; Safari&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Input Pattern:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; pattern=&amp;amp;amp;quot;[0-9][A-Z]{3}&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5pattern&amp;amp;amp;quot; required title=&amp;amp;amp;quot;Enter a digit followed by three uppercase letters&amp;amp;amp;quot;/&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera &amp;amp;amp;amp; Chrome&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Multiple Files:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;file&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5multiplefileupload&amp;amp;amp;quot; multiple&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Chrome, Safari &amp;amp;amp;amp; Firefox&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;List:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5textwithdatalist&amp;amp;amp;quot; list=&amp;amp;amp;quot;colors&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;datalist id=&amp;amp;amp;quot;colors&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;option value=&amp;amp;amp;quot;Red&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;option value=&amp;amp;amp;quot;Green&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;option value=&amp;amp;amp;quot;Blue&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;/datalist&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;/fieldset&amp;amp;amp;gt;

&amp;amp;amp;lt;fieldset&amp;amp;amp;gt;
&amp;amp;amp;lt;legend&amp;amp;amp;gt;New Input Types&amp;amp;amp;lt;/legend&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Email:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;email&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5email&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;URL:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;url&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5url&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Number:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;number&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5number&amp;amp;amp;quot; min=&amp;amp;amp;quot;1&amp;amp;amp;quot; max=&amp;amp;amp;quot;10&amp;amp;amp;quot; step=&amp;amp;amp;quot;1&amp;amp;amp;quot; value=&amp;amp;amp;quot;1&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Range:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;range&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5range&amp;amp;amp;quot; min=&amp;amp;amp;quot;-100&amp;amp;amp;quot; max=&amp;amp;amp;quot;100&amp;amp;amp;quot; value=&amp;amp;amp;quot;0&amp;amp;amp;quot; step=&amp;amp;amp;quot;10&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera, Chrome &amp;amp;amp;amp; Safari&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Time:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;time&amp;amp;amp;quot; step=&amp;amp;amp;quot;900&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5time&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Date:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;date&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5date&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Month:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;month&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5month&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;Week:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;week&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5week&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;label&amp;amp;amp;gt;DateTime:&amp;amp;amp;lt;/label&amp;amp;amp;gt;
&amp;amp;amp;lt;input type=&amp;amp;amp;quot;datetime&amp;amp;amp;quot; name=&amp;amp;amp;quot;html5datetime&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;small&amp;amp;amp;gt;Works in Opera&amp;amp;amp;lt;/small&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;/fieldset&amp;amp;amp;gt;

&amp;amp;amp;lt;div&amp;amp;amp;gt;&amp;amp;amp;lt;button&amp;amp;amp;gt;Submit&amp;amp;amp;lt;/button&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/form&amp;amp;amp;gt;

[/html]

HTML5 表单

在我们的 DEMO 中的出现的特性，都顺利地运行在 Opera 上，但你仍需要使用 Chrome 或 Safari 来看其他小部分功能的实际运行状态（View Demo）。

了解更多:

工具 & 资源列表:

不需要插件的视频和音频

HTML5 对视频和音频特性规范文档的制定是被讨论最多的。除浏览器自带支持的明显好处外，评论点集中在浏览器提供商对音频/视频格式的不同选择。如果你准备使用HTML5的 <audio> 和 <video>，使你熟悉下面这些视频/音频的解码器和浏览器支持是非常重要的：

音频: ogg (ogg, oga), mp3, wav, AAC
视频: ogg (ogv), H.264 (mp4)

另外你还需要留意一下 Google 的 VP8 视频解码，这个将被作为一个开源格式来结束（格式选择的）纷争。HTML5 提供的一个解决方案是，让你可以指定多个不同格式的源文件，以便于用户浏览器选择它认识的文件。对于 < IE9 和旧浏览器，你将需要一个折衷的解决方案。

当你第一次尝试 HTML5 的音频/视频，你可能会想知道这些可能对你有帮助的东东：

你的服务器必须支持你打算提供的音频/视频的 MIME 格式。你将需要检查一下其在本地服务器上是否被支持。
如果你使用 Safari 来检测 HTML5 的音频/视频支持，需要安装 QuickTime Player，没有QuickTime Player 的 Safari 什么都不能播放。

简单代码示例：音频标记 (View Demo)

[html]
&amp;amp;amp;lt;audio controls&amp;amp;amp;gt;
&amp;amp;amp;lt;source src=&amp;amp;amp;quot;demo-audio.ogg&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;source src=&amp;amp;amp;quot;demo-audio.mp3&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/audio&amp;amp;amp;gt;
[/html]

音频标记

简单代码示例：视频标记 (View Demo)

[html]
&amp;amp;amp;lt;video width=&amp;amp;amp;quot;320&amp;amp;amp;quot; height=&amp;amp;amp;quot;240&amp;amp;amp;quot; controls preload=&amp;amp;amp;quot;none&amp;amp;amp;quot; poster=&amp;amp;amp;quot;videoframe.jpg&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;source src=&amp;amp;amp;quot;demo-video.mp4&amp;amp;amp;quot; type=&amp;amp;amp;quot;video/mp4&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;source src=&amp;amp;amp;quot;demo-video.ogv&amp;amp;amp;quot; type=&amp;amp;amp;quot;video/ogg&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/video&amp;amp;amp;gt;

[/html]

译注：记得加上type，不然，即使格式对了，也可能播放不了

视频标记

尽管相对于要依赖第三方插件已经迈了一大步，但上面提供的示例，只是一个开始。由于各个浏览都提供了不同外观的控制栏，你可能会希望改变他们以适应你的设计。看看下面例子如何利用 DOM API 来创造一个属于你自己的自定义控制栏。

简单代码示例：拥有自定义控制栏的视频 (View Demo)

[html]
&amp;amp;amp;lt;video width=&amp;amp;amp;quot;320&amp;amp;amp;quot; height=&amp;amp;amp;quot;240&amp;amp;amp;quot; preload=&amp;amp;amp;quot;none&amp;amp;amp;quot; poster=&amp;amp;amp;quot;videoframe.jpg&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;source src=&amp;amp;amp;quot;demo-video.mp4&amp;amp;amp;quot; type=&amp;amp;amp;quot;video/mp4&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;source src=&amp;amp;amp;quot;demo-video.ogv&amp;amp;amp;quot; type=&amp;amp;amp;quot;video/ogg&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/video&amp;amp;amp;gt;

&amp;amp;amp;lt;script&amp;amp;amp;gt;
var video = document.getElementsByTagName(‘video’)[0];
function toggleMute() {
video.muted = !video.muted;
}
&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;
&amp;amp;amp;lt;a href=&amp;amp;amp;quot;JavaScript:video.play();&amp;amp;amp;quot;&amp;amp;amp;gt;Play&amp;amp;amp;lt;/a&amp;amp;amp;gt; |
&amp;amp;amp;lt;a href=&amp;amp;amp;quot;JavaScript:video.pause();&amp;amp;amp;quot;&amp;amp;amp;gt;Pause&amp;amp;amp;lt;/a&amp;amp;amp;gt; |
&amp;amp;amp;lt;a href=&amp;amp;amp;quot;JavaScript:toggleMute();&amp;amp;amp;quot;&amp;amp;amp;gt;Sound On/Off&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;/p&amp;amp;amp;gt;

[/html]

DOM API

你还可以利用 DOM API 来为音频/视频做更多。而且如果你乐意添加一些其他的东西，将会把这个带向一个完全不同的级别。例如，你可以把视频放到了 HTML5 canvas 元素中。这将会允许你读取一个视频的像素数据、控制、和帧，并做一些你想做的好玩的东东。（自己看看：Blowing up HTML5 Video, Ambilight for HTML5 Video）

了解更多：

跨浏览器解决方案：

Javascript 交互：

处理 HTML5 视频的 Mootools

编码、转换工具：

基于 JavaScript 的 2D 绘画

HTML5 中最让人兴奋的特性是 <canvas> — 那个用来作画的东东。在你的页面中插入 canvas 就像插入其他标记一样平常，但你将需要一些编程的经验来绘制形状、图表、动画、游戏、图片作品等。

2D 绘画

在除 IE 外的所有现代浏览器（Firefox 3, Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可以使用 ExplorerCanvas 这个 Javascript 解决方案来为 IE 添加这个新特性。

简单示例代码: 基于指令的 HTML5 Canvas 2D 绘画 (View Demo)

// Draw Rectangle
ctx.fillStyle = &amp;amp;amp;quot;rgb(255,0,0)&amp;amp;amp;quot;;
ctx.fillRect (10, 10, 100, 100);

// Draw Circle
ctx.fillStyle = &amp;amp;amp;quot;rgb(0,255,0)&amp;amp;amp;quot;;
ctx.beginPath();
ctx.arc(125,100,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();

// Draw Custom Shape With Lines
ctx.fillStyle = &amp;amp;amp;quot;rgb(0,0,255)&amp;amp;amp;quot;;
ctx.beginPath();
ctx.moveTo(125,100);
ctx.lineTo(175,50);
ctx.lineTo(225,150);
ctx.fill();
ctx.closePath();

// Draw Image From External File
var myImage = new Image();
myImage.onload = function(){
ctx.drawImage(myImage, 220, 10);
}
myImage.src = &amp;amp;amp;quot;sample.jpg&amp;amp;amp;quot;;

}
}
&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;style type=&amp;amp;amp;quot;text/css&amp;amp;amp;quot;&amp;amp;amp;gt;
canvas {
border: 5px solid #ccc;
background: #000;
}
&amp;amp;amp;lt;/style&amp;amp;amp;gt;
&amp;amp;amp;lt;/head&amp;amp;amp;gt;
&amp;amp;amp;lt;body onload=&amp;amp;amp;quot;draw();&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;HTML5 Canvas Demo&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;

&amp;amp;amp;lt;figure&amp;amp;amp;gt;
&amp;amp;amp;lt;canvas id=&amp;amp;amp;quot;mycanvas&amp;amp;amp;quot; width=&amp;amp;amp;quot;300&amp;amp;amp;quot; height=&amp;amp;amp;quot;200&amp;amp;amp;quot;&amp;amp;amp;gt;Fallback content, in case the browser does not support Canvas.&amp;amp;amp;lt;/canvas&amp;amp;amp;gt;
&amp;amp;amp;lt;figcaption&amp;amp;amp;gt;Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)&amp;amp;amp;lt;/figcaption&amp;amp;amp;gt;
&amp;amp;amp;lt;/figure&amp;amp;amp;gt;
&amp;amp;amp;lt;/body&amp;amp;amp;gt;
&amp;amp;amp;lt;/html&amp;amp;amp;gt;

[/html]

了解更多:

工具 & 资源列表：

示例 & 应用：

让内容可编辑

如果你想让页面的某个地方，允许用户编辑页面，所有的你需要做的事就是添加contenteditable 属性到父容器中。你可能曾在 WYSIWYG 编辑器中看过。这个属性是 HTML5 的一部分，且它几乎被所有主流浏览器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, and Opera 9.6+）：

值得注意的是设置 contenteditable=”true” 只是允许用户编辑、删除、插入内容，并不会自动提供其他类似于 WYSIWYG 编辑器的保存或应用样式的功能。你将需要自己用 Javascript 来添加这些功能。

内容可编辑

简单示例代码: 有加粗、倾斜和下划线功能的基本编辑器 (View Demo)

&amp;amp;amp;lt;script language=&amp;amp;amp;quot;javascript&amp;amp;amp;quot;&amp;amp;amp;gt;
function editStyle(cmd) {
document.execCommand(cmd, null, null);
}
&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;/head&amp;amp;amp;gt;
&amp;amp;amp;lt;body onload=&amp;amp;amp;quot;draw();&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;HTML5 ContentEditable Demo&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;

&amp;amp;amp;lt;div id=&amp;amp;amp;quot;democontainer&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&amp;amp;amp;quot;editingcontrols&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot; onclick=&amp;amp;amp;quot;editStyle(‘bold’);&amp;amp;amp;quot;&amp;amp;amp;gt;[Bold]&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot; onclick=&amp;amp;amp;quot;editStyle(‘italic’);&amp;amp;amp;quot;&amp;amp;amp;gt;[Italic]&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;a href=&amp;amp;amp;quot;#&amp;amp;amp;quot; onclick=&amp;amp;amp;quot;editStyle(‘underline’);&amp;amp;amp;quot;&amp;amp;amp;gt;[Underline]&amp;amp;amp;lt;/a&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&amp;amp;amp;quot;editor&amp;amp;amp;quot; contenteditable=&amp;amp;amp;quot;true&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;h2&amp;amp;amp;gt;HTML5 Standardized Content Editing&amp;amp;amp;lt;/h2&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;Thanks to Microsoft; HTML elements are editable since Internet Explorer 5.5….&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;p&amp;amp;amp;gt;To edit just start typing. To change style, select text and click on links in the tools bar.&amp;amp;amp;lt;/p&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;

&amp;amp;amp;lt;/body&amp;amp;amp;gt;
&amp;amp;amp;lt;/html&amp;amp;amp;gt;

[/html]

了解更多：

工具 & 资源列表：

拖放

HTML5 的拖放将会把与用户交互带向别一个等级，并将会对你如何设计用户交互产生重大影响。现今，Firefox 3.5+ 已经对此特性提供了最大化的支持，其他浏览还只是保守地支持了一小部分（Opera 完全不支持）。不幸的是根据现阶段浏览器提供商的执行状况，你将需要依赖大量的 Javascript 和 CSS 来让做跨浏览器支持。

注意：

图片和超链接默认是可拖放的。对于所有的元素，HTML5 引进了一个新的属性”draggable”，这将用来设置元素是否接受拖放；
下列事件对应 HTML5 的拖放：dragstart, drag, dragenter, dragover,dragleave, drop 和 dragend。当你要fire掉事件的时候，将需要写 function (事件处理器) 来处理你需要的，也可能需要给元素绑定事件或做事件指派来简化你的代码；
拖放事件还让你可以通过被拖放元素来传递数据，使用事件属性”dataTransfer” 的 getData 和 setData 方法。
你可以在不同的浏览器或程序中进行拖放。

简单代码示例: 将图片拖放到另一个窗口 (View Demo)

&amp;amp;amp;lt;script&amp;amp;amp;gt;
function DragHandler(target, e) {
e.dataTransfer.setData(‘Text’, target.id);
}

function DropHandler(target, e) {
var id = e.dataTransfer.getData(‘Text’);
target.appendChild(document.getElementById(id));
e.preventDefault();
}
&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;/head&amp;amp;amp;gt;
&amp;amp;amp;lt;body&amp;amp;amp;gt;
&amp;amp;amp;lt;header&amp;amp;amp;gt;
&amp;amp;amp;lt;h1&amp;amp;amp;gt;HTML5 Drag &amp;amp;amp;amp; Drop Demo&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;/header&amp;amp;amp;gt;
&amp;amp;amp;lt;div id=&amp;amp;amp;quot;dndcontainer&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;div ondrop=&amp;amp;amp;quot;DropHandler(this, event)&amp;amp;amp;quot; ondragenter=&amp;amp;amp;quot;return false&amp;amp;amp;quot; ondragover=&amp;amp;amp;quot;return false&amp;amp;amp;quot; class=&amp;amp;amp;quot;dndbox&amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-1.png&amp;amp;amp;quot; id=&amp;amp;amp;quot;club&amp;amp;amp;quot; ondragstart=&amp;amp;amp;quot;DragHandler(this, event)&amp;amp;amp;quot; width=&amp;amp;amp;quot;75&amp;amp;amp;quot; height=&amp;amp;amp;quot;75&amp;amp;amp;quot; border=&amp;amp;amp;quot;0&amp;amp;amp;quot; alt=&amp;amp;amp;quot;&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-2.png&amp;amp;amp;quot; id=&amp;amp;amp;quot;heart&amp;amp;amp;quot; ondragstart=&amp;amp;amp;quot;DragHandler(this, event)&amp;amp;amp;quot; width=&amp;amp;amp;quot;75&amp;amp;amp;quot; height=&amp;amp;amp;quot;75&amp;amp;amp;quot; border=&amp;amp;amp;quot;0&amp;amp;amp;quot; alt=&amp;amp;amp;quot;&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-3.png&amp;amp;amp;quot; id=&amp;amp;amp;quot;spade&amp;amp;amp;quot; ondragstart=&amp;amp;amp;quot;DragHandler(this, event)&amp;amp;amp;quot; width=&amp;amp;amp;quot;75&amp;amp;amp;quot; height=&amp;amp;amp;quot;75&amp;amp;amp;quot; border=&amp;amp;amp;quot;0&amp;amp;amp;quot; alt=&amp;amp;amp;quot;&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;img src=&amp;amp;amp;quot;item-4.png&amp;amp;amp;quot; id=&amp;amp;amp;quot;diamond&amp;amp;amp;quot; ondragstart=&amp;amp;amp;quot;DragHandler(this, event)&amp;amp;amp;quot; width=&amp;amp;amp;quot;75&amp;amp;amp;quot; height=&amp;amp;amp;quot;75&amp;amp;amp;quot; border=&amp;amp;amp;quot;0&amp;amp;amp;quot; alt=&amp;amp;amp;quot;&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;/div&amp;amp;amp;gt;

&amp;amp;amp;lt;div ondrop=&amp;amp;amp;quot;DropHandler(this, event)&amp;amp;amp;quot; ondragenter=&amp;amp;amp;quot;return false&amp;amp;amp;quot; ondragover=&amp;amp;amp;quot;return false&amp;amp;amp;quot; class=&amp;amp;amp;quot;dndbox&amp;amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt;

&amp;amp;amp;lt;div id=&amp;amp;amp;quot;demonotes&amp;amp;amp;quot;&amp;amp;amp;gt;Drag and drop images from one container to another. Works in all major browsers except Opera.&amp;amp;amp;lt;/div&amp;amp;amp;gt;

&amp;amp;amp;lt;/div&amp;amp;amp;gt;

[/html]

了解更多:

JavaScript 解决方案：

稳健的数据存储

Web 存储规范提供了与 HTTP session cookies 相似的稳健的 Web 存储属性。他们是”sessionStorage” 和”localStorage”。

sessionStorage 用以存储浏览最顶层环境生存周期内的数据。例如浏览器 Tab 的或窗口持续打开周期内的数据。
localStorage 用以存储周期较长、多页面，以及多浏览器 session 的内数据。甚至持续到你重起浏览器或者电脑。

本地和 session 存储特性被如下浏览器所支持：IE8+, Firefox 3.5+, Safari 4.0+, Chrome 2.0+ and Opera 10.5+。

简单代码示例: 使用 localStorage 来创建页面计数器 (View Demo)

[html]
&amp;amp;amp;lt;p&amp;amp;amp;gt;You Have Viewed This Page &amp;amp;amp;lt;b&amp;amp;amp;gt;
&amp;amp;amp;lt;script&amp;amp;amp;gt;
if (!localStorage.pageCounter)
localStorage.setItem(‘pageCounter’,0);
localStorage.setItem(‘pageCounter’,parseInt(localStorage.pageCounter)+1);
document.write(localStorage.pageCounter);
&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;/b&amp;amp;amp;gt; Time(s).&amp;amp;amp;lt;/p&amp;amp;amp;gt;

&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;lt;input value=&amp;amp;amp;quot;Clear localStorage&amp;amp;amp;quot; type=&amp;amp;amp;quot;button&amp;amp;amp;quot; onClick=&amp;amp;amp;quot;localStorage.clear();location.reload(true);&amp;amp;amp;quot; /&amp;amp;amp;gt;
&amp;amp;amp;lt;input value=&amp;amp;amp;quot;Reload Page&amp;amp;amp;quot; type=&amp;amp;amp;quot;button&amp;amp;amp;quot; onClick=&amp;amp;amp;quot;location.reload(true);&amp;amp;amp;quot; /&amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;
[/html]

你也可以把上面的代码中所有的 localStorage 的实例替换成 sessionStorage 来测试 sessionStorage。你的计数器将会在你关闭 Tab 或窗口前正常工作。如果你重起浏览器，计数器将会重新计数 (View Demo) 。

了解更多:

学习 HTML5 Local Storage

JavaScript 解决方案:

HTML5 Demos and Examples
一系列由 Remy Sharp 制作的 HTML5 实验
HTML5 Presentation
由 Marcin Wichary 开发，Ernest Delgado 修改。这个报告展示了桌面和移动浏览器上的 HTML5 特性
Information and Samples for HTML5 and related APIs
一系列由 Robert Nyman 制作的 HTML5 演示和例子
HTML5 Gallery
收集使用 HTML5 标记网站的Gallery

帮助手册

框架

Less
一个为多种屏幕宽度提供灵活多栏布局，由驱动于 HTML5 的 CSS 框架
52Framework
一个以让你在今天就能在项目上应用 HTML5 和 CSS3 的页面开发框架
SproutCore
一个由 Ruby gem 写的 JavaScript HTML5 应用程序框架。
Frame
Frame 是一个支持 Layout, Typography, Forms, Code, Table, Reset, 和 Print 标签样式化，并提供 HTML5 默认样式和元素支持的 CSS 框架

综述性文章 & 教程

用 HTML5 制作手机web程序
By Michael Galpin (IBM developerWorks – May 6th, 2010)
Touch The Future: 用 HTML5 和 CSS3 制作更优雅的网站
By Piervincenzo Madeo (PV.M Garage – April 23rd, 2010)
现在如何在你的客户需求上使用 HTML5
By Richard Clark (HTML5 Doctor – March 30th, 2010)
使用 HTML5 制作web 应用程序
By Michael Galpin (IBM developerWorks – March 30th, 2010)
如何制作一个 HTML5 iPhone App
By Alex Kessinger (Six Revisions – March 26th, 2010)
为什么 HTML5 值得你花时间
By Mac Slocum (O’Reilly – March 15th, 2010)
HTML5 让我震惊了
By Shane Jeffers (Three Styles – March 11th, 2010)
使用 HTML5 和 CSS3 创建时尚网站
By Joe Lennon (IBM developerWorks – March 2nd, 2010)
用 HTML5 和 CSS3 制作一个向后兼容的单页作品集页面
By Tom Kenny (Inspect Element – January 25th, 2010)
HTML5 将会如何改变你使用网站的习惯
By Kevin Purdy (Lifehacker – December 1st, 2009)
Coding A HTML 5 Layout From Scratch
By Enrique Ramirez (Smashing Magazine – August 4th, 2009)
HTML5 和 CSS3 的威力所在
By Jeff Starr (Perishable Press – July 19th, 2009)
是的，今天就可以使用 HTML5 了!
By Bruce Lawson (SitePoint – July 1st, 2009)
HTML5 中的新元素
By Elliotte Rusty Harold (IBM developerWorks – August 7th, 2007)

示例 & 下载

你可以下载打包了所有 Demo 的 ZIP 文件。注意：视频/音频并没有包含在下载中。

查看Demo | 下载演示文件

文章后面的那句话就不翻啦，套话。对于个人来说，目前会逐渐接触更多的 HTML5 和 CSS3 相关的新技术，希望能在后续的学习和研究中有所收获，并能将其应用到产品中，以提升产品在功能、速度和视觉上的体验。

中文翻译：幸福收藏夹
原文请看：HTML5 Unleashed: Tips, Tricks and Techniques。

标签: HTML HTML5 设计师

天津圣郡网络提供专业网站制作/网页设计/网站设计

天津网页制作|天津网站设计|天津网站制作|天津网络公司|天津做网站|网络发现者

解读 HTML5：建议、技巧和技术

HTML 5 特性

检测浏览器支持

值得注意的变更点

语义化标记

表单增强

不需要插件的视频和音频

基于 JavaScript 的 2D 绘画

让内容可编辑

拖放

稳健的数据存储

更多____

网页版离线程序

跨文档通讯

用 className 访问 DOM 元素

更多的特性

相关技术

额外的资源

必要的书签

示例 / 展廊

帮助手册

框架

综述性文章 & 教程

示例 & 下载

天津圣郡网络提供专业网站制作/网页设计/网站设计

热门设计案例

热门网站主题设计

web技能热门

最新文章

相关链接：

天津网页制作|天津网站设计|天津网站制作|天津网络公司|天津做网站|网络发现者

解读 HTML5：建议、技巧和技术

HTML 5 特性

检测浏览器支持

值得注意的变更点

语义化标记

表单增强

不需要插件的视频和音频

基于 JavaScript 的 2D 绘画

让内容可编辑

拖放

稳健的数据存储

更多____

网页版离线程序

跨文档通讯

用 className 访问 DOM 元素

更多的特性

相关技术

额外的资源

必要的书签

示例 / 展廊

帮助手册

框架

综述性文章 & 教程

示例 & 下载

天津圣郡网络提供专业网站制作/网页设计/网站设计

标签云

最受欢迎文章

热门设计案例

热门网站主题设计

web技能热门

最新文章

相关链接：