HTML5笔记总结（一）

一、什么是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>