HTML5的几个实用代码

2022-05-19 14:45:19   文档大全网     [ 字体: ] [ 阅读: ]

#文档大全网# 导语】以下是®文档大全网的小编为您整理的《HTML5的几个实用代码》,欢迎阅读!
代码,实用,HTML5
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢!

HTML5视频fallback

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

1 2 3 4 5 6 7 8 9 10







.MP4"/>

__TITLE__

title="No video playback capabilities, please download the video below" />




HTML5中新的Input类型及其验证

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

1 输入一个URL地址:

2 输入一个邮件地址:



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

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

1 2





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

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

1

2

右键点击这里

3
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.wddqxz.cn/5ce9f83831126edb6f1a10ee.html

相关推荐