H5初识
知识点一：H5简介
1、什么是HTML5
H4的新版本，增加了新的标签、新的属性、新的方法
2、HTML5的改进
(1)、新元素(2)、新属性(3)、完全支持CSS3(4)、Video和Audio(5)、2D/3D制图(6)、本地存储(7)、Web应用
知识点二：H5标签
1、新增的标签
(1)、<canvas>新元素
<canvas>标签定义图形，比如图表和其他图像。该标签基于JavaScript的绘图API
(2)、新多媒体元素
<audio>定义音频内容
<video>定义视频（video或者movie）
<source>定义多媒体资源<video>和<audio>
(3)、新表单元素
<datalist>定义选项列表。请与input元素配合使用该元素，来定义input可能的值。
<output>定义不同类型的输出，比如脚本的输出。
(4)、新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构：
<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<command>定义命令按钮，比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框，比如提示框
<summary>标签包含details元素的标题
<footer>定义section或document的页脚。
<header>定义了文档的头部区域
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<section>定义文档中的节（section、区段）。
3、移除的标签
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>
4、新增表单元素
(1)、<datalist>元素规定输入域的选项列表，<datalist>属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：使用<input>元素的列表属性与<datalist>元素绑定。
例：<input list="browsers">
<datalist id="browsers">
<option value="InternetExplorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
(2)、<output>输出：有两个属性name：要操纵的表单元素的变量 for：定义一个或者多个元素的输出域的元素（多个用空格隔开）
例：<form oninput=’x.value=parseInt(inp1.value)+parseInt(inp2.value)’>
<input type=”number” id=”inp1” value=”1”>
<input type=”number” id=”inp2” value=”1”>
<output name=”x” for=”inp1 inp2”>0</ output >
</form>
5、新增表单属性
(1)、placeholder占位符
(2)、autofocus获取焦点
(3)、autocomplete自动完成，用于表单元素，也可用于表单自身
参数：on off
(4)、name指定表单项属于哪个form，处理复杂表单时会需要
(5)、novalidate关闭验证，可用于<form>标签
(6)、required验证条件，必填项
(7)、pattern正则表达式验证表单
(8)、maxlength最大长度minlength最小长度
6、表单输入类型
(1)、email：输入email格式
(2)、url：只能输入url格式
(3)、number：只能输入数字
(4)、search：搜索框
(5)、range：范围，可以进行拖动，通过value进行取值
(6)、color：拾色器，通过value进行取值
(7)、time：时间
(8)、date：日期不是绝对的
(9)、month：月份
(10)、week：星期
7、 表单新增事件
(1)、oninput用户输入内容时触发，可用于移动端输入字数统计
例：document.getElementById("name").oninput=function(){
console.log(this.value);
}
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
8、多媒体
(1)、Video(视频)
属性：
1)、controls如果出现该属性，则向用户显示控件，比如播放按钮。
2)、height设置视频播放器的高度。
3)、 loop如果出现该属性，则当媒介文件完成播放后再次开始播放。
4)、muted如果出现该属性，视频的音频输出为静音。
5)、width设置视频播放器的宽度。
6)、autoplay 设置视频自动播放，配合muted使用(不建议使用)
7)、paused 设置视频暂停
方法：
1)、play() 设置视频播放
2)、pause() 设置视频暂停
格式：
1)、.mp4
2)、.Ogg
3)、.webm
(2) 、Audio(音频)
属性：
1)、controls如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
2)、loop 如果出现该属性，则每当音频结束时重新开始播放。
3)、muted如果出现该属性，则音频输出为静音。
方法：
1)、play() 设置视频播放
2)、pause() 设置视频暂停
格式：
1)、.amr
2)、.mp3
3)、.ogg
4)、.wav
5)、.wma
9、兼容问题
<!--[ifltIE9]>
<scriptsrc="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
<scriptsrc="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
html5shiv.min.js：处理IE9以下的对于html5标签的兼容性问题
respond.js：处理css3兼容性问题
