HTML5_Core.十大新特性

1 增強型表單

1.1 新的input type

number;email;url;color;date;month;week

1.2 新元素element

1. datalist建議列表
   配合input創建建議列表，爲用戶提供輸入內容的建議(與下拉selection相似，提示類似搜索框)

    <datalist id="list3">  默認情況datalist不可見 
       <option>xx</option>
       <option>yy</option>
    </datalist>
    <input type="text" list="list3"/>
   

2. progress進度條
   顯示一個進度條兩種形式：
   <progress> 左右晃動進度條
   <progress value=“0.7” /> 具有指定進度值進度條，可以配合定時器實現動態的進度條

3. meter刻度尺
   <meter min=“最小值” max=“最大值” low=“下限” high=“上限”
   optimum=“最佳值” value=“當前值” />
   使用low和high來分區間，
   當前值離最佳值非常遠，相隔區間 (紅)危險
   當前值離最佳值比較近，相鄰區間 (黃)警告
   當前值離最佳值非常近，當前區間 (綠)正常

4. output輸出
   語義標籤，樣式同span

1.3 新屬性attr

1. autofocus：自動獲取輸入焦點

2. placeholder：佔位符

3. form：把表單元素放在form外面

     <form id="f5">
     </form>
     <input type="text"  form="f5"/>
   

4. multiple：允許輸入多值(但要用逗號分隔)

5. 驗證相關
   1）required：必填項，內容不能爲空
   2）minlength，maxlength：字符串長度
   3）min，max：最值
   4）pattern：正則表達式，可直接對input內容進行驗證

2 視頻音頻

2.1 視頻video

1. Flash
   1）Flash繪圖(AS/Flex) -> Canvas+SVG
   https://echarts.baidu.com/ echarts第三方繪圖庫
   https://d3js.org.cn/ d3繪圖庫
   2）Flash動畫(遊動) -> Canvas+第三方遊戲平臺
   https://www.cocos.com 微信小遊戲
   3）Flash視頻(音頻) -> video/audio (90%)
   4）Flash存儲 -> h5 WebStorage

2. 視頻使用：<video src=“x.mp4”>
   知識補充:
   (1)現在常用視頻格式哪些 .mp4 .flv .webm .ogg
   (2)如果瀏覽器需要播放指定格式視頻,需要安裝對應解碼器軟件
   (3)如果低版本瀏覽器安裝解碼器
   <video src=“x.mp4” />
   問題:我們希望大多數瀏覽器都可以播放視頻
   -x.mp4 使用工具軟件 “格式工廠” 轉換成新的視頻格式 x.flv x.webm x.ogg

   <video>
    <source src="x.mp4" />
    <source src="x.flv" />
    <source src="x.webm" />
    <source src="x.ogg" />
    您的瀏覽器版本太低，請升級!!!
   </video>
   

3. 視頻video常用屬性
   controls:false 是否顯示播放控件 <video controls>
   autoplay:false 是否自動播放 <video autoplay> 兼容性非常差
   loop:false 是否循環播放
   muted:false 是否靜音播放
   poster:"" 在播放第一幀畫面之前顯示海報
   preload 視頻預加載策略：頁面加載完成後預加載視頻內容
   -auto 預加載一定時長視頻和元數據
   -metadata 只預加載元數據(時長;尺寸;第一幀畫面)
   -none 不預加載任何數據

4. 視頻video的js操作屬性
   volume:1 //0~1
   playbackRate:1 回放速度大於1 快放小於1慢播
   paused:false 當前視頻是否處於暫停狀態
   play() 播放視頻
   pause() 暫停播放
   onplay 當視頻開始播放時觸發事件
   onpause 當視頻暫停播放時觸發事件

5. video高級特性——樣式
   object-fit: fill/contain/cover
   fill默認值將視頻拉伸至恰好填滿容器；
   contain保持寬高比例，容器留白；
   cover保持寬高比例，至恰好覆蓋
   注意:cover;contain 使用比例多；如果創建視頻與錄製視頻工程師 750*1334 iphone6 屏幕(全屏播放)

6. video高級特性——特殊屬性
   #擴展知識: 蘋果 IOS/谷歌 Android
   (同層播放)點擊視頻後會自動新建全屏視頻，同時播放
   IOS <video webkit-playsinline=“true”/>
   Android <video playsinline=“true”/>
   <video webkit-playsinline=“true” playsinline=“true”/>
   (橫屏錯位)
   只有Android系統存在，橫置手機後視頻錯位
   <video x5-video-player-fullscreen=“true”>

7. video高級特性——特殊事件
   -timeupdate 當視頻播放時候[時間發生變化]不斷觸發事件(可以獲取當前視頻播放時間currentTime)
   -ended 當視頻播放結束時候
   -canplaythrough 當視頻加載結束可以播放時觸發事件(觸發後可以獲取視頻時長duration)

   v3.addEventListener("canplaythrough",function(){
       console.log("視頻總時長:"+v3.duration);
    })
   

2.2 音頻audio

音頻使用：<audio src=“x.mp4”>
考慮兼容性問題同視頻文件，使用工具軟件 “格式工廠” 轉換成新的音頻格式

      <audio>
         <source src="x.mp3" />
         <source src="x.wav" />
         <source src="x.ogg" />
       </audio>

屬性方法事件大多數與視頻相同

默認情況下音頻文件不可見，如要顯示可直接添加controls屬性

3 Canvas繪圖

3.1 繪圖概述

網頁中繪製圖形三種技術
(1)svg 繪圖技術:2d矢量圖繪製技術 2000出現納入h5標準，放大不失真，已很少使用
(2)canvas 繪圖技術:2d位圖繪製技術，色彩明亮但放大失真
(3)webgl 繪圖技術: 3d 位圖繪製技術，尚未納入h5標準

3.2 canvas繪圖畫布

1. 創建畫布
   <canvas id=“c3” width=“500” height=“400”>
   注意：畫布寬度和高度只能使用屬性或js賦值,不能用css樣式來賦值(css縮放)
2. 通過 js程序獲取畫布
   var c3 = document.getElementById(“c3”);
3. 通過 js程序獲取畫筆[上下文對象]
   var ctx = c3.getContext(“2d”);
   注意：一個畫筆對象僅對應一個畫布對象
   -ctx.lineWidth = 1; 描邊寬度(空心矩形邊框寬度)
   -ctx.strokeStyle = “#fff”; 描邊樣式
   -ctx.fillStyle = “#fff”; 填充樣式(實心矩形內容樣式)
   -ctx.strokeRect(x,y,w,h); 描邊一個矩形
   -ctx.fillRect(x,y,w,h); 填充一個矩形
   注意：x y 矩形左上角位置 w h 寬度和高度；矩形定位點在自己左上角
   -ctx.clearRect(x,y,w,h); 清除一個矩形範圍內所有元素
   可以配合定時器實現動態效果

3.3 canvas繪圖文本

將文本放在畫布上，可以產生動態效果
ctx.textBaseline = “top”; 設置文本基線，基線會與x軸重合，top,alphabetic
ctx.font = “19px SimHei”; 設置文本大小和字體
var str = “abcxyz”; 創建文本對象
ctx.fillText(str,x,y); 繪製填充文本
ctx.strokeText(str,x,y); 繪製空心文本
ctx.measureText(str); 測量文本寬度返回{width:x}
只能先繪製文本對象再測量文本寬度

3.4 canvas繪圖路徑

path: 由多個座標點組成任意圖形，圖形不可見
可以使用"描邊" "填充"
ctx.beginPath() 開始一條新路徑
ctx.closePath() 閉合當前路徑
ctx.moveTo(x,y) 移動到指定點
ctx.lineTo(x,y) 從當前點到指定點畫一條直線
ctx.arc(cx,cy,r,start,end); 繪製圓弧
cx,cy 圓心； r 半徑
start 啓始角度
end 結束角度
注意：程序不使用角度->弧度，角度*Math.PI/180 = 弧度
ctx.stroke(); 描邊
ctx.fill(); 填充

3.5 canvas繪圖圖像

canvas屬於客戶端技術(運在瀏覽器)但是圖片保存服務器中，所以瀏覽器必須先下載繪製圖片，且等待下載完成再繪製.
#圖片爲什麼保存服務器
(1)圖片有版權軟件項目寶貴資源
(2)圖片通常數量巨大

操作流程：
1）創建圖片對象 var p3 = new Image();
2）下載圖片 p3.src = “x.png”;
3）綁定事件[下載完成] p3.onload = function(){}
-函數內繪製圖片
ctx.drawImage(p3,x,y,w,h);拉伸大小
ctx.drawImage(p3,x,y); 原始大小

3.6 canvas繪圖旋轉

canvas繪圖技術可以針對一個圖像在繪製過程中進行旋轉操作
ctx.rotate(弧度); 旋轉畫筆對象，旋轉軸心爲畫布原點
ctx.translate(x,y); 將整個畫布原點平移到某處
當一個畫布上繪製多個元素之前先"保存"，之後"恢復"這種操作使不同元素之間不受影響.
ctx.save(); 保存畫筆狀態
ctx.restore(); 恢復畫筆狀態

3.7 canvas漸變對象(過渡效果)

1）創建漸變對象
var g=ctx.createLinearGradient(x1,y1,x2,y2);
2）添加顏色點
g.addColorStop(offset,color);//offset->0~1
3）漸變對象賦值樣式(描邊；填充)
ctx.fillStyle=g;
ctx.strokeStyle=g;
4）繪製圖形
ctx.fillRect();ctx.strokeText();

3.8 canvas製作遊戲

4.1:遊戲目錄結構
game – 遊戲所有文件都保存在此處
index.html 唯一html
src 保存遊戲中的圖片
大魚眼睛: bigEye0.png bigEye1.png
大魚身體: bigSwim0.png … bigSwim7.png
大魚尾巴: bigTail0.png … bigTail7.png
藍色食物: blue.png
橙色食物: fruit.png
大海背景: background.jpg
js 保存遊戲中的程序
main.js main.js遊戲入口
commonFunctions.js 公共函數庫文件
background.js 遊戲背景
mom.js 大魚
baby.js 小魚
ane.js 海葵
friut.js 食物
…
4.2:遊戲唯一index.html
創建二個畫布大小一相同一個在前一個在後 800*600
前面畫布:大魚;小魚;分數… z-index:1
後面面布:背景;海葵;食物… z-index:0
加載所有 commonFunction.js main.js background.js
複製圖片 src
4.3:創建遊戲程序入口main.js
創建遊戲所有需要用到對象(背景;食物;大魚;…)
將所有對象畫在畫布上
4.4:大海背景圖
src/background.jpg 繪製第二畫布
1:main.js 聲明全局變量保存圖片
var bgPic;
2:init 創建圖片對象下載圖片
bgPic = new Image();
bgPic.src = “src/background.jpg”
3:將繪製圖片放在函數 background.js
drawBackground(){
ctx2.drawImage(bgPic,0,0)
}
4:創建定時器 100 繪製畫布上所有元素
定時器:setInterval(fn,100);
智能定時器:requestAnimationFrame(fn)
兼容性差:解決問題 commontFunctions.js
自定義兼容性很好函數:requestAnimFrame(fn)
main.js gameloop
function gameloop(){
requestAnimFrame(gameloop);
drawBackground();
}
常見錯誤:
(1) background.jpg:1 404 (Not Found)
原因:圖片路徑不正確
圖片不存在
4.5:海葵
一共50根海葵
海葵基本 高度 200
海葵與海葵之間水平間距 16
始點座標x+16+random
終點座標
在js目錄創建文件 ane.js

4 SVG繪圖

4.1 svg與canvas比較

	canvas	svg
類型	2d位圖	2d矢量
繪圖方式	使用js代碼繪圖	使用標籤繪圖
事件綁定	只能綁定畫布	每個圖形都可以綁定
應用場景	特效，遊戲	地圖

4.2 svg開發流程

1. 創建畫布

   <svg id="s3" width="500" height="400">
   	圖形標籤
   </svg>
   

2. 畫布中添加標籤(圖形)
   <rect x="" y="" width="" height="" fill="" fill-opacity="" stroke="" stroke-opacity="">

3. svg繪製圖形特性
   1:所有圖形默認只有填充色(黑色)
   2:svg圖形的樣式可以用元素屬性聲明，也可以使用css樣式聲明，但是CSS聲明只能使用SVG專用樣式,如邊框只能用 stroke 而不能用 border
   3:圖形可以使用js賦值，但不能使用html，只能使用核心dom
   r5.width = 300; r5.height=100; error
   r5.setAttribute(“width”,300); ok
   r5.setAttribute(“height”,100); ok

4. 動態添加svg矩形
   svg可直接對其上圖形綁定事件處理函數
   (1)html字符串拼接

    var html = "<rect></rect>";
    svg.innerHTML = html;
   

   (2)創建對象

   var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
   svg.appendChild(rect);
   

5. 動態添加svg圓形
   <circle r="" cx="" cy="">

6. 動態添加svg橢圓
   <ellipse rx="" ry="" cx="" cy="">
   cx,cy 圓心
   rx:水平半徑 ry:垂直半徑

7. 動態添加svg直線
   <line x1="" y1="" x2="" y2="">
   x1,y1 起點座標
   x2,y2 終點座標
   stroke-width=“5” stroke-linecap="round"線段圓角

8. 動態添加svg折線
   一條折線上可以有任意多個連續點
   <polyline points=“50,50 100,50 …”
   stroke="" fill=“transparent”>

9. 動態添加svg文本圖像
   svg畫布不能使用 span p標籤不可以用
   <text font-size="" fill="" stroke="">文本內容
   <image xline:href=" x.png" x="" y="" width="" height=""/>

10. 動態添加svg漸變對象

      <defs>    定義特效對象:
       <linearGradient id="g3" x1="" y1="" x2="" y2="">
         <stop offset="" stop-color="" />
       </linearGradient>
      </defs>
      <ANY fill="url(#g3)"></ANY>
    

11. 動態添加svg濾鏡(高斯模糊)

      <defs>
         <filter id="f3">
            <feGaussianBlur stdDeviation="模糊度" />//模糊度越大越模糊
         </filter>
      </defs>
      <ANY filter="url(#f3)"></ANY>
    

    svg關於濾鏡的網址：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter

羣組group可以爲內部所有標籤設置統一屬性
<g stroke-width=“5” stroke-linecap=“round”
stroke=“red”>

4.3 第三方繪圖庫

https://d3js.org/ d3開源免費庫
https://echarts.baidu.com/ 百度開源免費庫

4.3.1 echarts直方圖

1）下載並且在程序引入 echarts.js 文件
2）創建圖形容器 <div id=“main” style=“width;height”>
3）通過js 程序獲取容器並且創建echarts對象
var main = document.getElementById(“main”);
var mychart = echarts.init(main)
4）創建配置項

var option = {
      title:{text:"echart入門示例"},
      xAxis:{data:["襯衫","襪子","雪紡衫"]},
      yAxis:{},
      series:[{type:"bar",data:[100,1,3]}]//數據源，bar表示直方圖
   }

5）將配置項添加echarts對象中
mychart.setOption(option);

4.3.2 折線圖

series:[{type:“line”}]

4.3.3 儀表圖

 series:[{
  type:"gauge",
  detail:{formatter:'{value}%'}
  data:[{value:32,name:"任務完成率"}]
 }]

4.3.4 餅圖

 series:[{
   type:"pie",
   radius:"50%",        半徑
   center:["50%","50%"], 圓心[水平,垂直]
   data:[{value:325,name:"郵件營銷"},{value:129,name:"搜索"}]
 }]

5 地理定位

geolocation:地理定位使用js獲取當前瀏覽器所處地理座標
(經度;緯度;海拔;速度)數據,用於實例 LBS Location Base Service
基於位置服務:餓了麼,滴滴打車…
手機瀏覽器如何獲取定位信息
(1)首選手機GPS芯片與網絡連接定位精度在米
(2)次選手機通基站

HTML5中提供一個新對象，用於獲取當前瀏覽器定位信息
window.navigator.geolocation{
getCurrentPostion:fn 獲取當前定位
watchPostion:fn 監聽位置變化
clearPostion:fn 取消監聽
}
國內三家地理定位服務商
(1)百度地圖
(2)高德
(3)騰訊地圖

5.1 百度地圖

-註冊百度開發者帳戶 (手機)
http://lbsyun.baidu.com/
-百度分配 AccessKey 訪問密鑰
u70A5pnNrRtRT1XAgwM5jL2YIVj1Gv97
-在自己網站中嵌入百度地圖 API

<script src="http://api.map.baidu.com/api?v=2.0&ak=密鑰"></script>
<div id="container"></div>
<script>
  1:創建地圖對象
  var map = new BMap.Map("container")
  2:創建座標點
  var point = new BMap.Point(經度,緯度);
  3:初始化地圖並且指定地圖顯示級別 1-19
  map.centerAndZoom(point,15)
  
    // 導航控件
	map.addControl(new BMap.NavigationControl()); 
	//縮放控件
	map.addControl(new BMap.ScaleControl());
	//地圖類型控件
	map.addControl(new BMap.MapTypeControl());
</script>

6 拖放API

Drag & Drop 拖動和釋放
HTML5爲拖放操作的兩個對象提供7個事件
1）拖動源對象(會動)
dragstart 拖動開始
drag 拖動中
dragend 拖動結束
整個過程:dragstart1+dragn+dragend1
2）拖動目標對象(不會動)
dragenter 拖動進入
dragover 拖動懸停
dragleave 拖動離開
drop 拖動釋放
整個過程1:dragenter1+dragovern+dragleave1
整個過程2:dragenter1+dragovern+drop*1

注意：dragover事件有默認行爲懸停結束後立即
觸發離開事件，不會觸發drop釋放事件
解決問題:阻止dragover事件默認行爲，e.preventDefault()

7 Web Worker

程序:指可以被CPU執行代碼存儲磁盤中 1.js 1.html
進程:指程序被OS調用內存中並且分配執行空間
線程:線程是進程內部執行單位

chrome瀏覽器線程模型
一個chrome進程內至少有6個線程，可以向web服務器發起請求 – 資源請求線程
還有一個線程負責將所有資源繪製瀏覽器上並且執行 js程序 --UI主線程
<button>
<script src=“1.js”>
<button>
現象:js擴行過程中，按鈕1可見按鈕2不可見
原因:瀏覽器同一個線程執行js 的繪製按鈕
解決方法:創建一個新線程由它執行耗時js任務,UI線程負責網頁渲染.

   <button></button>
   <script>
       new Worker("1.js");
       #以上代碼完成二個任務
       #(1)創建Worker對象
       #(2)創建新線程執行1.js
   </script>
   <button></button>

注意事項1:Worker不能通過本地路徑運行,報錯
Failed to construct ‘Worker’
解決問題:必須在網絡情況下運行 http://127…
注意事項2:瀏覽器不允許Worker執行任何DOM/BOM對象.
原因:瀏覽器只允許UI主線程操作DOM/BOM,類似的JQUERY程序不能在Worker執行.

web Worker–數據傳遞
1）Worker線程可以發送消息給UI線程
–Worker發送消息
postMessage(stringMsg)
–UI 接收消息
var w = new Worker(“1.js”);
w.onmessage = function(e){e.data}
2）UI線程可以發送消息給Worker線程
–UI發送消息
var w = new Worker(“1.js”);
w.postMessage(stringMsg)
–Worker 接收
onmessage = function(e){e.data}

8 Web Storage

8.1 客戶端存儲技術

在瀏覽器中存儲當前用戶專有數據:購物車,定製樣式
在客戶端存儲數據可以使用技術
(1)cookie技術:瀏覽器兼容性好,不能超過4kb,操作複雜(F12->application->storage->cookies)
(2)Flash存儲:依賴於Flash播放器
(3)H5 WebStorage:不能超過8MB,操作簡單
(4)IndexDB:可存儲大量數據，還不是標準技術

8.2 session會話

操作過程：瀏覽器打開某一個網站第一個頁面(會話開始)中間可能打開多個網頁(會話中)直到關閉瀏覽器(會話結束)
整個過程稱爲"瀏覽器與 web服務器一次會話"

WebStorage技術提供二個對象存儲數據

1. sessionStorage
   將數據保存sessionStorage，會話開始保存數據,同一個會話中。其它網頁可以獲取sessionStorage數據,一旦關閉瀏覽器(會話結束)， sessionStorage數據清空，對象失效
   作用:同一個會話中所有頁面共享數據

   //sessionStorage方法
   -sessionStorage[key] = value; 保存數據
   -sessionStorage.setItem(key,value); 保存數據
   -var value = sessionStorage[key]; 獲取數據value
   -var value = sessionStorage.getItem(key); 獲取數據 value
   -sessionStorage.removeItem(key); 刪除指定key/value
   -sessionStorage.clear(); 清除數據
   -sessionStorage.length; 數據個數
   -var key = sessionStorage.key(i); 獲取數據，返回第i個key

2. localStorage
   本地存儲(跨會話級別存儲)–永久保存
   作用:購物車

    //localStorage方法
    - localStorage [key] = value;           	保存數據
    - localStorage.setItem(key,value);      	保存/修改數據
    -var value = localStorage [key];        	獲取數據value
    -var value = localStorage.getItem(key);		獲取數據 value
    - localStorage.removeItem(key);      	刪除指定key/value
    - localStorage.clear();              		清除數據
    - localStorage.length;				  	數據個數
    -var key = localStorage.key(i);        		獲取數據 key
   

   localStorage如果數據發生修改,觸發一次window.onstorage事件,可以監聽此事件,實現監聽localStorage數據改變的目標，不能監聽 sessionStorage

9 Web Socket

http網絡協議:
協議網絡工作標準依靠軟件實例(node.js服務器/瀏覽器)
http:工作模型:請求-響應,只有客戶端先發起請求,服務器纔會返回響應消息,沒有請求就沒有響應
http作用:傳輸網頁中資源(html;css;js;img;avi;mp3…)

webSocket協議:屬於"廣播-收聽"
客戶端連接到服務器上就不再斷開, 永久連接,雙方都可以隨時向對方發送消息.
ws:適合:股票走勢圖,在線聊天室

9.1 服務器

-ws 服務器[java/php/node.js]
(需要下載第三方模塊 [ws])
1）指定監聽端口 9001
var server = new ws.Server({port:9001});
2）接收客戶請求
server.on(“connection”,(socket)=>{})
3）向對方發送消息
socket.send();
4）接收對方消息
socket.on(“message”,(msg)=>{})
socket.on(“close”,()=>{})

9.2 客戶端

html5中新對象 WebSocket 發請求 發消息 接收消息
–創建webSocket對象[創建對象;發請求建立連接]
var socket = new WebSocket(“ws://127.0.0.1:9001”);
–向服務器發送消息
socket.send(stringMsg);
–接收服器消息
socket.onmessage = function(e){e.data}
–關閉連接
socket.close();

10 語義標籤

header footer aside section等