clas 使用 數據 色彩 get parse 元素 oca hat

##總結
- 從這兩天的課程裏，我學到html簡單的一個編年史，以及標簽語義化最最有益是便於SEO及對盲人設備友好。也知道的風靡一時的flash為什麽會被html5打敗。
- HTML5新增了很多功能和標簽，尤為突出的就是canvas和SVG，video的功能也很亮眼。說實在的能按著方法寫出東西，但是覺得還是很生疏，計算坐標之類的不能很快反應出來。 - 不過這兩天，學到很多實現需求的思維和技巧，每晚完成作業之後也會自己寫寫，琢磨琢磨。
- 比如創建一個文件夾把可能經常復用的函數放在裏面 - 靈活的分析不同需求使用結合的方式來實現效果（泡泡用對象，對SVG驗證碼的字符串拼接等等） - 需要養成習慣性舉一反三的思維，分析本質更好總結出解決的方法（比如經過分析常用的產生隨機數的方法，來總結出一個公式，便可以封裝一個隨機數函數任意使用） - 如果以上技巧使用得當，可大大提升代碼效率 ***
##html編年史
- HTML4 （最早） - XML (規範嚴格) - XHTML 1.0 （沿用XML的規範）1.1（降低規範，過渡版本） - HTML5 - WHATWG (組織，制定HTML5，最後轉回W3C)

##標簽
- 語義化 - 利於SEO - 對盲人設備友好
## flash（Adobe） - 被html5打敗 （喬布斯）

##新增
- video - controls 特殊屬性，顯示控制按鈕 - redio
## canvas
- 畫布 canvas標簽 - 畫筆：pen=getContext（“2d”）
- 示例 - 矩形 - pen.fillstyle=“red”； - pen.fillRext（）// x，y，高，寬
- pen.strokeStyle="blue" - pen.strokeRect()//
- arc（50，110，50，0，2* Math.PI）
- 方法
- .fill 填充 - stroke 路徑 - beginPath 重新開始路徑 - colsePath - 繪圖 ` let img=new Image（）； img.src="image/1.jpg"; let cs=document.getbyid("cs") let ctx=cs.getContext("2d"); img.onload=function(){ ctx.rotate(Math.PI/180 * 10); 旋轉10度 ctx.drawImage(img,0,0,200,200); }` - 默認情況下，旋轉是圍繞左上角00點旋轉的 - 註意，圖片加載是異步，或其他on
- ctx. translate（100，100） 改變畫布的原點 （自轉） - 還原方法 （不影響後面的元素） - ctx.save(); 保存當前狀態 - resotore（）;回到原來的狀態 - scle - 擦除拖影 - clearRect（0，0，800，600）； 後面參數整個畫布 （矩形）
*** #SVG ##圖片分類 - 矢量圖：通過算法計算，矢量圖方法縮小不會失真，無法做到非常逼真的色彩。 應用場景：設計，建築圖。
- 位圖：顏色豐富逼真，但是會失真。應用場景：遊戲、其他...
##拖拽 拖拽 over裏用e.preventDefalut(); 阻止默認行為
ondrop才能出現
***
##本地存儲 - cookie HTML5 以前 翻譯/點心 - 保存服務器發給瀏覽器的信息 - 精準推送 - 問題 - 大小有限制，不能超過過4KB 4000英文，2000中文 - 安全問題 - localStorage 永久 - sessionStorage 一次會話 （打開一個瀏覽器，關閉）
- 訪問方法一樣，本地存儲服務器，區別在於存儲時間 - 存進去的數據會被轉成字符串 - 註意：存之前轉成字符串 - 方法：JSON.stringify（[11，23，47，20]）//數組轉JSON - 方法：JSON.parse(); //JSON轉數組

HTML5、canvas、SVG