H5新增标签、属性-创新互联
1、常用新语义化标签:用法类似标签,增加了代码的可读性,用于区分页面结构。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟空间、营销软件、网站建设、灵台网站维护、网站推广。 (1)、
(2)、标签,定义导航链接的部分
(3)、标签,定义section或document的页脚
(4)、,定义页面独立的内容区域
(5)、,定义文档的节(section、区段)
(6)、,定义页面的侧边栏内容
(7)、标签,定义选项列表,与input结合使用,如下:
(8)、
标签,可将表单内的相关元素分组打包,与legend搭配使用2、新增的有作用的标签
(1)、标签,用于定义带有记号的文本。在需要突出显示文本时可使用标签。默认颜色为黄色
(2)、
a、min:规定范围最小值
b、max:规定范围大值
c、value:规定度量的当前值,是必须的属性。可以用数值表示
d、low:范围界定的最低值
e、high:范围界定的大值
注意:IE浏览器不支持meter标签。
(3)、标签,定义运行中的任务进度,通常与JavaScript结合使用来显示当前的任务进度。不能作为度量值使用
a、max:规定范围大值
b、value:规定度量的当前值。
3、新增的input type属性值
(1)、 邮箱:,email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交
(2)、电话:,tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。
(3)、网址:,验证只能输入合法的网址:必须包含http:。
(4)、数量:,number:只能输入数字(包含小数点),不能输入其它的字符, max:大值,min:最小值,value:默认值
(5)、搜索框:,search:可以提供更人性化的输入体验
(6)、范围:
(7)、颜色:,可选择颜色。
(8)、时间:,time:时间:时分秒
(9)、日期:,date:日期:年月日
(10)、日期时间:,datetime:大多数浏览器不能支持datetime.用于屏幕阅读器
(11)、日期时间:,datetime-local:日期和时间
(12)、月份:
(13)、星期:
4、常用新属性
(1)、,用于提示用户输入,当用户输入数据时,提示信息会自动消失
(2)、,规定当页面加载时input元素应该自动获得焦点
(3)、,可用于多文件上传
(4)、,规定表单是否应该启用自动完成功能,有两个值分别是on和off,on表示记录已经输入的值 。条件是:1.autocomplete首先需要提交按钮 2.这个表单必须给name值
(5)、,表示表单必填项,内容不能为空
(6)、,规定激活(使元素获得焦点)元素的快捷键,采用alt+字母的形式
(7)、,pattern用于验证表单输入的内容,常用的正则表达式:
a、信用卡 [0-9]{13,16}
b、银联卡 ^62[0-5]\d{13,16}$
c、Visa: ^4[0-9]{12}(?:[0-9]{3})?$
d、万事达:^5[1-5][0-9]{14}$
e、QQ号码: [1-9][0-9]{4,14}
f、手机号码:^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$ (更简单的 ^1[0-9]{10}$ )
g、身份证:^([0-9]){7,18}(x|X)?$
h、密码:^[a-zA-Z]\w{5,17}$ 字母开头,长度在6~18之间,只能包含字母、数字和下划线
i、强密码:^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间
j、7个汉字或14个字符:^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
5、多媒体标签
(1)、
(2)、视频:,
(3)、音频:,属性与上面视频属性一样。
注意:
- 音频标签和视频标签使用基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性可以自定播放视频,音频不可以
- 视频标签是重点,我们经常设置自动播放,不适用controls控件,循环和设置大小属性
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
当前标题:H5新增标签、属性-创新互联
网站网址:http://ybzwz.com/article/ddshsi.html