摘要：前端知識(shí)點(diǎn)總結(jié)新特性新的語(yǔ)義標(biāo)簽增強(qiáng)型表單音頻和視頻繪圖繪圖地理定位拖動(dòng)增強(qiáng)型表單新新的表單元素新特性數(shù)據(jù)列表本身不可見(jiàn)為提供輸入建議列表新特性進(jìn)度條左右晃動(dòng)進(jìn)度條具有指定進(jìn)度值進(jìn)度條新特性刻度尺用于標(biāo)示一個(gè)值所值的范圍不

(1)新的語(yǔ)義標(biāo)簽
(2)增強(qiáng)型表單*
(3)音頻和視頻
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖動(dòng)API
(8)Web Worker
(9)Web Storage
(10)Web Socket

1.新input type
H4:text;checkbox;password;radio;submit;reset;File;
H5:email;url;number;search;color;date;month;week

2.新的表單元素
H4:input;button;select;textarea
H5:datalist;progress;meter;output

 
datalist為input提供輸入建議列表

左右晃動(dòng)進(jìn)度條
具有指定進(jìn)度值進(jìn)度條

Meter：用于標(biāo)示一個(gè)值所值的范圍:不可接受(紅色),可以接受(黃色),非常優(yōu)秀(綠)
薪水:
最佳值=”” value=”當(dāng)前值”>

output:輸出，語(yǔ)義標(biāo)簽,沒(méi)有任何外觀樣式，樣式等同于span
商品單價(jià): 3.50
購(gòu)買數(shù)量:
小計(jì):

7.00

H4:type;id;value;name;style;readyonly;disabled;checked
H5:
(1) placeholder 占位符
(2) autofocus 自動(dòng)獲取輸入焦點(diǎn)
(3) multiple 允許輸入框中輸入多個(gè)值，用逗號(hào)分值
(4) form 用于把輸入域放置在表單外部

 Flash被H5取代
 Flash繪圖(AS/Flex)   ->    canvas/svg
 Flash動(dòng)畫            ->    canvas/svg 定時(shí)器
 Flash視頻和音頻播放   ->    video/audio
 Flash 客戶端存儲(chǔ)      ->    webstorage

它本身是一個(gè)300*150的inline-block元素
成員屬性:
autoplay 是否自動(dòng)播放
controls 是否顯示控件
muted 是否靜音
loop 是否循環(huán)播放
poster 在播放第一幀畫面之前廣告(圖片)
preload 視頻加載策略

auto: 預(yù)加載一定時(shí)長(zhǎng)視頻和元數(shù)據(jù)

  metadata:    僅預(yù)加載元素?cái)?shù)(尺寸，時(shí)長(zhǎng)，第一幀畫面)
  none:        不加載任何內(nèi)容

js對(duì)象屬性:

currentTime  當(dāng)前播放時(shí)長(zhǎng)
duration     總時(shí)長(zhǎng)
paused:     當(dāng)前視頻是否處理暫停狀態(tài)
volume（0~1）  音量

playbackRate: 回放速率: 大于1快播 小于1慢放
js 成員方法
play() 播放視頻
pause() 暫停視頻播放
js 事件
onplay 當(dāng)視頻開(kāi)始播放觸發(fā)事件
onpause 當(dāng)視頻暫停播放觸發(fā)事件

它默認(rèn)300*30的inline-block元素，但是沒(méi)有controls屬性，
則display:none;
成員屬性:
autoplay 是否自動(dòng)播放
controls 是否顯示控件
muted 是否靜音
loop 是否循環(huán)播放
preload 視頻加載策略

auto: 預(yù)加載一定時(shí)長(zhǎng)視頻和元數(shù)據(jù)

  metadata:    僅預(yù)加載元素?cái)?shù)(尺寸，時(shí)長(zhǎng)，第一幀畫面)
  none:        不加載任何內(nèi)容

js對(duì)象屬性

currentTime  當(dāng)前播放時(shí)長(zhǎng)
duration     總時(shí)長(zhǎng)
paused:     當(dāng)前視頻是否處理暫停狀態(tài)
volume（0~1）  音量

playbackRate: 回放速率: 大于1快播 小于1慢放
js 成員方法
play() 播放視頻
pause() 暫停視頻播放
js 事件
onplay 當(dāng)視頻開(kāi)始播放觸發(fā)事件
onpause 當(dāng)視頻暫停播放觸發(fā)事件

網(wǎng)頁(yè)中的實(shí)時(shí)走勢(shì)圖,搶紅包,網(wǎng)頁(yè)游戲,地圖應(yīng)用..
(1)SVG 繪圖 2D矢量繪圖技術(shù)，2000年出現(xiàn),后納入h5
(2)Canvas繪圖 2D位圖繪圖技術(shù)，H5提出
(3)WebGL繪圖 3D繪圖技術(shù)，尚未納入H5標(biāo)準(zhǔn)

Canvas繪圖難點(diǎn)所在:
(1)坐標(biāo)系
(2)單詞比較多

 Canvas畫布:畫布是H5提供的繪圖基礎(chǔ)
   
      您的瀏覽器版本太低，請(qǐng)升級(jí)
   

Canvas標(biāo)簽在瀏覽器中默認(rèn)是300*150的inine-block,畫布寬度高度屬性只能用js/屬性來(lái)賦值.
不能用CSS樣式賦值.
每個(gè)畫布上有且只有一個(gè)”畫筆”對(duì)象—使用該對(duì)象來(lái)繪圖
var ctx = canvas.getContext(“2d”); 得到畫布的畫筆對(duì)象

(1)使用canvas繪制矩形(長(zhǎng)方形)

 矩形定位點(diǎn)在自己左上角
 ctx.lineWidth = 1;        描邊寬度(邊線寬度)
 ctx.fillStyle = “#999”;      填充樣式
 ctx.strokeStyle = “#000”;   描邊樣式
 ctx.fillRect(x,y,w,h);       填充矩形
 ctx.strokeRect(x,y,w,h);    描邊矩形
 ctx.clearRect(x,y,w,h);     清除矩形范圍內(nèi)所有圖形

(2)使用canvas繪制文本

ctx.textBaseline = “alphabetic” 文本基線
ctx.font = “12px sans-serif”; 文本大小和字體
ctx.fillText(str,x,y); 填充一段文本
ctx.strokeText(str,x,y) 描邊一段文本
ctx.measureText(str); 測(cè)量文本寬度

path:由多個(gè)坐標(biāo)點(diǎn)組成任意形狀，路徑不可見(jiàn)，可用于
“描邊”,”填充”.
復(fù)雜圖形依靠路徑
ctx.beginPath(); 開(kāi)始一條新路徑
ctx.closePath(); 閉合當(dāng)前路徑
ctx.moveTo(x,y); 移動(dòng)到指定點(diǎn)
ctx.lineTo(x,y); 從當(dāng)前點(diǎn)到指定點(diǎn)畫直線
ctx.arc(cx,cy,r,start,end); 繪制圓拱型
cx,cy 圓心
r 半徑
start,end 開(kāi)始角度和結(jié)束角度
圓弧度 0~2*Math.PI
角度=>弧度 n*Math.PI/180=>弧度
ctx.stroke(); 描邊
ctx.fill(); 填充

canvas 屬于客戶端技術(shù)，圖片保存服務(wù)器，所以瀏覽器先下載，再繪制圖片，且等待圖處下載完成.

 var p3 = new Image();
 p3.src = “x.jpg”;      #下載指定圖片
p3.onload = function(){ #當(dāng)圖片下載成功后觸發(fā)事件
console.log(p3.width);
ctx.drawImage(p3,x,y);   //繪制原始大小圖片
ctx.drawImage(p3,x,y,w,h); //拉伸圖片
}

canvas繪圖中有變形技術(shù)同，可以針對(duì)某一個(gè)圖形/圖像在繪制過(guò)程中進(jìn)行變形:rotate();translate();平移原點(diǎn)
ctx.rotate(弧度); 旋轉(zhuǎn)繪制圖像以畫布原點(diǎn)為軸心.
ctx.translate(x,y); 將畫布原點(diǎn)平移到指定位置
ctx.save(); 保存畫筆當(dāng)前所有狀態(tài)值
ctx.restore()); 恢復(fù)畫筆上一次保存時(shí)所有狀態(tài)值

位圖:由一個(gè)一個(gè)像素點(diǎn)組成，每個(gè)點(diǎn)各有自己顏色，色彩細(xì)膩，但放大會(huì)失真.
矢量圖:由一條一條線條組成，每個(gè)線條有自己顏色和方向，可以無(wú)限縮放，但細(xì)節(jié)不夠豐富

canvas繪圖    svg繪圖

類型 2D位圖 2D矢量圖
如何繪制圖 使用JS代碼繪圖 使用標(biāo)簽繪圖
事件綁定 每個(gè)圖形不是一個(gè)元素，無(wú)法直接綁定事件. 每個(gè)圖形都是元素，可以直接綁定事件監(jiān)聽(tīng)
應(yīng)用場(chǎng)合 游戲,特效 地圖

SVG誕生于2000年，早期作為XML擴(kuò)展應(yīng)用出現(xiàn)，H5標(biāo)準(zhǔn)把常用
SVG標(biāo)簽采納為標(biāo)準(zhǔn)，但有些被廢棄.
svg使用方式
本身是一個(gè)300*150的inline-block
矩形
圓形
橢圓
直線
多邊形

  
  rx:水平半徑
  ry:垂直半徑

文本內(nèi)容

   
     
      
      
      
   
   
7.:html5新特性--地理定位(實(shí)現(xiàn)需要聯(lián)網(wǎng))
Geolocation:地理定位,使用js獲得當(dāng)前瀏覽器所在地理坐標(biāo)(經(jīng)度，緯度，海撥，速度)數(shù)據(jù)，用于實(shí)現(xiàn)LBS應(yīng)用(Location Base Service),如餓了么，高德導(dǎo)航...
  獲取地理定位類型
  (1)瀏覽器自帶對(duì)象geolocation[實(shí)現(xiàn)不了]
  (2)百度地圖,騰訊地圖[準(zhǔn)確度高]
手機(jī)瀏覽器如何獲取定位信息
(1)    首選手機(jī)中GPS芯片與衛(wèi)星通信，定位精度在米
(2)    次選手機(jī)通信基站進(jìn)行定位，定位精度在公里
  PC瀏覽器如何獲取定位信息
(3)     IP地理解析反向查找..
html5提供了一個(gè)新對(duì)象，用于獲取當(dāng)前瀏覽器定位信息
   window.navigator.geolocation{};
   getCurrentPosition:fn獲取定位
百度地圖:
   (1)百度地圖開(kāi)發(fā)者 http://lbsyun.baidu.com/
   (2)注冊(cè)百度開(kāi)發(fā)者帳戶 手機(jī)
   (3)創(chuàng)建一個(gè)網(wǎng)站:為網(wǎng)站申請(qǐng)?jiān)L問(wèn)密鑰  AccessKey
 網(wǎng)站名稱[abc123]
 [....]
(4) AccessKey
   (5)開(kāi)放示例
 //加載百度API指定密鑰
 
 var map = new BMap.Map("container");
// 創(chuàng)建地圖實(shí)例  
var point = new BMap.Point(116.404, 39.915);
// 創(chuàng)建點(diǎn)坐標(biāo)  
map.centerAndZoom(point, 15);
// 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
8:html5新特性—拖動(dòng)API（拖動(dòng)上傳圖片）
Drag & Drop :拖動(dòng)和釋入
   HTML5為拖動(dòng)行為提供7個(gè)事件，分為兩組
   拖動(dòng)的源動(dòng)(會(huì)動(dòng))可以觸發(fā)3個(gè)事件
   dragstart   拖動(dòng)開(kāi)始
   drag       拖動(dòng)中
   dragend    拖動(dòng)結(jié)束
   拖動(dòng)的目標(biāo)對(duì)象(不動(dòng))可以觸發(fā)4個(gè)事件
   dragenter  拖動(dòng)進(jìn)入
   dragover   拖動(dòng)懸停在上方
   dragleave  拖動(dòng)離開(kāi)
   drop      拖動(dòng)釋放
9:上傳文件---(重點(diǎn))
 上傳文件web項(xiàng)目通常使用功能:上傳頭像,郵件附件,上傳商品圖片,上傳docx文檔,喜瑪拉雅，斗魚(yú)...
 上傳文件類型：指定任意類型/指定特定類型(jpg/png/gif)
 上傳文件方式:
 (1)表單同步提交  --簡(jiǎn)單,用戶感受差
 (2)ajax上傳      --復(fù)雜,用戶感受好(拖動(dòng),預(yù)覽圖片)
 (3)第三方j(luò)s工具庫(kù)—剪切


10: Web Worker--代碼3行,重點(diǎn)理論理解
程序:一組代碼(硬盤)
進(jìn)程:操作系統(tǒng)將程序代碼調(diào)用(內(nèi)存中)準(zhǔn)備執(zhí)行
線程:進(jìn)程內(nèi)部執(zhí)行代碼序列

chrome 在線程模型:多個(gè)線程用于請(qǐng)求資源，運(yùn)算js代碼/渲染頁(yè)面內(nèi)容--1(UI)線程
按鈕1

按鈕2
解決方案:
   創(chuàng)建一個(gè)新的web Woker線程執(zhí)行1.js程序,讓UI繼續(xù)執(zhí)行繪制頁(yè)面內(nèi)容;
10.1: Woker線程有缺點(diǎn)
   瀏覽器不允行worker線程操作DOM、BOM元素
   原因:瀏覽器只允許UI線程操作DOM/BOM，也就是woker
   執(zhí)行的代碼中不能包含DOM操作/類似jquery也不行.
10.2:Worker線程可以發(fā)送或者接收UI線程數(shù)據(jù)
 *Woker發(fā)送數(shù)據(jù)-->UI接收數(shù)據(jù)
   1:worker
    postMessage(rs);
   2:UI
    var w2 = new Worker("01.js");
    w2.onmessage = function(e){e.data}
 *UI發(fā)送數(shù)據(jù)-->Worker接收數(shù)據(jù)
   1:UI
    var w2 = new Woker("01.js");
    w2.postMessage(stringMsg);
   2:Worker
    onmessage = function(e){e.data}

項(xiàng)目中使用Worker
   (1)只要js中有DOM/BOM不能使用Worker
(2)Worker適合于執(zhí)行耗時(shí)JS任務(wù),數(shù)據(jù)分析數(shù)據(jù)統(tǒng)計(jì)
11:HTML5新特性--WebStorage
 在瀏覽器中存儲(chǔ)當(dāng)用戶的專用數(shù)據(jù):訪問(wèn)歷史;定制樣式,
 在客戶端存儲(chǔ)數(shù)據(jù)技術(shù)
 (1)Cookie技術(shù)        兼容性好,數(shù)據(jù)不能超4kb,操作復(fù)雜
 (2)Flash                依賴Flash播放器
 (3)H5 WebStorage        兼容性差,數(shù)據(jù)8MB,操作簡(jiǎn)單
 (4)IndexedDB         可存儲(chǔ)大量數(shù)據(jù)，不是標(biāo)準(zhǔn)
 
Session:會(huì)話 (操作過(guò)程)
瀏覽器從打開(kāi)某一個(gè)網(wǎng)站第一個(gè)網(wǎng)頁(yè)開(kāi)始[會(huì)話開(kāi)始],中間可能打開(kāi)多個(gè)頁(yè)面[會(huì)話中]直到關(guān)閉瀏覽器[會(huì)話結(jié)束],整個(gè)過(guò)程稱為一次"會(huì)話"
WebStorage提供二個(gè)對(duì)象:
(1)sessionStorage:類數(shù)組對(duì)象
  在瀏覽器進(jìn)程序中分配一內(nèi)存,存儲(chǔ)一次web會(huì)話數(shù)據(jù),可供此次會(huì)話中所有頁(yè)面讀取或者保存，一旦瀏覽器關(guān)閉數(shù)據(jù)消失.
  示例:登錄用戶編號(hào);昵稱
  #保存數(shù)據(jù)
  sessionStorage[key]=val;
  sessionStorage.setItem(key,val);
  sessionStorage.length            //保存數(shù)量
  var key = sessionStorage.key(i);    //依據(jù)數(shù)值返回左側(cè)key
  #獲取數(shù)據(jù)
  var val = sessionStorage[key]
  var val = sessionStorage.getItem(key);
  #清除數(shù)據(jù)
  sessionStorage.removeItem(key);
  sessionStorage.clear();

(2)localStorage
 數(shù)據(jù)保存磁盤上，數(shù)據(jù)可以跨會(huì)話，即使瀏覽器關(guān)閉，數(shù)據(jù)也保存。
  #保存數(shù)據(jù)
  localStorage [key]=val;
  localStorage.setItem(key,val);
  localStorage.length            //保存數(shù)量
  var key = localStorage.key(i);    //依據(jù)數(shù)值返回左側(cè)key
  #獲取數(shù)據(jù)
  var val = localStorage [key]
  var val = localStorage.getItem(key);
  #清除數(shù)據(jù)
  localStorage.removeItem(key);
  localStorage.clear();
  
  #localStorage中若數(shù)據(jù)發(fā)生了修改，會(huì)觸發(fā)一次
  window.onstorage事件,可以監(jiān)聽(tīng)此事件，實(shí)現(xiàn)監(jiān)視
  localStorage數(shù)據(jù)改變目的,sessionStorage數(shù)據(jù)修改不會(huì)
  觸發(fā)此事件.

12:HTML5 新特性之一--WebSocket--代碼不復(fù)雜原理
HTTP協(xié)議:屬于"請(qǐng)求-響應(yīng)"模型，只有客戶端發(fā)起請(qǐng)求，服務(wù)器才會(huì)返回響應(yīng)消息，沒(méi)有請(qǐng)求就沒(méi)有響應(yīng),一個(gè)請(qǐng)示主體，只能得到一個(gè)響應(yīng)，
有一些場(chǎng)景，此種模型力不從心：實(shí)時(shí)股票走勢(shì)圖
 解決方案:長(zhǎng)輪詢(心跳請(qǐng)求)+AJAX --請(qǐng)求過(guò)于頻繁，服務(wù)器壓力大,不夠頻繁，客戶不滿意.
WebSocket協(xié)議: 屬于"廣播+接收", 客戶端連到服務(wù)器就不再斷開(kāi),
永久連接,雙方隨時(shí)向?qū)Ψ桨l(fā)送數(shù)據(jù),發(fā)送消息:ws協(xié)議適合于:實(shí)走股票走勢(shì)圖
   ws服務(wù)器:php/java/node.js 監(jiān)聽(tīng)指定端口,向?qū)Ψ桨l(fā)送消息也可以接收消息.
   ws客戶端:php/java/node.js/html5新特性 主動(dòng)發(fā)起連接請(qǐng)求，保持永久連接，向?qū)Ψ桨l(fā)送消息，并且接收消息.
掌握:使用HTML5新特性創(chuàng)建ws客戶端
  (1)連接ws服務(wù)器
var socket = new WebSocket("ws://127.0.0.1:9001");
(2)向服務(wù)器發(fā)送消息
socket.send(stringMsg);
(3)接收服務(wù)器返回消息
socket.onmessage = function(e){e.data}
(4)斷開(kāi)與服務(wù)器連接
socket.close();

小結(jié)端口:
  apache 默認(rèn)端口      80 
  mysql  默認(rèn)端口      3306
  https  默認(rèn)端口       443
  webSocket 默認(rèn)端口   9001