一、什么是HTML5(html+js+css)?
HTML的第五个版本，有新的元素、属性、行为；
二、HTML的优势？
（1）跨平台：唯一一个通吃PC、IPhone、Android等主流平台的跨平台语言；
（2）特效：（canvas、svg）
（3）注重用户体验：（Echarts、highchart）
（4）提供了很多API接口
HTML5拖放
拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都能拖放；
1、开启拖放【draggable】
将要拖放的对象元素的draggable属性设置为true，任何元素均可实现拖放，img和a元素(有href)默认允许拖放；
2、拖放相关的事件
3、dataTransfer对象
HTML5新增方法
1、ClassList
classlist方法可以获取到这个dom元素的类的对象，但是目前classlist属性只有火狐3.6+、谷歌支持；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>classlist属性</title>
<style>
#app{
border: 1px solid red; width:400px;height: 400px;}
#app.add_color{
background-color: green;}
#app.add_color1{
background-color: pink;}
#app.aa{
background-color: yellow;}
</style>
</head>
<body>
<div id="app"></div><br/>
<input type="button" value="增加">
<input type="button" value="删除">
<input type="button" value="获取">
<input type="button" value="判断">
<input type="button" value="切换">
<input type="button" value="替换">
<script>
//获取节点
var box = document.getElementById("app");
var skill = document.querySelectorAll('input');
console.log(skill);
skill[0].onclick=function(){
// console.log("增加了");
//添加一个或多个 如果值已经存在 就不添加了
box.classList.add("add_color","add_color1");
}
skill[1].onclick=function(){
//删除一个或多个
box.classList.remove("add_color1");
}
skill[2].onclick=function(){
//获取类的数量
console.log(box.classList.length);
}
skill[3].onclick=function(){
//判断有没有包含add_color这个类 有是true 否则是false
var a = box.classList.contains("add_color");
console.log(a);
}
skill[4].onclick=function(){
//切换 有则删除 无则添加
box.classList.toggle("add_color1");
}
skill[5].onclick=function(){
//替换 接收俩个参数
box.classList.replace("add_color1","aa");
}
</script>
</body>
</html>
2、dataSet【自定义数据属性】
（1）HTMLElement.dataset 属性允许无论是在读取模式和写入模式下访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-)集。
（2）所谓的data-实际上就是data-前缀加上自定义属性名；但是在获取或者添加自定义属性的时候要去掉前缀data-;
（3）getAttribute和setAttribute及dataset的区别？
1、共同点：两者都将属性设置在attribute上，也就是说getAttribute和setAttribute获取dataset的内容，dataset的内容只是attribute的子级；
2、不同点：命名上不同，dataset内只有带data-前缀的属性；
（4）那么为什么还要使用data-呢？
我们可以把所有自定义的属性在dataset对象中统一管理，遍历什么的都很方便；然而setAttribute设置的值需要一个个进行获取；
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义属性</title>
<style>
[data-set-css]{
background-color: #33CCFF;
width: 200px;height: 200px;
}
</style>
</head>
<body>
<!--data-index data-spm 第一中设置自定义的方法 直接在元素便签上书写-->
<div id="divName" data-uname="xiaoxiao" data-zhuiMeng="追梦" data-je-ffrey="jeffrey">点击我</div>
<script>
//获取divName
var el = document.getElementById("divName");
console.log(el.dataset);
//添加一个自定义属性
el.dataset.sex="女"
//el.dataset.data-usex="cs" 错误写法
//获取数据
console.log('data-uanme',el.dataset.uname);
//区分大小写 只识别小写
console.log('data-zhuiMeng',el.dataset.zhuimeng);
//连着的字符需要转换为驼峰命名
console.log('data-je-ffrey',el.dataset.jeFfrey);
el.dataset.setCss = "设置css样式";
console.log('setCss',el.dataset['set-css']);
//删除数据
delete el.dataset.uname
delete el.dataset['setCss']
el.setAttribute('age','18');
el.setAttribute('data-age','118');
//getAttribute取值
console.log(el.getAttribute('age'));
console.log('data-age',el.getAttribute('data-age'));
console.log('data-age',el.getAttribute('data.sex'));
</script>
</body>
3、HTML5-新多媒体元素
audio——音频
（一）可选属性：
（二）案例代码
<!--
音频格式有哪些：mp3、ogg、wav
src：可以写网络地址 本地资源
注意：谷歌浏览器中禁止了autoplay属性
-->
<!-- controls控件 loop循环播放 autoplay加载完毕后自动播放 preload请求时便预加载，设置了autoplay则该属性无效-->
<audio src="http://mp3.9ku.com/mp3/550/549564.mp3" loop controls></audio>
<!-- <audio controls="">
<source src="mp3/nz.mp3"></source>
<source src="mp3/nz.ogg"></source>
</audio> -->
video——视频
（一）可选属性：
（二）video audio API常用方法
（三）video/audio API常用属性
（四）video/audio的Api事件
（五）Audio video事件API：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="https://m3.8js.net:99/20200306/62_yongqimianzi.mp3" controls ></audio>
<button>Audio video事件API</button>
<script>
var ado = document.getElementsByTagName('audio')[0]
var btn = document.getElementsByTagName('button')[0]
var falg = false
btn.onclick = function(){
//用于触发onratechange事件
falg ? ado.playbackRate = 1 : ado.playbackRate = 2
falg ? this.innerHTML = '二倍速' : this.innerHTML = '正常'
falg = !falg
}
ado.onloadstart = function() {
console.log('onloadstart -- 在浏览器开始寻找指定视频/音频（audio/video）触发。')
}
ado.ondurationchange= function(){
console.log('ondurationchange -- 当指定视频/音频（audio/video）的时长数据发生变化时触发')
}
ado.onloadedmetadata = function() {
console.log('onloadedmetadata -- 事件在指定视频/音频（audio/video）的元数据加载后触发。')
}
ado.onloadeddata = function(){
console.log('onloadeddata -- 在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发')
}
ado.onprogress = function(){
console.log('事件在浏览器下载(缓冲完毕)指定的视频/音频（audio/video）时触发。')
}
ado.oncanplay = function(){
console.log('oncanplay -- 可以开始播放时触发')
}
ado.oncanplaythrough = function(){
console.log('oncanplaythrough -- 缓冲完成时触发')
// e.target.src = '' // 这里这个空的是模拟地址发生鼓掌 触发下面的 onerror onemptied
}
ado.onended = function() {
console.log('感谢光看')
}
ado.onemptied = function(){
console.log('onemptied -- 发生故障并且文件突然不可用时触发（比如连接意外断开时）。')
}
ado.onerror = function(){
console.log('onerror -- 在文件加载期间发生错误时运行的脚本。')
}
ado.onpause = function(){
console.log('onpause -- 暂停时候触发(如点击暂停)')
}
ado.onplay = function(){
console.log('onplay -- 开始播放时触发(如点击播放)')
}
ado.onplaying = function(){
console.log('onplaying -- 暂停或者在缓冲后准备重新开始播放时触发。')
}
ado.onratechange = function(){
console.log('onratechange -- 播放速度发生改变时触发')
}
ado.ontimeupdate = function(){
console.log('ontimeupdate -- 播放位置改变时触发 (如拖动进度条) 注意：在没暂停的情况下进度条动一下就触发一下' )
}
ado.onvolumechange = function(){
console.log('onvolumechange -- 音量发生改动时触发(包括静音)')
}
</script>
</body>
</html>
4、Canvas
（一）什么是Canvas？
HTML5元素用于图形的绘制，通过JavaScript来完成；标签只是图形容器，你可以通过多种方法使用canvas绘制路径、盒、圆、字符以及添加图像；
（二）创建一个画布
一个画布在网页中是一个矩形框，通过元素来绘制-----默认情况下元素没有边框和内容
<!-- 创建画布 -->
<canvas id="mycanvas" width="200" height="200">
<!-- 遇到不支持的浏览器 用于提示用户 -->
<h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2>
</canvas>
（三）Canvas的基本使用
①canvas主要方法
②绘制矩形------canvas提供了三种方法绘制矩形：
③绘制样式属性
注意：
（1）HTML属性设置width和 heigth时只会影响画布本身，不影响画布内容
（2）CSS属性设置width和 heigth时不但会影响画布本身的宽高，还会使画布中的内容等比例缩放（缩放参照画布默认尺寸）
案例–添加样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;padding: 0px;}
/* canvas默然颜色不是白色，默认颜色是跟页面颜色一样 */
html,body{
background-color: pink;}
#mycanvas{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;background-color: #fff;}
</style>
</head>
<body>
<!-- canvas看起来和img很像 唯一不同点是它没有src和alt属性
canvas是 画布 默认有宽高300*150-->
<!-- 创建画布 -->
<canvas id="mycanvas" width="400px" height="400px">
<!-- 遇到不支持的浏览器 用于提示用户 -->
<h2>您的浏览器不支持canvas,请换成谷歌浏览器</h2>
</canvas>
<script type="text/javascript">
/*注意：先选好样式 然后在绘制矩形 顺序不能乱 */
//获取画布
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
/* 添加样式 fillStyle设置图像颜色 */
ctx.fillStyle ="#FFCCCC"
/* strokeStyle设置边框颜色 */
ctx.strokeStyle ="green"
/* lineWidth 设置当前绘图的边框的粗细 属性值必须是正数 不同添加px
直接写值 和在 双引号里面都可以*/
ctx.lineWidth ="6"
ctx.fillRect(10,10,100,100);
ctx.strokeRect(100,100,100,100);
/* 不是清除 是覆盖图层 */
ctx.clearRect(0,0,60,60)
</script>
</body>
</html>
案例–渐变
<script type="text/javascript">
/*注意：先选好样式 然后在绘制矩形 顺序不能乱 */
//获取画布
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
/*
fillStyle 设置图形的填充颜色(color , gradient)
color : 设置绿色
gradient: 表示填充的绘图的对象(线性和非线性)
此方法创建一个线性颜色渐变
createLinearGradient(xstart,ystart,xend,yend)
*/
var gg = ctx.createLinearGradient(0,0,100,0);
/* a
addColorStop(stop,color)
stop:0-1 color:在结束位置显示颜色
*/
gg.addColorStop(0,'black');
gg.addColorStop(1,'green');
ctx.fillStyle=gg
//绘图
ctx.fillRect(10,10,100,100);
</script>
