1.html5介绍

html5是基于html4之上的，功能更加完善更加强大，现在更多的浏览器都已经能够兼容html5许多新增功能。所有在html4的基础上我们需要完善对html5功能的了解和使用。

1.1 新增语义标签

在html4中，我们往往会使用div进行大盒子套小盒子的方法来进行页面布局，在做样式设置的时候会给div设置许多个className，并且className需要具有语义，设置的越多越容易会出现样式的错乱。所以在html5中，给我们新增了许多具有语义的标签，如以下：

header标签：可以作为网页的头部大盒子。

footer标签：可以作为网页底部的大盒子。

main标签：可以作为内容主要部分的大盒子。

aside标签：可以作为边栏的盒子。

article标签：可以作为标签栏的盒子。

navigation标签：可以作为导航栏的盒子。

等等标签都可以将原本相应部位的div盒子替换成更具有语义的标签，样式设置时更加方便，并且这些标签都为块级元素，可以和div一样作为页面布局。

1.2 表单中的新增内容

1.2.1 input的新type属性

html4中input标签的type类型比较少，无法满足用户在填写时的各种要求，但是如果使用JS代表写的话，会需要花很多时间进行设计。在html5中给予了我们更多type的选择。

color颜色类型：可以让用户选择自己喜欢的颜色。

date年月日类型：可以让用户在填写表单时自己选择时间。

range范围类型：给予一个滑动条。

month月份类型：选择月份。

week星期类型：选择星期。

time时间类型：选择当前时间。

number类型：只能输入数字。

tel电话类型：在手机端会有具体效果，电脑端看不出效果。

email邮箱类型：在手机端会有具体效果，电脑端看不出效果。

search搜索类型：在手机端会有具体效果，电脑端看不出效果。

1.2.2 input新属性

在type类型新增了许多新类型，还在input标签内新增了许多内置的属性。

autocompleted自动完成填写：在表单提交过后，再次填写时会在输入框下方提示已经填写过的内容，但是在使用这个标签时，必须在input标签中设置name属性。

placeholder占位符：默认的提示信息，在用户填写具体内容后消失。

autofocus：自动使设置了这个属性的input标签获取焦点，可以用于需要优先填写的输入框。

multiple：多选属性。

form：可以使在form标签外的input标签与表单相关联，在表单提交时一起提交。

1.2.3 label的for属性

在label标签中设置提示语言时，可以使用for标签与input标签中的id相对应，使用户在点击label标签中的提示语也能找到相应的输入框进行填写。

1.2.4 表单验证

以前在做表单验证时，更多的是使用JS代码结合正则表达式进行数据验证，而现在在html5中，系统提供了form标签一些新的属性，用于方便表单的验证。

required：对输入内容进行非空验证，包括只输入空格。

pattern：对输入内容自定义验证，常填写正则表达式。

还能给表单设置oninvalid事件，在验证失败时会触发，同时给验证失败的表单设置setCustomValidity（‘自定义信息’），自定义提示用户需要输入的内容。

1.2.5 多媒体标签

html5中还给我们定义了两个多媒体标签，可以使用标签来播放视频或者是音频文件。

audio音频标签：

它有几个常用属性：

src：指定播放文件的路径。

autoplay：自动播放。

loop：循环播放。

controls：控制器，控制播放暂停等功能。

也可以在标签中取消src，在对应标签后设置source标签，指定播放的多个内容，用于不同浏览器识别不同格式的文件。

video视频标签：

它的属性同audio标签，并且还有它自身的几个属性：

width：设置播放区域的宽度。

height：设置播放区域的高度。

但是视频还是会按照自身的宽高比来改变大小。

poster：设置视频初始未开始播放前的显示图片。

1.2.6 获取dom元素

原来我们在使用JS原生代码获取页面元素时，都会需要些一长串的代码。

html5中也提供了两个方法方便我们选取页面元素。

document.querySelector(‘‘)：选取单个元素。

document.querySelectorAll(‘‘)：选取多个元素，返回的是由这些元素组成的数组。

1.2.7 设置、获取自定义属性

在html4中我们只能使用setAttribute来设置自定义属性，和getAttribute来获取自定义属性值。

在html5中，我们无需这么麻烦的设置和获取了，直接可以在标签中加入data-自定义属性名来设置自定义属性，而在获取这些设置的值时，只需要dom.dataset[‘‘]的方式来获取值。

1.2.8 操作class

html4中给元素添加className，只能在标签中添加class=“”的方式来。jQuery中可以通过addclass等的方式操作class。在html5中给予了类似jQuery的方式来方便操作元素class。

dom.classList.add()：添加指定className。

dom.classList.remove()：移除指定className。

dom.classList.toggle()：切换指定className。

dom.classList.contains()：判断是否有指定className。

html5介绍