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

            （2）、视频：，

           

 

            （3）、音频：，属性与上面视频属性一样。

注意：

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