09-爱代码爱编程
HTML5新增
HTML5的新特性：主要针对以前的不足，增加了一些新标签，新的表单以及表单属性，媒体标签等。
这些标签都有兼容性问题，基本IE9以上版本的浏览器才支持，如果不考虑兼容性，可大量使用这些新特性
-
新的语义化标签
-
用于媒介回放的video和audio元素
-
新的表单控件
-
用于绘画的canvas元素
a链接标签
给a标签添加download属性，实现下载功能
<a src="比如说图片地址" download=“下载显示的名称”>下载按钮</a>
一、H5新增语义化标签
《header》：头部标签
《nav》：导航标签
《article》：内容标签
《section》：定义文档某个区域/板块
《aside》：侧边栏标签
《footer》：尾部标签
注意
-
这些标签语义化标准主要针对搜索引擎
-
这些标签可以在页面中多次使用，用类和id来区分
-
在IE9中，需要把这些元素转换为块级元素
-
移动端会更多的使用这些标签（应该是不用考虑兼容性）
二、新增多媒体标签（radio和video)
新增的多媒体标签主要包含两个:
-
音频：<audio
-
视频：<radio
-
使页面很方边的嵌入音频和视频，不用在使用flash以及其他浏览器插件
音频
音频《video》：当前video元素支持三种视频格式，一般使用MP3格式
-
语法：《video src=“文件路径” width=" " height=" "》
-
//方法一 <video src="视频地址"></video> //方法二 <video id="movie"> <source src="视频地址" type=“video/mp4”> </video>
-
音频《audio》：当前audio元素支持三种视频格式，一般使用MP4格式
-
语法：《audio src="文件路径" height="" width=""》
-
//方法一 <audio src="视频地址"></audio> //方法二 <audio id="music"> <source src="音乐地址" type=“audio/mp3”> <source src="音乐地址" type=“audio/mp3”> <source src="音乐地址" type=“audio/mp3”> </audio>
-
媒体标签的属性
-
src:"地址"；
-
视频/音频的urL地址
-
-
autoplay:autoplay;
-
视频就绪自动播放（谷歌浏览器需要添加muted，静音播放解决自动播放问题）
-
-
controls:controls;
-
向用户显示播放控件（播放暂停等按钮）
-
-
loop:loop;
-
播放完是否继续播放该视频，循环播放
-
-
preload：auto/none;
-
规定是否预先加载视频（如果有autoplay就忽略该属性）
-
-
muted:muted;
-
静音播放
-
-
poster:imgurl;
-
加载等待的画面显示
-
媒体标签的事件
-
onplaying\正在播放事件
-
onloadstart\开始加载事件
-
onpause\已经暂停事件
-
onended\播放完毕事件
-
onerror\播放错误，发送异常事件
-
通过this.error.code获取错误码
-
1：加载异常，用户请求终止
-
2：加载终止，网络错误
-
3：加载完成，解码错误
-
3：不支持的播放格式
-
方法与属性
属性：
-
paused\是否已经暂停 true/false
-
muted\是否已经静音 true/false
-
volume\获取设置当前的播放音量 介于0.0与1.0之间的数字
-
playbackRate\获取设置媒体的播放速度 默认值1，可取1，2，1.5，0.5等等
方法
-
play（）开始播放
-
pause（) 开始暂停
三、H5新增的input类型
-
表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性 form的action指向一个服务器地址（接口）
-
当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值注意表单项的name属性必须有值，服务器才能获取表单
-
所有之前的表单控件都保持不变
-
仍然可以使用脚本操作表单控件
H5之前的表单
//类型 type="text/password/checkbox/radio/reset/submit/button/hidden/file/" //属性 name/value/checked/maxlength
H5新增的表单
//类型
type="email/url/date/month/week/number/tel/search/color/range"
<input type="range" min=1 max=100 step="">
//属性
required:required;表单拥有该属性表示其内容不能为空，必填
placeholder:提示文字；表单的提示信息，存在默认值将不显示
autofocus：autofocus;自动聚集属性，页面加载完成自动聚集到指定表单
multiple:multiple;可以多选文件提交
autocomplete:off/on;当用户在字段开始键入时，浏览器基于之前键过的值，应该显示出在字段中填写的选项
//默认已经打开，如autocomplete:"on";以前输入的内容是否显示在表单框中，不需要输入
//关闭，autocomplete:"off";需放在表单中，同时加上name属性，同时成功提交
pattern : 正则验证 pattern="\d{1,5}
表单注意事项
-
表单元素默认自带蓝色边框，给表单元素添加outline:0；或者outline:none;即可去掉默认边框
-
防止文本域（textarea)标签防止文本域拖拽
-
实际开发中，我们文本域右下角是不可以拖拽的。
-
设置：textarea {resize:none;}
-
-
CSS3的verticle-align属性使用场景：经常用于设置图片（行内块元素）和文字垂直对齐
-
官方解释：用于设置一个元素的垂直对齐方式，但他只针对行内元素或者行内快元素有效
-
可选值：top\middle\bottom\baseline\数字
-
-
图片默认与文字的基线对齐，所以图片的底部会有一个空白缝隙，解决方法
-
给图片添加verticle-align:top\bottom\middele\数字
-
把图片转换为快级元素，没有了verticle-align属性，也就没有了基线对齐（baseline）
-
-
鼠标样式cursor
-
属性值:default(默认|)/pointer（小手）/move（移动）/text（文本）/not-allowed（禁止）
-
H5新增画布canvas
-
画布标签的宽高只能通过内联属性设置，通过外部/内部设置的时canvas元素的宽高
-
画布默认的宽是300px ,高是150px。
-
替换内容写在标签里面的内容可以为文字也可以为图片，表示不支持画布标签的替代内容
-
其他操作在JS里面操作
canvas画布语法：
//画布的宽高默认是300*150，不能在css中指定宽高 <canvas width="200" height="200"></canvas>
对画布进行操作
//1、获取画布元素
var canvas=document.queryselector('canvas');
//2、设置绘画上下文对象（画笔）
var ctx=canvas.getContent('2d');
//3、开始画东西
ctx.fillStyle="颜色"； //设置背景色，默认为黑
ctx.strokeStyle="颜色"； //设置边框颜色，默认为黑
画矩形
//一、画矩形 ctx.rect(x,y,width,height)//起始原点，宽度，高度 //调用填充色 ctx.fill(); //调用边框色 ctx.stroke(); //或者 ctx.fillRect(x,y,width,height); ctx.strokeRect(x,y,width,height);
画线条
//起始点坐标 ctx.moveTo(x,y); //终点坐标 ctx.lineTo(x,y); //绘制连线 使用stroke()//连线，fill()//填充 //重置路径 ctx.beginpath()//无参数 //闭合路径,自动封口，终点和起点连接起来 ctx.closepath()
设置线宽以及线头样式
ctx.linewidth="数字" //不用带单位的 ctx.lineCap="circle/squery/buff"
画圆
//弧度=360*math.pi/180 ctx.arc(x,y,r,起始弧度，终点弧度，逆时针（true）/顺时针（false）)
画扇形
-
将ctx,moveTo(x,y);原点设置为圆心
清楚画布区域
ctx.clearRect(x,y,canvas,width,canvas.height) //起始点，画布宽，画布高
剪切画布
-
上面画出一个区域，然后使用ctx.clip()，不带参数，就表示将他截取出来，之后画的东西只有在这个区域的内容才会显示
save与restore
ctx.save();//保存进度：设置一个保存点 ctx.restore(); //还原到上次保存的状态，在restore之前做的任何操作不会对后面产生影响