H5API

HTML5 新个性

​ 标签:nav article footer header aside…..

​ 表单新个性:input type 取值 date time week email number

​ 表单属性 form formaction(提交地址) frommethod(提交形式) required readonly disabled

​ 表单控件标签:progress meter datalist

1.H5API (HTML5 中的 js 局部)

在 HTML5 问世之前，要在网络上展现视频，音频，动画，除了应用第三方自主开发的播放器之外，应用得最多的工具就是 Flash, 然而须要在浏览器上装置各种插件，并且有时速度很慢。HTML5 新增了两个与媒体相干的标签，让开发人员不用依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是 <audio> <video>

媒体 (音频视频)

画布

拖拽

本地存储

​ sessionStorage

webSocket

1.1 自定义数据属性

data-id 是一类被称为自定义数据属性的属性，它赋予咱们在所有 HTML 元素上嵌入自定义数据属性的能力宁能够通过 HTML 和 DOM 进行专有数据的替换。所有的属性都能够通过 HTMLElement.prototype.dataset 来拜访. 自定义属性都能够保留到 dataset 中。获取属性
​    document.getAttribute
​     $(dom).attr()
​     dom.dataset

<script>
        window.onload=function(){var div=document.querySelector('#one');
            console.log(div.dataset)
            console.log(div.dataset.id)
            console.log(div.dataset.item)
        }
</script>
  <div id="one" flag='two' data-id='1001' data-item='test'></div>

1.2 媒体元素

1.video

在 video 标签呈现之前，如果想在网页中播放视频或者音频数据是十分艰难的。H5 中的 video 标签能够向应用 img 显示图片一样简略去播放视频。

video 提供了很多属性和办法，咱们能够通过间接设定或者通过 js 管制视频的显示

读写属性 src autoplay poster loop constrols width height 宽高个别不一起应用

​ constrols 是管制条 loop 是循环播放 autoplay 是自动播放 poster=” 封面 放封面地址 muted 静音

办法 play 播放 pause 暂停 paused 切换，是否是暂停状态 volume 管制音量 currentTime 以后播放秒数 playbackRate 倍数播放

1. 属性
1. 进度条 controls
<video src="./ 音视频 /1.mp4"  controls> </video>
2. 页面一加载是否自动播放 autoplay
<video src="./ 音视频 /1.mp4"  controls autoplay> </video>
3.post 封面
<video src="./ 音视频 /1.mp4" poster='./img/1.jpg'> </video>
4. 是否循环播放 loop
<video src="./ 音视频 /1.mp4" controls loop> </video>
5.muted 静音
<video src="./ 音视频 /1.mp4" controls loop autoplay> </video>

2. 办法 
1. 播放 play
 var video=$('video')[0];
 if($(this).text() === '播放'){video.play()
 }
2. 暂停 pause
 if($(this).text()==='暂停'){video.pause()
  }
3. 切换 paused 音视频是否是暂停状态
if($(this).text()==='切换'){if(video.paused){video.play()
                    }else{video.pause()
                    }
}
4. // 管制音量 +
   if($(this).text()==='音量 +'){video.volume=(video.volume>0.9?0.9:video.volume)+0.1
   }
5.if($(this).text()==='音量 -'){video.volume=(video.volume<0.1?0.1:video.volume)-0.1
   }
6.// 快进
 if($(this).text()==='快进'){video.currentTime+=5}
7.// 回退
  if($(this).text()==='回退'){video.currentTime-=5}
8.// 倍数播放
 if($(this).text()==='倍速播放'){video.playbackRate=0.5}

 3. 事件
video.onvolumechange=function(){// console.log('音量扭转事件监听')
                if(this.volume===0.5){alert('持续调高声音会伤害耳膜')
                }
   }

2.audio 音频

audio 元素与 video 相似，是用来播放音频的。其属性办法事件也简直与 video 元素统一.

 <!-- 不加 control 相当于背景音乐 -->
<audio src="./ 音视频 /1.mp3" controls loop autoplay></audio>

2. 画布

1. 把握 canvas 元素的基本概念，学会如何在页面上搁置一个 canvas 元素，如何应用 canvas 元素绘制出一个简略矩形
2. 把握应用门路的办法，可能利用门路绘制出圆形与多边形
3. 把握突变图形的绘制办法，学会图形变形，图形缩放，图形组合，以及给图形绘制暗影的办法

1. 根本用法
(1) 获取 canvas 对象 -- 获取画布
    通过 document.getElementById() 等办法获得 canvas 对象。(2) 获得上下文 (context)-- 获取画笔
    图形上下文是一个封装了很多绘图性能的对象，参数只能是“2d”(3) 定义填充款式
    context.fillStyle='red'
(4) 绘制填充图形
    context.fillStyle(10,10,100,100)// 第一个参数是 x 轴开始地位，第二个参数是 y 轴开始地位，第三个参数是绘制图形的宽，第四个地位是绘制图形的高
               

1. 实例 -- 绘制填充矩形
// 通过 fillRect
window.onload=function(){
            //1. 获取画布
            var canvas=document.querySelector('canvas');
            // 2. 获取画布上下文对象
            var context=canvas.getContext('2d');
            // 3. 绘制填充款式
            context.fillStyle='red'
            // 4. 绘制填充矩形
            context.fillRect(10,10,100,100)
}


// 绘制轮廓矩形 边框矩形
window.onload=function(){
             //1. 获取画布
            var canvas=document.querySelector('canvas');
            // 2. 获取画布上下文对象
            var context=canvas.getContext('2d');
               // 设置轮廓款式
            context.strokeStyle='red'
            // 设置轮廓的线宽
            context.lineWidth=4;
            // 绘制边框矩形或者轮廓矩形
            context.strokeRect(10,10,100,100);
            // 分明一部分区域
            context.clearRect(0,0,50,50);
            // 分明全副区域
            context.clearRect(0,0,400,400)
}

2. 实例 -- 绘制圆
window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画布上下文对象
            var context=canvas.getContext('2d');
            // 绘制圆直线曲线须要门路 开始门路
            context.beginPath();
            // 圆的门路 x y r 开始弧度 完结弧度 圆的方向是否是逆时针门路
            // Math.PI --180 度
            context.arc(100,100,50,0,Math.PI,true);
            // context.arc(100,100,50,0,Math.PI/2);
            // 直线门路
            context.lineTo(100,100);
            context.lineTo(150,100);
            context.arc(300,300,50,0,Math.PI*2);
            // 完结门路
            // context.closePath();
            // 填充款式
            context.fillStyle='red'
            // 绘制填充圆
            context.fill();
            // 绘制轮廓
            // context.stroke();}

3. 实例 圆的挪动
window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画布上下文对象
            var context=canvas.getContext('2d');
            var bubble={
                x:100,
                y:100,
                r:50,
                color:'red'
            };
            draw(bubble);
            move(bubble)
            setInterval(function(){
                // 革除画布
                context.clearRect(0,0,600,600);
                move(bubble)
            },200)
            // 绘制办法
            function draw(bubble){context.beginPath();
               context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
               context.fillStyle=bubble.color;
               context.fill()}
            // 挪动
            function move(bubble){
                bubble.x+=5;
                bubble.y+=5;
                draw(bubble);
            }

        }