html5 h5学习总结

1. 新增的属性
    placeholder,
    Calendar,
    date,
    time,
    email,
    url,
    search,
    contentEditable,
    hidden,
    contenx-menu,
    data-val(自定义属性)
2. 新增的标签
  语义化标签（一群类似div的东西）
  canvas（画板）
  svg(画板)
  Audio(声音播放)
  Video(视频播放)
3. API 
    定位（需要地理位置的功能） 
    重力感应（陀螺仪,如：微信里面的摇一摇，赛车游戏） 
    request-animation-frame(动画优化) 
    History(浏览器的历史纪录，控制当前页面的历史纪录) 
    LocalStorage,SessionStorage(存储数据的持久化，比如：存信息的历史记录， 历史聊天记录) 
    Websocket(长连接，在线聊天，聊天工具) 
    FileReader(文件读取，文件预览)
    WebWorker(文件的异步，提升性能，提升交互体验)
    Fetch(传说中的要替代Ajax的东西)
placeholder: 用于input输入框里面显示提示用户输入的字符串，在用户输入的时候，提示信息就会去掉
input的新type:以前有： radio, checkbox, file等
新的有： Calendar类： 日期选择，有以下
                如:type: date, 兼容性不怎么好（chrome可以使用，其他浏览器不支持），张的比较丑，
                  type: time 时间选择
                  type: week 第几周
                  type； datetime-local: 日期时间插件
      type: number，用于只可以填写数字，兼容性不好，只支持chrome
      type: email,用于验证电子邮箱，chrome，Firefox支持，其他不支持
      type:color, 颜色选择器，chrome支持，其他不支持
      type:range, 用于设置设置值的范围， chrome，safari支持， ie, firefox不支持
      type:search, 保存历史记录，用于提交可以选择 只有chrome支持， safari支持一点，ie不支持
      type: url，验证网址的  chrome，firefox支持， ie不支持
注意：许多属性兼容性都比较差，很多浏览器不支持，实战开发用的比较少
contentEditable: 默认值为false, 如果设置为true,鼠标点击就可以进行编辑。该属性可以被继承和覆盖，这个属性没有兼容性问题，这个属性可以使用，一般用于表格的编辑
dragable: 默认值为false,可以用于拖拽，但是一个虚拟的。a标签，img标签默认自带拖拽，(只有chrome,safari可以使用， firefox不支持，ie不支持),
    所有的标签元素，当拖拽周期结束后，默认事件就是回到原处，
    事件是由行为触发的，但是一个行为不止可以触发一个事件，可以触发多个事件
    拖拽周期： 拖拽开始，拖拽进行中，拖拽结束
    拖拽的组成： 被拖拽的物体， 目标区域
    被拖拽的物体：事件：ondragstart：拖拽开始事件， 拖拽开始需要移动一点才会触发，鼠标按下不会触发， e.dataTransfer,effectAllowed = 'link',还可以填写all, move, copy,linkMove 拖拽进去目标区域鼠标的样式
              ondrag: 移动触发的事件
              ondragend: 拖拽结束事件，松手触发
    目标区域：接受拖拽的物体，事件：ondragenter: 不是元素图形进入触发，而是鼠标进去才能触发
                          ondragover: 拖拽物体在目标区域移动不停的触发
                          ondragleave: 鼠标带着物体离开目标区域触发
                          ondrop: 在ondragover里面加上e.prevenDefault()，阻止默认事件，就可以触发该事件， e.dataTransfer.dropEffect = 'link',还可以填写all, move, copy,linkMove 设置拖拽放下的属性
h5语义化标签： 这些标签都是div,块级元素，只是名字不一样，语义标签
header: 头标签
footer：尾部标签
nav: 导航标签
article: 文章标签，可以被引用
section: 内容标签，段落形式，
aside: 不常用， 侧边栏标签，用于管理系统
=============== 上面的语义化标签都是div===============
canvas: 画布, 用js来控制划2d图像  ，在行间设置宽高
如：获取canvas                     var canvas = document.getElementById('canvasId');
    获取内容区(getContext)         var  ctx = canvas.getContext("2d");
    任何图像的起点(moveTo)          ctx.moveTo(x, y), 从（x, y） 开始划
    终点(lineTo)                   ctx.lineTo(x, y)  设置完起点和终点后，页面上还是没有的，因为没有渲染
    闭合图像，有序(clostPath)       ctx.closePath()  闭合图形，但是只是正对一笔画图的才可以闭合
    渲染（stroke）                 ctx.stroke() 渲染页面，前面使用moveTo, lineTo都是构建页面，需要stroke才可以渲染
    填充（fill）                   ctx.fill() 填充颜色页面
    填充（lineWidth）               ctx.lineWidth = 10 给线加粗，因为使用lineTo()划的线都是一笔化成的，所以这个属性设置在哪里，都会使整个图片的线的大小改变
    重新开始路径(beginPath)         ctx.beginPath()重新开始一个画笔， 需要重新设置moveTo, lineTo, stroke()等
  使用canvas画矩形：
      ctx.rect(x, y, 长， 高) (x,y)是起始位置，  需要使用ctx.stroke()
      ctx.strokeRect(x, y, 长， 高)   自带stroke的方法，直接可以划出一个举行
      ctx.fillRect(x, y, 长， 高) 自带填充并且画出矩形
      ctx.clearRect(x, y, 长， 高) 清楚从（x,y）为起点，宽高的矩形，类似矩形的橡皮擦
使用canvas画弧形  （圆心(x, y)， 半径(r)， 弧度(起始弧度， 结束弧度，方向)）   
    ctx.arc(x,y,r,起始弧度，结束弧度Math.PI，d)    （圆心(x, y)， 半径(r)， 弧度(起始弧度， 结束弧度，方向 0， 顺时针， 1是逆时针)）
使用canvas画圆角矩形 （4条边， 4个角）
    ctx.moveTo 先设置起点A点  下面的（x,y）是B点， （x1, y1）是C点 方向，往哪边边拐
    ctx.arcTo(x, y, x1, y1, 圆角大小) B点是A点与C点在圆弧上切线的交点， 
      列如：
      ctx.moveTo(100,110) 设置起点位置
      ctx.arcTo(100,200,200,200, 10); 
      ctx.arcTo(200,200,200,100, 10); 
      ctx.arcTo(200,100,100,100, 10); 
      ctx.arcTo(100,100,100,200, 10); 
      ctx.stroke();   
使用canvas划贝塞尔曲线：
// 划一个2次贝塞尔曲线： 如下
   ctx.beginPath() 规范，每一次都是从头开始
   ctx.moveTo(x, y) 起点(x, y)
   ctx.quadraticCurveTo(x1, y1, x2, y2) (x1, y1) 是控制二次贝塞尔曲线的控制点， （x2, y2） 是结束点  控制点是两条线的切线
   ctx.stroke() 渲染
// 画三次贝塞尔曲线
    ctx.beginPath() 规范，每一次画图都是从头开始
    ctx.moveTo(x, y) 起点（x, y）
    ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3) (x1, y1)控制点1， （x2, y2）控制点2， （x3, y3）结束点, 控制点是两条线的切线
    ctx.stroke()
 canvas旋转：
   ctx.translate(x, y) 坐标系平移，配合旋转使用  
   ctx.rotate（弧度 Math.PI） 默认旋转是根据画布的原点来旋转 ， 使用translate来平移坐标系，就可以在画的点进行旋转
   ctx.scale(x, y) 缩放， 会根据translate来进行变化，平移坐标系后，放大缩小或者旋转都会改变
   注意： 坐标系平移或者旋转都会改变当前的坐标系
   ctx.save() 保存最原始的状态， 保存坐标系的平移，旋转，缩放数据
   ctx.restore()  还原默认的样式
   ctx.fillStyle = "颜色"; 填充图形里面的颜色
   // 填充图片， 背景图片， 
   ctx.createPattern('图片对象',是否重复“no-repeat”)
   填充图片：
    首先需要 var img = new Image();
            img.src = "";
            // 图片加载后，菜进行填充问题
            img.onload = function(){
              ctx.createPatten(img, "no-repate"), 这个可以填充背景, 但是默认是从画布的原点（0，0）进行填充，所以需要使用translate来平移坐标系，才可以出现
            }
  背景填充渐变：
  // 需要创建一个渐变
    var bg = ctx.createLinearGradient(x, y, x1, y1); （x，y）开始坐标 （x1, y1） 结束坐标
    // 创建颜色的关键正， 从x,是啥颜色， 到x1变化的另一颜色 
    bg.addColorStop(x, "color");
    bg.addColorStop(xx, "color"); 里面可以填多个颜色的关键帧
    bg.addColorStop(x1, "color");
    ctx.fillStyle = bg；
    颜色线性也是从画布的原点（0，0）开始渐变
  背景辐射渐变：
  var bg = createRadialGrandent(x1, y1, r1, x2, y2, r2) （x1, y1）是起始点 r1是起始点的半径 （x2, y2） 是终点， r2是终点的半径,  r1, r2哪个半径大，外界的颜色都是半径大的
  bg.addColorStop(x1, 'color');
  bg.addColorStop(x2, 'color');
  ctx.fillStyle = bg;
// 添加阴影：
ctx.shadowColor = 'color': 阴影的颜色
ctx. shadowBlur = "px"   ：阴影的大小 默认骑在线上
ctx.shadowOffsetX = "px" x的偏移量
ctx.shadowOffsetY = "px" Y的偏移量
ctx.stroke() 渲染
// 画布绘制文字：
ctx.strokeText('text', x， y) : text 文字内容，（x,y）坐标
ctx.fillText("text", x, y) text 文字内容，（x,y）坐标
ctx.font = " px, 字体" 只作用域stoke， stroke是描边， 空心字用stroke， fill是实心
// 画布线段样式：线两端样式
 单条线的样式： ctx.lineCap = "butt(默认)" square(前后加方块) round(两端加半圆)  
两条线相交： ctx.lineJone = "miter(默认)" round 园  bevel（砍了尖）
            ctx.miterLimt = "5" 尖略的大小 就是level
=========================svg===============================
svg 与 canvas 的区别
svg: 矢量图， 放大不会失真， 适合大面积贴图， 通常动画较少或者比较见到那 使用标签和css去绘画
canvas: 通常用于小面积绘图， 适合动画， 使用js来进行绘画
 svg:   可以使用css3的动画
// 所有svg图形只要是闭合的图形，可以不需要stroke
 <svg width="500" height="300">
   // 使用line来进行划线， (x1, y1) 是起始位置  （x2,y2）是结束位置
   <line x1="100" y1="100" x2="200" y2="200"></line>
   //使用这个标签是画布出来的，需要使用类似canvas 里面的stroke, 那么在svg这里需要使用 在<style></style>这里面加上 .line（类名）{storke: color}
   可以使用 stroke-dasharray: x x1 x2 , 里面可以填写多个参数， 空白是实线的大小依照stroke-dasharry里面的值来排列， 循环使用
            stroke-dashoffset: 10px 向左偏移量
   // 绘制矩形， x是高， y和宽 x1 y1 分别代表起点  num代表圆角的大小
   <rect height="x" width="y" x="x1" y="y1" rx="num"></rect>
   // 绘制圆 r是半径 cx cy 分别代表圆心
   <circle r="num" cx="x1" cy="y1"></circle>
   // 绘制椭圆 rx 为横轴的长度， ry为纵轴的高度  cx cy 代表圆心
   <ellipse rx="x" ry="y" cx="x1" cy="y1"></ellipse>
   // 绘制折线, 但是默认会闭合并且填充,  point里面可以写n个点， 
   <polyline point="x y, x1 y1, x2 y2"></polyline>
   // 注意： 如果想要绘制折线， 需要使用类名来置空背景（fill: trasparent）， 并且可以设置边的颜色(stroke：color)， 去掉填充后，可以发现是一个折线
   线的属性有： stroke:blue 设置颜色， stroke-width: 1px 设置宽度， stroke-opacity: 1 透明度  stroke-line: squre, 设置线两端的形状 stroke: miter 设置线相交的形状
   // 绘制多边形 默认填充 与上面的polyline一样需要去掉填充， 但是多边形会给闭合
   <polygon point="x y, x1 y1, x2 y2"></polygon>
   // 绘制文本标签 x,y 是起始位置
   <text x="x" y="y">圣体好</text>
   // SVG里面的路径， 一笔画成
   <path d=”M 100 100 L 100 100 l 100 100></path>
   d里卖弄参数 M moveTo（起点）  L lineTo （移动到） l linTo（移动到）  
      里面的大写字母表示绝对位置， 小写字母标准相对位置 意思是：例如： L 200 200(往坐标轴都移动200 个单位) l 200 200(移动到200， 200 这个位置)
   <path d=”M 100 100 H 200 V 200 z></path>
   d里面的参数: M moveTo （起点） H horizon 表示横向移动  V vertical 垂直方向移动 z或者Z表示闭合路径
   // 一笔画成圆弧
   <path d=”M 100 100 A 100(长) 50（短） 0(rotate) 1(big) 1(d) 150(x1) 200(y1) ></path>
   d 里面的参数是 M MoveTo(起点，x, y) 
                A ArcTo（圆弧） 
                长代表横轴的长度  
                短 代表纵轴的高度  
                rotate 代表旋转的角度  
                big(0小弧, 1大弧) 代表大弧还是小弧   两个院相交的两个点 可以得到4个圆弧 
                d （0 是逆时针， 1 是顺时针）代表顺时针还是逆时针 
                x1, y1代表结束位置
  // 渐变
  defs 是定义一个渐变， 里面的id是暴露给外面使用的渐变或者其他样式
  <defs>
    // liearGradient 是线性渐变的标签 id 是一个名字，提供给外面使用 (x1 y1) 是渐变的起点 (x2, y2) 是终点  (x1, y1) 与（x2, y2）两者的差值决定渐变的方向
     <linearGradient id="bg1" x1="x1" y1="y1" x2="x2" y2="y2">
       // stop 定义渐变的关键帧里面的颜色， offset是横向里面 [x1, x2] 里面的值
       <stop offset="0%" style="stop-color: color"></stop>
     </liearGradient>
  </defs>  
  // 使用渐变
  <rect style="fill: url(#bg1)"></rect>
  // svg 的模糊 需要定义
  <defs>
    // 定义一个模糊， 需要使用id确保使用
    <filter id="guass">
      //feGaussianBlur 第一模糊  in 滤镜的方式   sedDeviation 这个是模糊值 数字越大越模糊
    <feGaussianBlur in="SourceGraphic" sedDeviation="20"></feGaussianBlur>
    </filter>
  </defs>
  // svg 比例尺 viewBox  
<svg viewBox="x,y, w, h">
   // (x, y) 是起始点
      w h 是放大svg里面 需要使用的宽高
  </svg>
=====================下面是video, audio===========================================
  audio: 音频播放器 
  <audio src="" controls></audio>
  src: 音频的地址 
  controls 是显示音频播放器的样式  每个浏览器的样式都不一样，所以一般不适用，需要自己手动去实现一个音频播放器
  <video src="" style="width:""; height:"""  controls></video>
  src: 视频频的地址 
  controls 是显示音频播放器的样式  每个浏览器的样式都不一样，所以一般不适用，需要自己手动去实现一个音频播放器