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 放回