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 个字符，并且只能包含小写字母：

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

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

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

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

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

则会收到：

website

你可以使用 cheat sheet[5] 中的多种已有组合，也可以为任意 HTML 标签创建自定义组合，然后按 Tab 或 Ctrl + E 将其添加到文本编辑器中。

4. 实现更优的视频传输

使用 video 标签，可以将支持视频播放的媒体播放器无缝嵌入到网页中。

你可以选择：

使用 getUserMedia() 或 WebRTC 启用来自摄像头的实时流。使用 src 属性播放本地托管的视频：

为了进一步改善观看体验，你还可以尝试使用以下属性：

disablePictureInPicture[6]：禁止浏览器显示画中画上下文菜单或自动请求画中画。loop：提示浏览器在结束播放后自动重播视频。muted：自动使视频中的音频静音。poster：将自定义图像显示为视频缩略图。否则，浏览器将显示视频的第一帧作为缩略图。preload：向浏览器指示哪些参数将带来最佳的用户体验。你可以将它设置为 none（无预加载要求）；metadata：仅会预取视频元数据；auto：即使用户不希望观看整个视频，也要下载全部视频数据。注意：autoplay 属性的优先级高于此属性。你可以在这个 HTML 速查表 [7] 中找到更多使用方便的多媒体文件标签。

5. 改善图像的显示方式

标签有助于优化图像的显示方式。

它通常用于：

风格：指定媒体在不同情况下的显示方式(例如，为较小的屏幕装载较小版本的图像)。它是创建响应式设计的一个关键环节。提高速度：根据用户的屏幕规格指定图片所需载入的尺寸。Browser支持：在各种浏览器中提供不同的图像格式，以正确显示内容。示例：

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。