html5

一，基础属性

1.placeholder一般用于作为提示信息 --没有兼容性问题
  <input type="text" placeholder="手机/邮箱">
2.input 里面type的值
  1.date--可以选择日期 --chrome支持，safari,IE不支持
  2.time--选择时间 --chrome支持，safari,IE不支持
  3.week--可以选择哪一周 --chrome支持，safari,IE不支持
  4.datetime-local --既可以选择年月日，又可以选择时间 --chrome支持，safari,IE不支持
  5.number 只能输入数字--chrome支持 Safari,IE不支持
  6.email --只能写电子邮件 --chrome,火狐支持，Safari,IE不支持
  7.color -可以选择颜色--chrome支持，safari,IE不支持
  8.<input type="range" min="1" max="100"> 会出现一个滚动条，提交的话可以查看位置
  --chrome,Safari支持，火狐,IE不支持
  9.search 一个输入框但是输入的内容下次输入的时候会提示--chrome支持，Safari支持一点，IE不支持
  10.url 只能写网址 --chrome,火狐支持，Safari IE不支持
  以上几乎不用兼容性太差，用的话需要在form里面用
3.<div contenteditable="false">family</div>--默认false,写成true的话就可以修改family的值
  没有兼容性问题，他可以继承,但是如果写成 姓名：阿松大 这样的格式姓名给他设置false 确实修改不了
  但是删除'阿松大'的话在接着删除他会把姓名整体删除(删除了整个标签) 
4. 拖拽属性draggable默认为false(所有的标签元素,当拖拽周期结束时，默认事件是回到原处) 
   注：拖拽的生命周期，拖拽的组成
      1.拖拽开始，拖拽进行中，拖拽结束 --生命周期
      2.被拖拽的物体，目标区域  --组成
  <div draggable="true"></div>他就可以被拖拽 --a标签跟img 里面的draggable属性默认true
  chrome，safari可以正常使用，firefox不好使
被拖拽的物体的三个事件 ondragstart拖拽开始的时候会触发--注意按下物体他不会触发一旦移动就会触发
  ondrag 移动事件只要移动就会触发
  ondragend结束事件，拖拽结束后会触发
  移动到目标区域后的四个事件
  1.ondragenter 不是元素进入目标区域就会触发,而是拖拽的鼠标进入目标区域就会触发
  2.ondragover 在目标区域移动就会触发
  3.ondragleave 拖拽的鼠标离开目标区域就会触发
  4.ondrop 放下元素就会触发，但是一般不会触发，因为放下之后他会默认回到原处
    这样这个事件就作废了，想要触发就在ondraover事件里面取消默认事件，e.preventDefault（）
    这样就可以触发ondrop事件了
    放下之后他会触发两个事件ondragover跟drop 但是ondragover之后默认的事件是回到原处
    所以想要执行drop事件就要阻止他的默认事件
   总结事件是由行为触发的，一个行为可以触发多个事件
5.了解两个属性
  在ondragstart事件里面使用e.dataTransfer.effectAllowed = link；拖拽的时候鼠标进入目标区域
  鼠标会进行变化
  在ondrop事件里面使用e.dataTransfer.dropEffect = link 鼠标拖拽进目标区域后放下，鼠标会发
  生变换
  除了link 还有copy move copyMove linkMove
 只有谷歌好用，所以几乎不用

二，新增标签

1.语义化标签
 <header></header>头部  <footer></footer>尾部 <nav></nav>导航
 <article></article>完整的文章，可以直接被引用拿走    <section></section>内容区
 <aside></aside> 侧边栏 

 以上的本质全是div 只是语义化标签
 

2.canvas画板 可以用js操作画东西 他的画布大小必须在行间样式上写width之类的，不能在css里面
  css里面是用来设置画板大小
  <canvas id="can"></canvas>
  <script>
     var canvas = document.getElementById("can");
     var ctx = canvas.getContext('2d');--拿取到画板上的画笔，获取他的内容区(可以理解成画笔)
     他是用来画2d图形的
     起点 ctx.moveTo(100,100)   ctx.lineTo(200,200)画到哪
     ctx.stroke(); 把画的线渲染上去
     想接着往下画可以接着lineTo
     如果图形特别复杂想要闭合，就用ctx.closePath()；--针对一笔来说
     ctx.fill();填充
     想要有的线粗，有的细
     ctx.lineWidth=10;但是不能实现有的粗，有的细，因为他不管写在哪都会跑到ctx.stroke()后面
     如果想要实现一个粗一个细就要从新开启一个路径 ctx.beginPath()--重新开启路径
     然后在根据需要设置moveTo  lineTO 如果不重新开启路径无法是实现一个粗一个细
     ，因为他是一笔下来的
   3.画矩形
     ctx.rect(100,100,150,100);前两个是起始位置，第三个是长，第四个是高 --构建路径
     ctx.stroke();就可以   
     还可以ctx.strokeRect(100,100,200,100);前两个是起始位置，第三个是长，第四个是高 
     不需要渲染，这个语句连构建路径带画
     还可以ctx.fillRect(100,100,200,100);直接画进去一个填充的矩形
   4.ctx.clearRect(0,0,500,300);清除0 0 到 500 300里面的动画
   5.画圆
   ctx.arc(100,100,50,0,Math.PI*2,0); 前两参数为圆心，第三个为半径，第四个为起始弧度
   第五个为结束弧度 math.PI为180度 第六个0为顺时针，1为逆时针
   然后ctx.stroke()渲染  --更改结束弧度就可以画圆，math.PI*2为360度就是圆
   6.画圆角矩形
    ctx.moveTo(100,100);起始点
    ctx.arcTo(100,200,200,200,10);b坐标(起始点画到b点)跟c(只确定方向)坐标，
    最后一个是圆角大小 
    ctx.arcTo(200,200,200,100,10);
    ctx.arcTo(200,100,100,100,10);
    ctx.arcTo(100,100,200,100,10);
    让后渲染就可以
   7.画贝塞尔曲线 --具体看视频
    二次贝塞尔曲线先有一个起点
   ctx.moveTo(100,100);
   ctx.quadraticCurveTo(200,200,300,100);二次贝塞尔曲线 两个坐标点
   ctx.bezierCurveTo(200,200,300,100,400,200)三次贝塞尔曲线,三个坐标点
   8.旋转线条
    ctx.rotate(math.PI/6); 他是根据坐标系中心的原点(左上角)进行旋转的
    也可以改变他的原点ctx.translate(100，100);--坐标系平移
   缩放ctx.scale(2，1); ctx.strokeRect(100,100,200,100);一个矩形
   然后缩放就是x乘以他的系数，y乘以他的系数也就是变成了(100*2，100*1，200*2，100*1)新的矩形  
  ---旋转跟平移坐标系和缩放是针对全局的，如果有两个图形一个想旋转一个不想
  那么就在开始调用ctx.save();--保存旋转平移缩放数据 然后在不想旋转的图形前面调用ctx.restore();
  --恢复之前保存的旋转平移缩放数据就可以
  9.背景填充
    ctx.fillStyle="blue";
    也可以填充图片
    var img = new Image();
    img.src='路径'
    img.onload = function(){  --图片异步加载的防止还没加载完就执行下面
       var bg = ctx.createPattern(img,"no-repeat"); --以坐标系圆点进行填充--
       现在显示不出来所以想要显示可以试着改变原点位置ctx.translate(100,100)
       createPattern构建一个纹理
       ctx.fillStyle = bg;
       ctx.fillRect(100,100,200,100);
    }
  10.线性渐变
   var bg= ctx.createLinearGradient(0，0，200，0)创建一个线性渐变--里面有两个坐标
   bg.addColorStop(0,"white");
   bg.addColorsTOP(1,"black"); 只能0到1他是百分比的
   ctx.fillStyle = bg;
   ctx.fillRect(0,0,200,100); 
   线性渐变的起始点是根据坐标系位置填充的，物体运动走，填充效果不会随他变换
   除非改变他的坐标系
   11.辐射渐变
   var bg = ctx.createRadialGradient(50,50,30,100,100,50);两个圆前两个参数是起始圆的坐标
   第三个是起始圆半径，第三四个参数是结束圆的坐标最后一个是结束圆的半径
   bg.addColorStop(0,"white")；
   后面类似上面那个线性渐变就可以
   12.添加阴影
   ctx.shadowColor = "blue";  阴影颜色
   ctx.shadowBlur = 20;  阴影大小 单位像素
   ctx.shadowOffsetX = 15; 想左移动阴影15像素
   13. 画布上渲染文字
   ctx.font = "30px Georgia"--第一个大小，第二个字体
   ctx.strokeText("panda",200,100); --文字描边--空心字  画布就会出现panda在200  100的位置
   ctx.fillText("monkey",200,250);-文字填充，它可以被颜色填充-ctx.fillStyle="red";
   14.线端样式
   ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineWidth = 15;
   ctx.lineCup="butt";-默认butt，没变换还是原来线条
   除了butt还有square他会在前后各加一小段线段--也就是变长一点
   还有个值为round 前后各加一小段线段同时他会把两边变圆角；
   ctx.lineJoin = "round" --两个线接触时候的属性 round两个线接触的地方会变成圆角
   lineJoin还有一个值bevel 他会把两个线接触产生的尖去掉
   默认的是mitter-尖锐的
   如果两个线相交产生的尖头太长可以设置ctx.miterLimit=5 就会给他截掉
</script>

 三，标签svg --矢量图，放大不会失真，适合大面积的 贴图，通常动画较少，或者较简单，采用标签跟css画

  而上面的canvas:适合用于小面积的绘图，适合动画  ，采用js画图

<svg width="500px" height="300px" style="border:1px solid">
 <line x1="100" y1="100" x2="200" y2="100" class="line1"></line>  --画线
  <line x1="200" y1="100" x2="200" y2="200" class="line2"></line>  --画线
  x1 y1 起始坐标 x2 y2 结束坐标
</svg>
 采用css把线渲染出来
 .line1{
   stroke:black;  --黑色
   stroke-wdith:5px; --粗5px
  }
 .line2{
   stroke:red;  --红色
   stroke-wdith:5px; --粗5px
  }
 以下都是在svg标签里面的

 2.画矩形  --所有闭合的图形在svg中都是不需要stroke就可以画出来 --默认都是天生充满画出来的
   <rect height="50" width="100" x="0" y="0" rx="10" ry="20"></rect> 
   --xy 为起始坐标  rx---x方向的圆角 ry --y方向的圆角
 3.画圆
  <circle r="50" cx="50" cy="200"></circle> --r为半径 cx cy为原点坐标
 4.椭圆
  <ellipse rx="100" ry="30" cx="400" cy="200"></ellipse>--cx cy为原点坐标 rx ry为一个大半径
  一个小半径
 5.折线
  <polyline points="0 0,50 50,100 100"></polyline> 里面填写坐标，每个坐标用逗号分隔
  以上都是在svg标签里面的 闭合的画都有默认填充效果，设置css fill:transparent;可以去掉填充
  如果是填充状态，图形没有闭合的话，他会自动闭合 
 6.画多边形
  <polygon points="0 0,50 50,100 100"></polygon> 里面填写坐标，每个坐标用逗号分隔
  如果几个点没有把图形闭合，他会自动闭合
  折线跟多边形的区别是折线如果是填充效果，并且首尾没有连接，他会自动连接，如果不是填充
  效果，他就不会连接，多边形如果没有闭合他默认自动首尾连接，也就是如果折线是填充效果那么
  他跟多边形长得一样
 7.文字
  <text x="300" y="50">hello</text> --hello会出现在 300 50 的位置上
 8.透明度与线条样式
 在css里面设置stroke-opacity:0.3--边框透明度 fill-opacity:0.3--填充透明度
 线条样式stroke-linecap:round--加一个圆角的帽子 square加一个方形帽子
 stroke-lineJoin:round; 两个线相交的时候会变圆角 bevel会砍掉角   miter默认的锐角
 9.path元素
 大写字母代表绝对位置，小写字母代表相对位置
 <path d="M 100 100 L 200 100 l 100 100"></path> --M表示起始点相当于MoveTo L代表画到哪
 l是根据他前面那个线段的重点进行相对位置定位水平100 垂直100  相当于lineTo
 <path d="M 100 100 H 200 V 200 z"></path>--H代表水平方向的距离 V代表竖直方向的距离
 也就是横向移动到200的距离在纵向移动到200的距离  --z为闭合区间，z不区分大小写
 如果H 跟v是小写就是横向移了200个位置，纵向移了200个位置
 10.Path画圆弧
 <path d="M 100 100 A 100 50 90 0 1 150 200"></path>--M是起始位置 最后150 200为结束位置
 A第一个参数为横向半径，第二个为纵向半径 第三个为旋转角度 第四个为 大弧(1)还是小弧(0) 第五个为
 顺时针还是逆时针 1为顺时针 0为逆时针
 11.线性渐变
 <defs>
   <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%"> --x1 y1 x2 y2 从哪个点到哪个点
     <stop offset="0%" style="stop-color:rgb(255,255,0)"></stop>
     <stop offset="100%" style="stop-color:rgb(255,0,0)"></stop>
   </linearGrandient>
 <defs>
 <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1)"></rect>
 url引入上面的id就可以实现渐变
12.高斯模糊 --在上面线性渐变的基础上定义
在上面defs里面定义
<filter id="Gaussian">
  <feGaussianBlur in="SourceGraphic" stdDeviation="20"> </feGaussianBlur>
</filter>
  <rect x="100" y="100" height="100" width="200" style="fill:url(#bg1); filter:url(#Gaussian)"></rect> ---也是url里面填写id引入
13.svg虚线
  css ---stroke-dasharray:10px 20px;  --他会把一条线变成虚线，虚线的填充区域
  跟空白区域的长度依次为10px 20px 也可以接着往后添值 
  还有个css样式， stroke-dashoffset：10px;向左移动10px
14.比例尺 svg上面的css样式viewBox
 <svg width="500px" height="300px" viewBox="0,0,250,150"></svg>
 viewBox 他前两个为起始位置，后两个为宽高缩放比例 svg宽为500 viewBox宽为250 也就是扩大1倍
 高同理也是扩大一倍
 相当于用250的宽度代替500的宽度相当于放大一倍

四，audio音频播放器 ，video视频播放器

fullscreenchange--全屏跟退出全屏会触发事件

 // fullscreenElement只读属性返回当前在此文档中以全屏模式显示的元素。

 // 如果文档当前未使用全屏模式， 则返回值为null --用于判断是否是全屏document.fullscreenElement

1.requestFullscreen进入全屏--谁进入全屏就谁.requestFullscreen
<audio src="视频地址" controls> 这样就会出现这个视频的音频播放器但是每个浏览器长得不一样
所以自己做这个一般不用他的
<video src="地址" controls> 就会出现视频，一般不用太丑了
 自己做的在vscode

其他的关于音频视频播放器知识点看vscode代码

五，补充知识

/失焦事件监听，浏览器有一个机制，切换页面后轮播图停止执行，但是计时器还在
    // 增加所以，切换回去的话会出现瞬间跑到别的图片。所以加一个事件监听
document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            /*
    	hidden
    		true	页面隐藏 
    		false	页面显示 
        */
            clearInterval(timer);
        } else {
            timer = setInterval(autoPlay, 2000);
        }
    })
// transitionend 事件在 CSS 完成过渡后触发

六，html5进阶篇API

获取地理信息位置
window.navigator.geolocation.getCurrentPosition(function(){ --成功的回调函数
  console.log(position)
 
},function(){  --失败的回调函数


})
https协议，file协议可以获取到http协议是不能获取的，因为关乎一些隐私http不安全
信息位置--经度最大值180，维度最大值90 --accuracy精度也就是准确度
一般必须辅助翻墙软件获取