如何快速掌握HTML5有什么技巧

HTML5 对于初学者甚至是非程序员来说都有着十足的吸引力。实际上，只要你访问网站，就会和 HTML 打交道。如果能够熟悉一些关键的编程技巧，当你对网站做一些细节调整或优化基本的 Web 元素时就能节省大量的时间（甚至是金钱）。因此，本文精选了 10 个对于 Web 开发者来说非常实用的 HTML 编程技巧，而且它们不需要花太多时间精力就可以轻松掌握。

1. 可与本地缓存媒体资源交互

HTML5 FileSystem API 一开始被认为是 AppCache 的替代方案，用来实现资产的动态缓存。但是你知道吗，其实你还可以用它来实现与用户本地设备上存储文件的交互。

例如，你可以在应用中添加以下功能：

断点上传器：将文件复制到一个本地沙箱中，然后分批上传。出现连接中断、浏览器崩溃故障后可以重新启动上传操作。

为游戏、音乐播放器，照片编辑器等媒体密集型应用启用本地缓存。

为内容查看创建离线模式，例如离线视频、电子邮件附件和文本等。

注意：FileSystem API 仅被 Chrome 支持。

如果你想尝试离线存储功能，还可以参考以下资源和代码教程：

Eric Bidelman：如何使用 HTML5 FileSystem API[1]。

管理 HTML5 离线存储 [2]。

HTML5 中的脱机文件：FileSystem API[3]。

2. 进行自动表单验证

对于网站安全性和流畅的用户体验来说，表单验证非常重要。所以我们应该让用户更轻松地在你的网站上输入各种正确类型的值。

在 HTML5 中有几种新的输入类型可用，这些类型已经打包进了预定义的验证功能：

'email'

'url'

'tel'

但当你需要用户提供某些标准输入未指定的数据时（例如一个包含特殊字符的用户名），往往就会出问题了。这就是“pattern”属性派上用场的时候。

Pattern 可让你定义自定义规则，然后使用正则表达式（RegEx）验证表单输入。RegEx 指定了元素值将要检查的表达式。

下面是一个添加新规则的示例。例如，你要指定密码不应超过 15 个字符，并且只能包含小写字母：

Password:

为了更好地说明规则，你还可以添加一条自定义消息，告诉用户为什么他们输入的密码不符合要求。只需再加上一行来自定义弹出消息即可：

Password: >

3. 为 HTML5 代码元素创建缩写

Emmet[4] 是一个很好用的文本编辑器插件，可以简化你的 HTML/CSS 编码流程。这个工具使用的语法类似于 CSS 的选择器，可让你为标准 HTML 代码元素创建各种缩写。

下面是一个例子。如果你输入：

div#header>h1.logo>a{website}

则会收到：

website