html5介绍
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。
