首页 前端知识 H5新增标签、属性

H5新增标签、属性

2024-02-04 11:02:13 前端知识 前端哥 769 508 我要收藏

      1、常用新语义化标签:用法类似<div></div>标签,增加了代码的可读性,用于区分页面结构。

            (1)、<header></header>标签,定义文档的头部区域

            (2)、<nav></nav>标签,定义导航链接的部分

            (3)、<footer></footer>标签,定义section或document的页脚

            (4)、<article></article>,定义页面独立的内容区域

            (5)、<section></section>,定义文档的节(section、区段)

            (6)、<aside></aside> ,定义页面的侧边栏内容

            (7)、<datalist></datalist>标签,定义选项列表,与input结合使用,如下:

<!-- input使用list属性 -->
<input type="text"  value="输入明星" list="star"/>  
<!-- datalist使用id属性,list属性与id属性的值一致,表示与input形成链接 -->
<datalist id="star">	
	<option>张学友</option>
	<option>张韶涵</option>
	<option>张敬轩</option>
	<option>孙燕姿</option>
	<option>孙悦</option>
	<option>张碧晨</option>
</datalist>

           (8)、<fieldset></fieldset>标签,可将表单内的相关元素分组打包,与legend搭配使用

        2、新增的有作用的标签

           (1)、<mark></mark>标签,用于定义带有记号的文本。在需要突出显示文本时可使用 <mark></mark> 标签。默认颜色为黄色

           (2)、<meter></meter>定义度量衡,仅用于已知最大和最小值的度量。比如:磁盘使用情况,查询结果的相关性等。不能当做进度条使用。

                a、min:规定范围最小值

                b、max:规定范围最大值

                c、value:规定度量的当前值,是必须的属性。可以用数值表示

                d、low:范围界定的最低值

                e、high:范围界定的最大值

                注意:IE浏览器不支持meter标签。

            (3)、<progress></progress>标签,定义运行中的任务进度,通常与JavaScript结合使用来显示当前的任务进度。不能作为度量值使用

                a、max:规定范围最大值

                b、value:规定度量的当前值。

        3、新增的input type属性值

            (1)、 邮箱:<input type="email">,email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交

            (2)、电话:<input type="tel">,tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。

            (3)、网址:<input type="url">,验证只能输入合法的网址:必须包含http:。

            (4)、数量:<input type="number" value="" max="" min="">,number:只能输入数字(包含小数点),不能输入其它的字符, max:最大值,min:最小值,value:默认值

            (5)、搜索框:<input type="search">,search:可以提供更人性化的输入体验

            (6)、范围:<input type="range" max="" min="" value="">

            (7)、颜色:<input type="color">,可选择颜色。

            (8)、时间:<input type="time">,time:时间:时分秒

            (9)、日期:<input type="date"> ,date:日期:年月日

            (10)、日期时间:<input type="datetime">,datetime:大多数浏览器不能支持datetime.用于屏幕阅读器

            (11)、日期时间:<input type="datetime-local"> ,datetime-local:日期和时间

            (12)、月份:<input type="month">

            (13)、星期:<input type="week">

        4、常用新属性

            (1)、<input type="text" placeholder="请输入用户名" >,用于提示用户输入,当用户输入数据时,提示信息会自动消失

            (2)、<input type="text"   autofocus>,规定当页面加载时input元素应该自动获得焦点

            (3)、<input type="file" multiple>,可用于多文件上传

            (4)、<input type="text" autocomplete="off">,规定表单是否应该启用自动完成功能,有两个值分别是on和off,on表示记录已经输入的值 。条件是:1.autocomplete首先需要提交按钮    2.这个表单必须给name值

            (5)、<input type="text" required>,表示表单必填项,内容不能为空

            (6)、<input type="text" accesskey="s">,规定激活(使元素获得焦点)元素的快捷键,采用alt+字母的形式

            (7)、<input type="text" pattern="">,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)、<embed src="" type="">,embed可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、AU、MP3等,src为音频或视频文件的路径,可以是相对路径或绝对路径。

            (2)、视频:<video src=""></video>,

           

 

            (3)、音频:<audio src=""></audio>,属性与上面视频属性一样。

注意:

  • 音频标签和视频标签使用基本一致
  • 浏览器支持情况不同
  • 谷歌浏览器把音频和视频自动播放禁止了
  • 我们可以给视频标签添加muted属性可以自定播放视频,音频不可以
  • 视频标签是重点,我们经常设置自动播放,不适用controls控件,循环和设置大小属性

            

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1262.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!