HTML5的几个实用代码

2022-05-19 14:45:19 第一文档网 [ 字体：小中大 ] [

阅读： ] [

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。下载word有问题请添加QQ：admin处理，感谢您的支持与谅解。

【#第一文档网# 导语】以下是®第一文档网的小编为您整理的《HTML5的几个实用代码》，欢迎阅读！
代码,实用,HTML5

HTML5绝对是一个流行元素，受到如此多的公司组织的追捧，作为极客来说，岂能错过呢?在今天这篇文章中，我们将分享一些超实用的HTML5的代码片段，相信大家一定会喜欢!

HTML5视频和fallback

实用HTML5的一个好处就是简化了视频和音频的嵌入代码量，不过呢，如何兼容老版本的浏览器绝对是一个令人头疼的问题，特别是在天朝，老版本的浏览器绝对处于优势地位，下面代码或者能够帮你忙：

1 2 3 4 5 6 7 8 9 10

HTML5中新的Input类型及其验证

在HTML5出现之前，我们一般使用input来处理email，url，或者其它输入，然后使用Javascript来验证正确性，在HTML5中，我们使用如下代码即可：

1 输入一个URL地址：

2 输入一个邮件地址：

注意：这里我们可以使用pattern属性来格式化输入内容

另外我们也可以使用一些HTML5的标签来处理表单验证，省去了javascript，如下：

1 2

以上分别定义了输入的内容正确性原则。 HTML5直接添加项目到浏览器的右键菜单

使用HTML5可以直接添加菜单选项到你的浏览器右键菜单中，代码如下：

1

右键点击这里

4

5

6 极客应用"> 9

教

程

" onclick="window.location.href

=

10 http://www.gbtags.com/gb/postgroups.htm">

自动补齐功能大家应该都很熟悉，包括jQueryUI中，或者第三方的自动补齐插件也很多，在HTML5中我们使用datalist来实现，如下：

1 2

3 4 5 6 7 8 9

元素的自动focus

无须使用javascript，代码很简单：

1

本文由天骄无双 www.qibigu.com 起笔谷分享。

本文来源：https://www.dywdw.cn/5ce9f83831126edb6f1a10ee.html