摘要：筆記了解屬于上一代的新迭代語言，設(shè)計(jì)最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體例如標(biāo)簽和及標(biāo)記新特性取消了過時(shí)的顯示效果標(biāo)記和新表單元素引入新語義標(biāo)簽的引入標(biāo)簽圖形設(shè)計(jì)本地?cái)?shù)據(jù)庫(kù)本地存儲(chǔ)一些好處跨平臺(tái)

HTML5筆記

了解HTML5

 ?HTML5屬于上一代HTML的新迭代語言，設(shè)計(jì)HTML5最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體?。?！
 ? 例如： video 標(biāo)簽和 audio 及 canvas 標(biāo)記
 
 ? 新特性：
      1. 取消了過時(shí)的顯示效果標(biāo)記   和  ...
      2. 新表單元素引入
      3. 新語義標(biāo)簽的引入 ?
      4. canvas標(biāo)簽（圖形設(shè)計(jì)）
      5. 本地?cái)?shù)據(jù)庫(kù)（本地存儲(chǔ)）
      6. 一些API
 ? 好處：
      1. 跨平臺(tái)
          例如：比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。
?
 ? 缺點(diǎn)：
      1. pc端瀏覽器支持不是特別友好，造成用戶體驗(yàn)不佳

新語義標(biāo)簽

網(wǎng)頁布局結(jié)構(gòu)標(biāo)簽及兼容處理

 ?<header>header>
 ?<footer>footer>
 ?<article>article>
 ?<aside>aside>
 ?<nav>nav>
 ?<section>section>
  ....
  http://www.w3school.com.cn/html/html5_semantic_elements.asp

多媒體標(biāo)簽及屬性介紹

 ? <video>video> 視頻
      屬性：controls 顯示控制欄
      屬性：autoplay 自動(dòng)播放  
     屬性：loop  設(shè)置循環(huán)播放
 ? <audio>audio>  音頻
      屬性：controls 顯示控制欄
      屬性：autoplay 自動(dòng)播放  
     屬性：loop  設(shè)置循環(huán)播放
 ? video標(biāo)簽支持的格式 ?  http://www.w3school.com.cn/html5/html_5_video.asp
 ? 多媒體標(biāo)簽在網(wǎng)頁中的兼容效果方式
?
     <video>
        <source src="code/多媒體標(biāo)簽/trailer.mp4">
        <source src="trailer.ogg">
        <source src="trailer.WebM">
    video>

新表單元素及屬性

智能表單控件

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

表單屬性

 ◆form屬性：   
    autocomplete=on | off ? ? ? ?  自動(dòng)完成
    novalidate=true | false ? ? ?  是否關(guān)閉校驗(yàn)
?
  ◆ input屬性：
 ?  *autofocus  ： 自動(dòng)獲取焦點(diǎn)
 ?  form：       表單域外的輸入控件添加一個(gè) form="表單域的id值" , 該輸入控件會(huì)跟隨表單域一起提交
 ?  list：
     ? <input type="text" list="abc"/>
         <datalist id="abc">
            <option value="123">12312option>
            <option value="123">12312option>
            <option value="123">12312option>
            <option value="123">12312option>
        datalist>
 ?  multiple：    實(shí)現(xiàn)多選效果
 ?  *placeholder ： 占位符  （提示信息）
 ?  *required： ?  必填項(xiàng)
?
?
留下的疑問：
    ◆ 如何修改表單控件中的默認(rèn)提示信息 
         1. 表單驗(yàn)證觸發(fā)oninvalid事件
         2. 通過setCustomValidity方法設(shè)置修改內(nèi)容

HTMl5中的API

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

 ?? document.querySelector("選擇器")；
     備注：
     ? ?選擇器： 可以是css中的任意一種選擇器
 ? ? ? ? 通過該選擇器只能選中第一個(gè)元素。
?
 ?? document.querySelectorAll("選擇器");
     ? 備注：
     ? ? ?與document.querySelector區(qū)別： querySelectorAll 可以選中所有符合選擇器規(guī)則的元素，返回的是一個(gè)列表。querySelector返回的只是多帶帶的一個(gè)元素
     ?
?
 ?? Dom.classList.add("類名"): 給當(dāng)前dom元素添加類樣式
?
 ?? Dom.classList.remove("類名"); 給當(dāng)前dom元素移除類樣式
?
 ?? classList.contains("類名"); 檢測(cè)是否包含類樣式
?
 ?? classList.toggle("active"); ?切換類樣式（有就刪除，沒有就添加）
?
?
?
?
 ?? 自定義屬性           （小案例分析體驗(yàn)自定義屬性）
 ?
     data-自定義屬性名
     備注：
         在標(biāo)簽中，以data-自定義名稱 ?
     
?
     1. 獲取自定義屬性 ? Dom.dataset ? 返回的是一個(gè)對(duì)象
     ? ?Dom.dataset.屬性名 ?或者 ?Dom.dataset[屬性名]
     ? 
     ? ?注意： 
 ? ? ?          屬性名是不包含data-
?
     2. 設(shè)置自定義屬性
     ? ?Dom.dataset.自定義屬性名=值 ?或者 ?Dom.dataset[自定義屬性名]=值；

文件讀取

  ?  FileReader
      FileReader             接口有3個(gè)用來讀取文件方法返回結(jié)果在result中
      readAsBinaryString ?  ---將文件讀取為二進(jìn)制編碼
      readAsText         ? ---將文件讀取為文本
      readAsDataURL      ? ---將文件讀取為DataURL
?
 ?  FileReader 提供的事件模型
     onabort     ?  中斷時(shí)觸發(fā)
 ? ? onerror     ?  出錯(cuò)時(shí)觸發(fā)
 ? ? onload  ?  文件讀取成功完成時(shí)觸發(fā)
 ? ? onloadend  讀取完成觸發(fā)，無論成功或失敗
 ? ? onloadstart    讀取開始時(shí)觸發(fā)
 ? ? onprogress 讀取中
?
 ? 分析讀取圖片小案例

獲取網(wǎng)絡(luò)狀態(tài)

  ? 獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)
         window.navigator.onLine 返回一個(gè)布爾值
?
  ? 網(wǎng)絡(luò)狀態(tài)事件
         1. window.ononline
         2. window.onoffline

獲取地理定位

  ?  獲取一次當(dāng)前位置
	  window.navigator.geolocation.getCurrentPosition(success,error);

	   1. coords.latitude   維度
       2. coords.longitude   經(jīng)度

  ?  實(shí)時(shí)獲取當(dāng)前位置
  	  window.navigator.geolocation.watchPosition(success,error);

  ? 分析地理定位小案例

本地存儲(chǔ)

   ?發(fā)展：
      隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁的應(yīng)用越來越普遍，同時(shí)也變的越來越復(fù)雜，為了滿足各種各樣的需求，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來進(jìn)行存儲(chǔ)的，但是由于其存儲(chǔ)大小只有4k左右，并且解析也相當(dāng)?shù)膹?fù)雜，給開發(fā)帶來諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲(chǔ)數(shù)據(jù)。 

    ?  localStorage：
    	1. 永久生效
        2. 多窗口共享
        3. 容量大約為20M
        
        ◆window.localStorage.setItem(key,value)  設(shè)置存儲(chǔ)內(nèi)容
        ◆window.localStorage.getItem(key)  		 獲取內(nèi)容
        ◆window.localStorage.removeItem(key)	 刪除內(nèi)容
        ◆window.localStorage.clear()			清空內(nèi)容
        
    ? sessionStorage：
		  1. 生命周期為關(guān)閉當(dāng)前瀏覽器窗口
           2. 可以在同一個(gè)窗口下訪問
           3. 數(shù)據(jù)大小為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

作業(yè)：
	 完成一個(gè)在線音樂播放器或者視頻播放器

Canvas畫布

繪圖工具

  ? 介紹canvas畫布
  ? 設(shè)置畫布大?。?使用屬性方式設(shè)置
  ? 解決畫布重繪問題
  	   1. 設(shè)置一次描邊
       2. 開啟新的圖層

繪圖方法

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

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

演示： strokeStyle="值"
線寬： linewidth="值"   備注：不需要帶單位

線連接方式：   lineJoin: round | bevel | miter (默認(rèn))

線帽（線兩端的結(jié)束方式）：  lineCap: butt(默認(rèn)值) | round | square 

閉合路徑： ctx.closePath()


--繪制一條直線演示代碼

--作業(yè)：
	   1. 從200,100的位置繪制寬為200高為150的矩形
        2. 準(zhǔn)備一個(gè)600*400的畫布，三等分這個(gè)畫布，分別繪制正方形。直角三角形，梯形

漸變方案

  ? 線性漸變
  	 var grd=ctx.createLinearGradient(x0,y0,x1,y1);
  	 	  x0-->漸變開始的x坐標(biāo)
          y0-->漸變開始的y坐標(biāo)
          x1-->漸變結(jié)束的x坐標(biāo)
          y1-->漸變結(jié)束的y坐標(biāo)
          
      grd.addColorStop(0,"black");      設(shè)置漸變的開始顏色
      grd.addColorStop(0.1,"yellow");   設(shè)置漸變的中間顏色
      grd.addColorStop(1,"red");        設(shè)置漸變的結(jié)束顏色

  	  ctx.strokeStyle=grd;
      ctx.stroke();
      
      備注：
         addColorStop(offse,color);
         中漸變的開始位置和結(jié)束位置介于0-1之間，0代表開始，1代表結(jié)束。中間可以設(shè)置任何小數(shù)
         
  ? 徑向漸變
  
  	        ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

            (x0,y0)：漸變的開始圓的 x,y 坐標(biāo)

            r0：開始圓的半徑

            (x1,y1)：漸變的結(jié)束圓的 x,y 坐標(biāo)

            r1：結(jié)束圓的半徑

填充效果

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

非零環(huán)繞原則

 ? 繪制一個(gè)如下圖形

?

 ? 非零環(huán)繞原則：
	  1. 任意找一點(diǎn)，越簡(jiǎn)單越好
	  2. 以點(diǎn)為圓心，繪制一條射線，越簡(jiǎn)單越好（相交的邊越少越好）
	  3. 以射線為半徑順時(shí)針旋轉(zhuǎn)，相交的邊同向記為+1，反方向記為-1，如果相加的區(qū)域等于0，則不填充。
	  4. 非零區(qū)域填充
	  
 ? 非零環(huán)繞原則案例：

?

繪制虛線

	原理：

     設(shè)置虛線其實(shí)就是設(shè)置實(shí)線與空白部分直接的距離,利用數(shù)組描述其中的關(guān)系

     例如： [10,10]  實(shí)線部分10px 空白部分10px

     例如： [10,5]  實(shí)線部分10px 空白部分5px

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

    繪制：
     ctx.setLineDash(數(shù)組);
     ctx.stroke();
     
     例如：
     	 ctx.moveTo(100, 100);
	 	 ctx.lineTo(300, 100);
	 	 ctx.setLineDash([2,4]);
	 	 ctx.stroke();

    注意：
        如果要將虛線改為實(shí)線，只要將數(shù)組改為空數(shù)組即可。

繪制動(dòng)畫效果

   ? 繪制一個(gè)描邊矩形： content.strokeRect(x,y,width,height) 
   ? 繪制一個(gè)填充矩形： content.fillRect(x,y,width,height)  
   ? 清除：		   content.clearRect(x,y,width,height)  
   
   
   ? 實(shí)現(xiàn)動(dòng)畫效果： 
   	      1. 先清屏
   	      2. 繪制圖形
   	      3. 處理變量

繪制文本

  ? 繪制填充文本
  	  content.fillText(文本的內(nèi)容,x,y)
  
  ? 繪制鏤空文本
  	   content.strokeText();
  	   
  ? 設(shè)置文字大?。?  	   content.font="20px 微軟雅黑"
  	   備注： 該屬性設(shè)置文字大小，必須按照cssfont屬性的方式設(shè)置
  	   
  ? 文字水平對(duì)齊方式【文字在圓心點(diǎn)位置的對(duì)齊方式】
  		content.textalign="left | right | center"
  
  ?文字垂直對(duì)齊方式
  		 content.textBaseline="top | middle | bottom | alphabetic(默認(rèn))"
  
  ?文字陰影效果
  		 ctx.shadowColor="red";  設(shè)置文字陰影的顏色

         ctx.ShadowOffsetX=值;   設(shè)置文字陰影的水平偏移量

         ctx.shadowOffsetY=值;   設(shè)置文字陰影的垂直偏移量

         ctx.shadowBlur=值;      設(shè)置文字陰影的模糊度

繪制圖片

  ?    
      //將圖片繪制到畫布的指定位置
     content.drawImage(圖片對(duì)象,x,y);

  ? 
  	 //將圖片繪制到指定區(qū)域大小的位置  x,y指的是矩形區(qū)域的位置，width和height指的是矩形區(qū)域的大小
     content.drawImage(圖片對(duì)象,x,y,width,height);
     
  ? 
  	 //將圖片的指定區(qū)域繪制到指定矩形區(qū)域內(nèi)
     content.drawImage(圖片對(duì)象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
     
     sx,sy 指的是要從圖片哪塊區(qū)域開始繪制，swidth，sheight 是值 截取圖片區(qū)域的大小
     dx,dy 是指矩形區(qū)域的位置，dwidth,dheight是值矩形區(qū)域的大小
     

   ? 
   	  解決圖片繪制到某一個(gè)區(qū)域的按原比例縮放繪制：
        繪制寬：繪制高==原始寬：原始高

繪制圓弧

 ? ?
 ?   content.arc(x,y,radius,startradian,endradian[,direct]);
 ?   
 ?   ?      x,y ?  圓心的坐標(biāo)
?
 ? ? ? ? ? ? radius 半徑
?
 ? ? ? ? ? ? startradian ? 開始弧度
?
 ? ? ? ? ? ? endradian ? ? 結(jié)束弧度
 ? ? ? ?
 ? ? ? ? ? ? direct ? ? ?  方向（默認(rèn)順時(shí)針 false） ? true 代表逆時(shí)針
 ? ? ? ? ? ? 
 ? ? 0度角在哪？
          以圓心為中心向右為0角 順時(shí)針為正，逆時(shí)針為負(fù)
 ? ? ? ? ? ? 
 ? ? 備注：
 ?   ?  角度 和 弧度的關(guān)系： 角度:弧度= 180:pi
 ?   ? ?
 ?   ? ? 特殊值
?
 ? ? ? ? ? 0度 = 0弧度
?
 ? ? ? ? ? 30度 = π/6 ? (180度的六分之一)
?
 ? ? ? ? ? 45度 = π/4 ? 
?
 ? ? ? ? ? 60度 = π/3
?
 ? ? ? ? ? 90度 = π/2
?
 ? ? ? ? ? 180度 = π
?
 ? ? ? ? ? 360度 = 2π
 ? ? ? ? ? 
 ? ? ? ? ? 
 ?  ? 繪制圓上任意點(diǎn)：  
 ?      公式：
 ? ? ? ? ? x=ox+r*cos( 弧度 )
?
 ? ? ? ? ? y=oy+r*sin( 弧度 )
?
?
 ? ? ? ? ox: 圓心的橫坐標(biāo)
?
 ? ? ? ? oy: 圓心的縱坐標(biāo)
?
 ? ? ? ? r： 圓的半徑

平移【坐標(biāo)系圓點(diǎn)的平移】

ctx.translate(x,y);
?
 ? 特點(diǎn)：
 ? ?  通過該方法可以將原點(diǎn)的位置進(jìn)行重新設(shè)置。
?
 ? 注意：
 ? ? ? 1. translate(x,y) 中不能設(shè)置一個(gè)值
?
 ? ? ? 2. 與moveTo(x,y) 的區(qū)別：
?
 ? ? ? ? ?  moveTo(x,y) 指的是將畫筆的落筆點(diǎn)的位置改變，而坐標(biāo)系中的原點(diǎn)位置并沒有發(fā)生改變
?
 ? ? ? ? ?  translate(x,y) 是將坐標(biāo)系中的原點(diǎn)位置發(fā)生改變

旋轉(zhuǎn)【坐標(biāo)系旋轉(zhuǎn)】

ctx.rotate(弧度)

伸縮

 ctx.scale(x,y)
?
 ? 備注：
 ? ? ? 沿著x軸和y軸縮放
?
 ? ? ? x,y 為倍數(shù)  例如： 0.5  1