H5的笔记

 H5
==
1. SGML 通用标记语言
2. html5中为何不用进行文档说明
    * html5不是基于SGML,因此不需要进行文档声明
3. 标签
    * section 区域的章节表示
    * hgroup  对标题进行组合
    * header
    * footer
    * nav
    * article 文章的主体内容
4. 块级型标签
    * aside    用于表示注记 摘要 文章资料等
    * figure   放置一些audio  video标签等流内容
    * figcaption  流内容的标题
    * code     放置代码
5. 行内标签
    * meter     表示特定范围内的数值 max min value(进度条的效果)
    * time      表示时间 属性datetime用来强调时间
    * progress  表示进度  （进度的效果）value(当前完成多少)
    * canvas
    * audio
    * video
6. 属性
    * contenteditable 内容可编辑 true   false
    * draggable
    * hidden    元素直接隐藏
7. 表单控件
    * 可以不用放在form中了，可以放在页面的任意位置 给form一个id,其他控件使用form属性指向form标签
        1. <form id="aa"></from>  <input type="text" form="aa">
    * email  设置完成一定要加上name属性 电子邮件地址
    * url
    * 表示时间的(火狐不支持)
        1. date  日期
        2. time  时间
        3. month 月份
        4. week
        5. datetime 火狐和谷歌不支持  datetime-local 完整时间
        6. number 数值类型 max min  number step(每次跳的时间的个数)
        7. range  也是用来表示数值的max min number step
        8. search 搜索
        9. tel   表示电话
        10.color 颜色
8. html5 新属性
    * placeholder 默认的提示文字 点击不会消失
    * required  请填写此字段
        1. required|required=required
    * pattern   进行正则验证
    * autofocus 自动聚焦
    * autoconplete 自动完成或是自动补全 on|off
    * novalidate  是否需要验证的
    * multiple   多选
    * submit当中 重写表单的属性 formaction formmethod formnovalidate formenctype
    * list属性
    * file accept 上传需要什么格式

拖放
==
1. draggable   true|false 表示一个元素是否能被拖拽\
2. 对于对拖拽的元素来说 dragstart drag  dragend
3. 对于投放区域 dragenter dragover dragleave drop 是针对鼠标的位置来触发的
4. dataTransfer   通过setData和getData可以传递信息

文件
==
1. file API文件获取
2. fileReader 文件读取
3. 补充：post比get多一次请求
4. input type="file" name="file" accept=""(可以限制上传的格式)
5. var formdata=new FormData 用来保存表单提交的数据

cookie
==
session 会话（从打开网页到关闭网页称之为一个会话）
cookie的作用范围是在当前域名下

本地存储
==
* 必须是同域的  在同一个域名下 ajax 默认不能跨域的（有办法可以使其跨域）
   * 端口号不一致 不属于同域
   * 协议不一致 不属于同域
   * 一级域名和二级域名也不属于同域
   * 文件夹不同属于同域

1.localStorage
   * 和cookie对比  存储的数据量很大 5-10MB
   * 存储的数据永远不会自动消失 除非主动删除
   * 操作简单
   * 只能存储字符串 会把不是字符串格式的数据直接转换
   * 例如：localStorage.aa="bb";
        * localStorage["bb"]=2;
        * alert(typeof (localStorage.bb));
        * localStorage.setItem("cc","3");
        * alert(localStorage.aa);
        * alert(localStorage["aa"]);
        * alert(localStorage.getItem("cc"));
        * localStorage.clear();//一次性的清空掉全部数据
        * alert(localStorage.key(0))名字
   * JSON.parse   JSON.stingify
2. sessionStorage(一个会话)
   * 只能存储一个会话阶段的数据
   * 和localStorage 拥有完全相同的api

画布(canvas)
==
1. cobj.fillRect(50,50,100,100);//绘制一个矩形
2. cobj.strokeRect(150,150,100,100);//绘制一个线框
3. cobj.clearRect(50,50,100,100);//擦除指定区域
4. 路径：图形的基本元素是路径 路径是通过不同颜色 不同宽度的线段或是曲线连接成的不同形状的点的集合，每个路径都是闭合的
    * beginPath()//清空一个路径的列表，开始绘制一个新图形
    * moveTo()//把当前的笔触移动到某一个位置
    * lineTo()//从上一个坐标到当前坐标 进行路径的绘制，
    * closePath//闭合路径
    * stroke()//描边
    * fill()//填充
5. rect(x,y,width,height)//绘制矩形路径
6. fillStyle=""//red #f0f rgb() rgba()
7. cobj.quadraticCurveTo(200,150,200,100)//二次方贝塞尔曲线方法
    * 前两个是控制点的坐标，后两个是结束点的坐标
8. cobj.bezierCurveTo(130,130,160,130,200,100);//三次方贝塞尔曲线
9. globalAlpha//调整整个的透明度
10. cobj.strokeStyle="blue";//线的颜色
11. cobj.lineWidth="10";//线的宽度
12.     cobj.lineCap="round"//线两端的样式     butt|square(方块)|round(圆角)
13.     cobj.lineJoin="round"//线交点的样式    round(圆角)|bevel(磨平的效果)|meter(延伸)
14.     cobj.setLineDash([4,2]);//参数是数组
15.     cobj.lineDashOffset="";//设置虚线位移
16. 变形（对坐标系来变形）
    * save() 这个方法会保存当前所有的状态 包括 填充颜色 描边颜色 保存变形状态
    * restore()返回上一次的save（）
    * translate() 位移
    * rotate() 旋转
    * scale() 缩放
17. cobj.font="40px Arial";//字体设置
    cobj.textAlign="center";//水平居中
    cobj.textBaseline="middle";//文字基线的位置
    cobj.fillText(i,0,0);//设置字体的位置
18. 线性渐变
    * var lin=obj.createLinearGradient(0,0,200,200);//设置渐变的方向
    * lin.addColorStop(0,"#fff")//第一个参数是位置，第二个是颜色
19. 径向渐变
    * `var rad=obj.createRadialGradient(250,250,1,250,250,100);
    * `lin.addColorStop(0,"#fff")//第一个参数是位置，第二个是颜色
20. 图片加载
    * //浏览器还没有加载这些图片  图片的预加载
    * //1.把所有需要加载的图片都获取到
    * //2.遍历所有的图片 为每一个图片创建一个img对象
    * //3.给每一个img对应的src属性
    * //4. 给每一个image 对象注册onload事件
    * //5. 所有的图片都加载完成之后 进行页面的跳转
21. 嵌套
    *  `obj.fill("evenodd");//按奇偶数的方法填充`
    *  obj.shadowOffsetX=5;
         obj.shWdowOffsetY=5;
          obj.shadowBlur=5;
          obj.shadowColor="red";
22. 绘制图片
    * drawImage//obj.drawImage(img,250,250,100,100);//2 3 位置  4 5 插入图片
    * drawImage(img,0,0,300,300,250,250,300,300);//截取图片
23. 像素操作
    * getImageData 为画布上指定的矩形复制像素数据
    * putImageData 放回