09-HTML5新增

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类型

1. 表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性 form的action指向一个服务器地址（接口）
2. 当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值注意表单项的name属性必须有值，服务器才能获取表单
3. 所有之前的表单控件都保持不变
4. 仍然可以使用脚本操作表单控件

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之前做的任何操作不会对后面产生影响