HTML5

 ☞HTML5屬於上一代HTML的新迭代語言，設計HTML5最主要的目的是為了在移動裝置上支援多媒體！！！
   例如： video 標籤和 audio 及 canvas 標記

 ☞ 新特性：
      1. 取消了過時的顯示效果標記  <font></font> 和 <center></center> ...
      2. 新表單元素引入
      3. 新語義標籤的引入  
      4. canvas標籤（圖形設計）
      5. 本地資料庫（本地儲存）
      6. 一些API
 ☞ 好處：
      1. 跨平臺
          例如：比如你開發了一款HTML5的遊戲，你可以很輕易地移植到UC的開放平臺、Opera的遊戲中心、Facebook應用平臺，甚至可以通過封裝的技術發放到App Store或Google Play上，所以它的跨平臺性非常強大，這也是大多數人對HTML5有興趣的主要原因。

 ☞ 缺點：
      1. pc端瀏覽器支援不是特別友好，造成使用者體驗不佳
 

新語義標籤

網頁佈局結構標籤及相容處理

  <header></header>
  <footer></footer>
  <article></article>
  <aside></aside>
  <nav></nav>
  <section></section>
  ....帶語義的div
  語義化標籤在IE8及以下不相容，需做相容處理
  第一種：document.createElement("nav");標籤為行級元素，需display:block;設定為塊級元素。
  缺點：每個標籤都需要建立一次。
  第二種：引入js外掛html5shiv.js(自己寫也可以）
  缺點：在除IE8以下的瀏覽器多此一舉，多一次請求。
  第三種：條件hack
  <!--[if lte IE 8]>
     js指令碼
  <![endif]-->  針對條件載入
  http://www.w3school.com.cn/html/html5_semantic_elements.asp
 

多媒體標籤及屬性介紹

 ☞ <video></video> 視訊
      屬性：controls 顯示控制欄
      屬性：autoplay 自動播放  
      屬性：loop  設定迴圈播放
 ☞ <audio></audio>  音訊
      屬性：controls 顯示控制欄
      屬性：autoplay 自動播放  
      屬性：loop  設定迴圈播放
 ☞ video標籤支援的格式    http://www.w3school.com.cn/html5/html_5_video.asp
 ☞ 多媒體標籤在網頁中的相容效果方式

     <video>
        <source src="code/多媒體標籤/trailer.mp4">
        <source src="trailer.ogg">
        <source src="trailer.WebM">
    </video>
 

智慧表單控制元件

<input  type="email">
 email: 輸入合法的郵箱地址
 url：  輸入合法的網址
 number： 只能輸入數字
 range： 滑塊
 color： 拾色器
 date： 顯示日期
 month： 顯示月份
 week ： 顯示第幾周
 time：  顯示時間

表單屬性

 ◆form屬性：   
    autocomplete=on | off          自動完成 輸入記錄是否顯示
    novalidate=true | false        是否關閉校驗 表單校驗 如檢查email格式

  ◆ input屬性：
    *autofocus  ： 自動獲取輸入框焦點
    form：       
    list：如圖
    multiple：    實現多選效果
    *placeholder ： 佔位符  （提示資訊）
    *required：    必填項
    表單域外的提交 給輸入框加個form屬性值為表單id即可
    <form action="index.html" method="get" id="test">
         使用者名稱：<input type="text" name="username" value="" required>
                 <input type="submit" name="" value="提交">
     </form>
    <input type="text" name="uname" form="test"
    ◆ 如何修改表單控制元件中的預設提示資訊 
         1. 表單驗證觸發oninvalid事件
         2. 通過setCustomValidity方法設定修改內容

list

         <form class="" action="index.html" method="post">
             <input type="text" list="test"/>
             <datalist id="test">
                <option value="鞋子">約有30783個商品</option>
                <option value="上衣">約有30783個商品</option>
                <option value="褲子">約有30783個商品</option>
                <option value="家電">約有30783個商品</option>
              </datalist>
        </form>

classList

    <div></div>
    <button class="btn-add">新增</button>
    <button class="btn-remove">移除</button>
    <button class="btn-contains">包含</button>
    <button class="btn-toggle">切換</button>
    <script>
      let oDiv = document.querySelector("div");
      let oAdd = document.querySelector(".btn-add");
      let oRemove = document.querySelector(".btn-remove");
      let oContains = document.querySelector(".btn-contains");
      let oToggle = document.querySelector(".btn-toggle");
      oAdd.onclick = ()=>{
        oDiv.classList.add("content");
      }
      oRemove.onclick = ()=>{
        oDiv.classList.remove("content");
      }
      oContains.onclick = ()=>{
        console.log(oDiv.classList.contains("content"));
      }
      oToggle.onclick = ()=>{
        oDiv.classList.toggle("content");
      }

HTMl5中的API

獲取頁面元素及類名操作和自定義屬性

  ☞ document.querySelector("選擇器")；
     備註：
        選擇器： 可以是css中的任意一種選擇器
         通過該選擇器只能選中第一個元素。

  ☞ document.querySelectorAll("選擇器");
       備註：
          與document.querySelector區別： querySelectorAll 可以選中所有符合選擇器規則的元素，返回的是一個列表。querySelector返回的只是單獨的一個元素



  ☞ Dom.classList.add("類名"): 給當前dom元素新增類樣式

  ☞ Dom.classList.remove("類名"); 給當前dom元素移除類樣式

  ☞ classList.contains("類名"); 檢測是否包含類樣式

  ☞ classList.toggle("active");  切換類樣式（有就刪除，沒有就新增）

  ☞ 自定義屬性           

     data-自定義屬性名
     備註：
         在標籤中，以data-自定義名稱  

     1. 獲取自定義屬性   Dom.dataset   返回的是一個物件
        Dom.dataset.屬性名  或者  Dom.dataset[屬性名]

        注意： 
                屬性名是不包含data-

     2. 設定自定義屬性
        Dom.dataset.自定義屬性名=值  或者  Dom.dataset[自定義屬性名]=值；

檔案讀取

  ☞  FileReader
      FileReader             介面有3個用來讀取檔案方法返回結果在result中
      readAsBinaryString    ---將檔案讀取為二進位制編碼
      readAsText           ---將檔案讀取為文字
      readAsDataURL        ---將檔案讀取為DataURL

 ☞  FileReader 提供的事件模型
     onabort        中斷時觸發
     onerror        出錯時觸發
     onload     檔案讀取成功完成時觸發
     onloadend  讀取完成觸發，無論成功或失敗
     onloadstart    讀取開始時觸發
     onprogress 讀取中

 ☞ 小案例
 let oInput = document.querySelector("input");
  oInput.onchange = function(){
    //獲取檔案
    let file = this.files[0];
    //建立讀取器
    let reader = new FileReader();
    //開始讀取
    reader.readAsText(file);
    reader.onload = function(){
      console.log(reader.result);
    }
  }

獲取網路狀態

  ☞ 獲取當前網路狀態
         window.navigator.onLine 返回一個布林值

  ☞ 網路狀態事件(需要觸發)
         1. window.ononline
         2. window.onoffline

獲取地理定位

  ☞  獲取一次當前位置
      window.navigator.geolocation.getCurrentPosition(success,error);

       1. coords.latitude   維度
       2. coords.longitude   經度

  ☞  實時獲取當前位置
      window.navigator.geolocation.watchPosition(success,error);

本地儲存

   ☞發展：
      隨著網際網路的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地儲存大量的資料，傳統方式我們以document.cookie來進行儲存的，但是由於其儲存大小隻有4k左右，並且解析也相當的複雜，給開發帶來諸多不便，HTML5規範則提出解決方案，使用sessionStorage和localStorage儲存資料。 

    ☞  localStorage：
        1. 永久生效
        2. 多視窗共享
        3. 容量大約為20M

        ◆window.localStorage.setItem(key,value)  設定儲存內容
        ◆window.localStorage.getItem(key)        獲取內容
        ◆window.localStorage.removeItem(key)     刪除內容
        ◆window.localStorage.clear()            清空內容

    ☞ sessionStorage：
          1. 生命週期為關閉當前瀏覽器視窗
           2. 可以在同一個視窗下訪問
           3. 資料大小為5M左右

         ◆window.sessionStorage.setItem(key,value)
        ◆window.sessionStorage.getItem(key)
        ◆window.sessionStorage.removeItem(key)
        ◆window.sessionStorage.clear()

操作多媒體

http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp

Canvas畫布

繪圖工具

  ☞ 設定畫布大小： 預設大小300x150 必須使用內聯方式設定畫布，通過其他方式，實際繪圖區域大小仍為300x150，會有失真效果。
  ☞ 解決畫布重繪問題
       1. 設定一次描邊 ctx.stroke()
       2. 開啟新的圖層 ctx.beginPath();

繪圖方法
let canvas = document.querySelector(“canvas”);
let ctx = canvas.getContext(“2d”);
ctx.moveTo(100,200);
ctx.lineTo(500,300);
ctx.stroke();

ctx.moveTo(x,y)    落筆
ctx.lineTo(x,y)    連線
ctx.stroke()       描邊

ctx.beginPath()；   開啟新的圖層

顏色： strokeStyle="值"
線寬： lineWidth="值"   備註：不需要帶單位

線連線方式：   lineJoin: round | bevel | miter (預設)

線帽（線兩端的結束方式）：  lineCap: butt(預設值) | round | square 

閉合路徑： ctx.closePath()

漸變方案

  ☞ 線性漸變
     var grd=ctx.createLinearGradient(x0,y0,x1,y1);
          x0-->漸變開始的x座標
          y0-->漸變開始的y座標
          x1-->漸變結束的x座標
          y1-->漸變結束的y座標

      grd.addColorStop(0,"black");      設定漸變的開始顏色
      grd.addColorStop(0.1,"yellow");   設定漸變的中間顏色
      grd.addColorStop(1,"red");        設定漸變的結束顏色

      ctx.strokeStyle=grd;
      ctx.stroke();

      備註：
         addColorStop(offse,color);
         中漸變的開始位置和結束位置介於0-1之間，0代表開始，1代表結束。中間可以設定任何小數

  ☞ 徑向漸變

            ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

            (x0,y0)：漸變的開始圓的 x,y 座標

            r0：開始圓的半徑

            (x1,y1)：漸變的結束圓的 x,y 座標

            r1：結束圓的半徑

填充效果

  ctx.fill();         設定填充效果
  ctx.fillstyle="值"; 設定填充顏色

非零環繞原則

 ☞ 繪製一個如下圖形
 裡面圖形順時針，外面圖形逆時針繪圖


 ☞ 非零環繞原則：
      1. 任意找一點，越簡單越好
      2. 以點為圓心，繪製一條射線，越簡單越好（相交的邊越少越好）
      3. 以射線為半徑順時針旋轉，相交的邊同向記為+1，反方向記為-1，如果相加的區域等於0，則不填充。
      4. 非零區域填充

繪製虛線

    原理：

     設定虛線其實就是設定實線與空白部分直接的距離,利用陣列描述其中的關係

     例如： [10,10]  實線部分10px 空白部分10px

     例如： [10,5]  實線部分10px 空白部分5px

     例如： [10,5,20]  實線部分10px  空白5px  實線20px  空白部分10px 實線5px 空白20px....

    繪製：
     ctx.setLineDash(陣列);
     ctx.stroke();

     例如：（需要開啟新的圖層）
         ctx.beginPath();
         ctx.moveTo(100, 100);
         ctx.lineTo(300, 100);
         ctx.setLineDash([2,4]);
         ctx.stroke();

    注意：
        如果要將虛線改為實線，只要將陣列改為空陣列即可。

繪製動畫效果

   ☞ 繪製一個描邊矩形： content.strokeRect(x,y,width,height) 
   ☞ 繪製一個填充矩形： content.fillRect(x,y,width,height)  
   ☞ 清除：           content.clearRect(x,y,width,height)  



   ☞ 實現動畫效果： 
          1. 先清屏
          2. 繪製圖形
          3. 處理變數

繪製文字

  ☞ 繪製填充文字
      content.fillText(文字的內容,x,y)

  ☞ 繪製鏤空文字
       content.strokeText();

  ☞ 設定文字大小：
       content.font="20px 微軟雅黑"
       備註： 該屬性設定文字大小，必須按照cssfont屬性的方式設定

  ☞ 文字水平對齊方式【文字在圓心點位置的對齊方式】
        content.textalign="left | right | center"

  ☞文字垂直對齊方式
         content.textBaseline="top | middle | bottom | alphabetic(預設)"

  ☞文字陰影效果
         ctx.shadowColor="red";  設定文字陰影的顏色

         ctx.ShadowOffsetX=值;   設定文字陰影的水平偏移量

         ctx.shadowOffsetY=值;   設定文字陰影的垂直偏移量

         ctx.shadowBlur=值;      設定文字陰影的模糊度

繪製圖片

  ☞    
      //將圖片繪製到畫布的指定位置
     content.drawImage(圖片物件,x,y);

  ☞ 
     //將圖片繪製到指定區域大小的位置  x,y指的是矩形區域的位置，width和height指的是矩形區域的大小
     content.drawImage(圖片物件,x,y,width,height);

  ☞ 
     //將圖片的指定區域繪製到指定矩形區域內
     content.drawImage(圖片物件,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);

     sx,sy 指的是要從圖片哪塊區域開始繪製，swidth，sheight 是值 擷取圖片區域的大小
     dx,dy 是指矩形區域的位置，dwidth,dheight是值矩形區域的大小



   ☞ 
      解決圖片繪製到某一個區域的按原比例縮放繪製：
        繪製寬：繪製高==原始寬：原始高

繪製圓弧

   ☞
     content.arc(x,y,radius,startradian,endradian[,direct]);

            x,y    圓心的座標

             radius 半徑

             startradian   開始弧度

             endradian     結束弧度

             direct        方向（預設順時針 false）   true 代表逆時針

   ☞ 0度角在哪？
          以圓心為中心向右為0角 順時針為正，逆時針為負

   ☞ 備註：
        角度 和 弧度的關係： 角度:弧度= 180:pi

         特殊值

           0度 = 0弧度

           30度 = π/6   (180度的六分之一)

           45度 = π/4   

           60度 = π/3

           90度 = π/2

           180度 = π

           360度 = 2π



    ☞ 繪製圓上任意點：  
        公式：
           x=ox+r*cos( 弧度 )

           y=oy+r*sin( 弧度 )



         ox: 圓心的橫座標

         oy: 圓心的縱座標

         r： 圓的半徑

平移【座標系圓點的平移】

ctx.translate(x,y);

   特點：
      通過該方法可以將原點的位置進行重新設定。

   注意：
       1. translate(x,y) 中不能設定一個值

       2. 與moveTo(x,y) 的區別：

            moveTo(x,y) 指的是將畫筆的落筆點的位置改變，而座標系中的原點位置並沒有發生改變

            translate(x,y) 是將座標系中的原點位置發生改變

旋轉【座標系旋轉】

ctx.rotate(弧度)

伸縮

  ctx.scale(x,y)

       備註：
           沿著x軸和y軸縮放

           x,y 為倍數  例如： 0.5  1