标签：

    HTML5是一种有吸引力的语言，适合初学者甚至长短编码人员使用。 面对现实吧，每当你与网站互动时，你都在使用HTML。 在进行小的调解或优化根基的Web元素时，知道如安在代码中导航可以节省大量时间（甚至是金钱）。 通过优锐课的行业讨论提升中，总结了一些每个Web开发人员都应该知道的10个HTML5黑客，使你的日常开发事情变得越发轻松的10条提示。

因此，如果你有空闲时间，这里列出了10个有用的HTML hack，你可以在几小时内掌握它们。

1.使用FileSystem API在本地缓存媒体资源

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

例如，你可以添加开发以下成果：

永久上传器：将文件复制到本地沙箱中，然后分批上传。 连接中断，浏览器瓦解等后，可以从头启动上传。

为媒体密集型应用（例如视频游戏，音乐播放器，照片编纂器等）启用本地缓存。

创建离线模式以检察内容，例如 离线视频，电子邮件附件，文本等。

注意: FileSystem API仅受Chrome撑持。

如果你想测验考试离线存储成果，请参见以下其他资源和代码教程：

使用Eric Bidelman的HTML5 FileSystem API。

打点HTML5离线存储。

HTML5中的脱机文件：FileSystem API。

2.使用“样式”属性自动进行表单验证

表单验证对付网站安适和流畅的用户体验至关重要。 因此，让用户可以更轻松地在你的网站上以任何形式键入正确的值。

在HTML5中，我们供给了几种新的输入类型，这些输入类型已经与预界说的验证打包在一起

电子邮件

url

电话

但是，大大都问题会在你需要用户供给标准输入未指定的某些数据（例如，包罗特殊字符的用户名）时产生。 这就是“ pattern”属性派上用场的时候。

模式可让你界说自界说法则，以使用正则表达式（RegEx）验证表单输入。 RegEx指定将查抄<input>元素值的表达式。

这是一个如何添加新法则的示例。 例如，你要指定可接受的暗码不应赶过15个字符，并且只能包罗小写字母：

<form action="/action_page.php"> Password: <input type="password" pattern="[a-z].{1,15,}"> <input type="submit"> </form>

　　

为了越发清晰，你还可以向用户添加一条自界说动静，说明其暗码为何不匹配。 在这种情况下，只需添加另一条快速行以自界说弹出动静：

<form action="/action_page.php"> Password: <input type="password" pattern="[a-z].{1,15,}" title="One to fifteen characters, lowercase only".>> <input type="submit"> </form>

　　

3. 使用Emmet编写HTML5代码

Emmet是一个便利的文本编纂器插件，可以简化你的HTML / CSS编码事情流程。 该工具使用类似于CSS的选择器语法，可让你为标准HTML代码元素创建各类缩写。

这是一个例子。 如果输入：

div#header>h1.logo>a{website} 你会收到： <div> <h1><a href="">website</a></h1> </div>

　　

你可以使用备忘单中的现有组合或为任何HTML标签创建自界说组合，然后按Tab或Ctrl + E将其添加到文本编纂器中。

4.使用HTML5 <Video>标签实现更优化的视频传输

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

你可以选择：

·使用getUserMedia（）或WebRTC从网络摄像头启用实时流。

·使用src属性播放本地托管的视频：<video src =http://www.mamicode.com/“ file.avi” />。

别的，你必需为视频指定“控件”（例如播放，暂停，音量），否则用户将没有任何控件。 此示例代码是：

<video autoplay> <source src="http://www.mamicode.com/video.mp4" type="video/mp4"> </video>

　　

为了进一步改进不雅观看体验，你还可以测验考试使用以部属性：

disablePictureInPicture：禁止浏览器显示画中画上下文菜单或自动请求画中画。

loop：提示浏览器在结束播放后自动重播视频。

静音：自动使视频中的音频静音。

海报：可将自界说图像显示为视频缩略图。 否则，浏览器将显示视频的第一帧。