HTML5 新增的内容有哪些

一、新增语义化标签

header页面头部 main页面主要内容 footer页面底部 nav导航栏 aside侧边栏 article加载页面一块独立内容 section相当于 div figure加载独立内容(上图下字) figcaption figure的标题 hgroup标题组合标签 mark高亮显示 dialog加载对话框标签（必须配合 open 属性） embed加载插件的标签 video加载视频 audio加载音频(支持格式ogg，mp3，wav)

语义化标签优点：1、提升可访问性 2、seo 3、结构清晰，利于维护

二、表单元素、属性、事件

(一)新增input(type)类型

1、type="email"

作用：email类型用于包含email地址的输入。

特性：提供了默认电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的表单提交。

2、type="number"

作用：number类型用于包含数值的输入。

特性：只能输入数字(包含小数点)，不能输入其他的字符。

属性：max 限制输入框的最大值，min 限制输入框的最小值，value 输入框的默认值，step 规定数字增长间隔。

3、type="color"

作用：输入类型用于规定颜色。

特性：该类型允许你从拾色器中选取颜色。

4、type="url"

作用：url类型用于包含网址的输入。

特性：提供了网址完整验证，只能输入合法的网址：必须包含http://。

5、type="image"

作用：image输入类型将图像定义为提交按钮。

6、type="tel"

作用：tel类型用于包含号码的输入。

特性：tel它并不是来实现验证。它的本质是为了能够在移动端打来数字键盘，意味着数字键盘限制了用户只能输入数字。

7、type="search"

作用：search类型用于搜索域，比如Google搜索。

特性：输入值后，输入框带有关闭按钮可以清楚输入框内容。

8、type="range"

作用：range类型用于包含一定范围内数字值得输入域（可以用作音量键）。

特性：显示为滑动条。

属性：max 允许的最大值，min 允许的最小值，value 规定的默认值，step 规定数字增长间隔。

9、type为日期相关类型

date 选择年、月、日

month 选择年、月

week 选择年、周

time 选择时间（时、分）

datetime 选择年、月、日、时（UTC时间）

datetime-local 选择年、月、日、时（本地时间）

(二)新增form属性

1、novalidate属性

作用：novalidate属性规定当提交表单时不对其进行验证。

2、autocomplete属性

作用：autocomplete属性规定是否开启表单内容的自动补全功能。

注意：

a、表单元素的内容必须提交过。

b、需要自动补全的表单元素需要设置name属性。

(三)新增input属性

1、form属性

作用：HTML4中表单内的从属元素必须书写在表单内部，而HTML5中，表单元素可以写在任何地方，然后给元素指定一个form属性，属性值为该表单的id，这样就可以声明元素从属于指定表单。

2、formaction属性

作用：HTML4中表单内的所有元素只能通过表单的action属性被统一提交到另一个页面，而HTML5中，可以为所有的提交按钮增加不同的的formaction属性，使单击不同的提交按钮将表单提交到不同的页面。

3、formmethod属性

作用：HTML4中一个表单只能由一个method属性来统一指定提交方法。HTML5中，可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法。

取值：常用提交方式get、post，当然也有其他的提交方式。

4、formenctype属性

作用：HTML4中表单具有enctype属性，用于指定如何对表单内的数据编码。HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式。

5、formtarget属性

作用：HTML4中表单具有target属性，用于指定在何处打来表单提交后所需要加载的页面。HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开页面。

取值：_blank, _self, _parent, _top, _framename(指定name的框架)

6、autofocus属性

作用：为文本框、选择框或按钮控件加上autofocus属性，当画面打开时，该控件自动获得光标焦点。

7、required属性

作用：HTML5新增的required属性可以应用在大多数输入元素上，提交时如果内容为空，不允许提交并有提示信息显示。

8、labels属性

作用：HTML5中为所有可使用标签的表单元素、button、select元素等，定义了一个labels属性，属性值为NodeList对象，代表该元素所绑定的标签元素所构成的集合。

9、标签的control属性

作用：HTML5中，可以在标签内部放置一个表单元素，通过该标签的control属性来访问该表单元素。

10、文本框的placeholder属性

作用：文本框的placeholder当文本框处于未输入状态时显示的提示信息。当文本框处于未输入状态且未获取光标焦点时，模糊显示输入提示文字。

11、复选框的indeterminate属性

作⽤：HTML4中复选框只是选取与⾮选取两种状态。HTML5中，可以在JavaScript脚本代码中对该元素使⽤indeterminate属性，以说明复选框处于"尚未明确是否选取"状态。

状态：复选框选中、未选中、不明状态。

12、image提交按钮(height/width属性)

作⽤：为图像设置宽、⾼。

13、⽂本框list属性

作⽤：HTML5中为单⾏⽂本框增加了⼀个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5新增元素，该元素类似选择框，也允许⾃⾏输⼊。

14、⽂本框autocomplete属性

作⽤：帮助输⼊框内容的⾃动补全。

注意：1.表单元素的内容必须提交过。2.需要⾃动补全的表单元素需要设置name属性。

取值：on， off，空字符串。

15、⽂本框pattern属性

作⽤：HTML5中，对input元素使⽤pattern属性，属性值为某个格式的正则表达式，提交时内容会进⾏正则表达式的验证。

16、⽂本框selectionDirection属性

作⽤：HTML5中对input和textarea元素增加了SelectionDirection属性。属性表⽰选取内容⽅向。

应⽤场景：获取⽤户的操作(从左往右选⽂字或从右往左选⽂字)，根据⽤户操作执⾏相应的程序

取值：默认为forward

forward -- 表⽰⽤户正向选取⽂字内容。

backward -- 表⽰⽤户反向选取⽂字内容。

17、mutiple属性

作⽤：multiple 属性规定输⼊域中可选择多个值。

应⽤场景：

1.当上传多个⽂件时，可以使⽤此属性。

2.在email中，允许输⼊多个邮箱地址(⽐如抄送多⼈)，⽤逗号隔开。

(四)新增表单元素

1、datalist元素

作⽤：datalist 元素规定输⼊域的选项列表。

注意：如果type类型是'url'类型，那么value值必须以'http://'开头，因为这才是合法的url值。

2、keygen元素

作⽤：keygen 元素是密钥对⽣成器（key-pair generator）。当提交表单时，会⽣成两个键，⼀个是私钥，⼀个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可⽤于之后验证⽤户的客户端证书（client certificate）。

3、output元素

作⽤：output 元素⽤于不同类型的输出。

(五)新增表单事件

1、oninput事件

作⽤：监听当前指定元素内容的改变，只要内容改变(添加内容，删除内容)事件就会触发。

2、oninvalid事件

作⽤：当表单提交验证不通过时会触发该事件。

三、多媒体标签

html5在不使用插件的情况下，也可以原生的支持音频格式文件的播放：

1、video标签

作用：播放视频

video标签属性：

autoplay：视频就绪是否自动播放

controls：是否需要显示控制条

width ：设置播放器宽度

height：设置播放器高度，高度或宽度只推荐其中一种，否则容易变形

loop：播放完是否继续播放该视频，循环播放，一般用于广告

preload：规定是否预加载视频，但需要注意preload和autoplay属性相互排斥，不可以同时设置

src：视频播放地址

poster：是否加载等待的画面图片

muted：是否静音播放

注意：自上而下执行

当浏览器存在兼容性问题时，需要采取这种方式

2、audio音频标签

作用：播放音频