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

(1)新的語義標簽
(2)增強型表單*
(3)音頻和視頻
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖動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提供輸入建議列表

左右晃動進度條
具有指定進度值進度條

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

output:輸出，語義標簽,沒有任何外觀樣式，樣式等同于span
商品單價: 3.50
購買數(shù)量:
小計:

7.00

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

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

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

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

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

js對象屬性:

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

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

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

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

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

js對象屬性

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

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

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

Canvas繪圖難點所在:
(1)坐標系
(2)單詞比較多

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

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

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

 矩形定位點在自己左上角
 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); 測量文本寬度

path:由多個坐標點組成任意形狀，路徑不可見，可用于
“描邊”,”填充”.
復(fù)雜圖形依靠路徑
ctx.beginPath(); 開始一條新路徑
ctx.closePath(); 閉合當(dāng)前路徑
ctx.moveTo(x,y); 移動到指定點
ctx.lineTo(x,y); 從當(dāng)前點到指定點畫直線
ctx.arc(cx,cy,r,start,end); 繪制圓拱型
cx,cy 圓心
r 半徑
start,end 開始角度和結(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ù)同，可以針對某一個圖形/圖像在繪制過程中進行變形:rotate();translate();平移原點
ctx.rotate(弧度); 旋轉(zhuǎn)繪制圖像以畫布原點為軸心.
ctx.translate(x,y); 將畫布原點平移到指定位置
ctx.save(); 保存畫筆當(dāng)前所有狀態(tài)值
ctx.restore()); 恢復(fù)畫筆上一次保存時所有狀態(tài)值

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

canvas繪圖    svg繪圖

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

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

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

文本內(nèi)容

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


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

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

按鈕2
解決方案:
   創(chuàng)建一個新的web Woker線程執(zhí)行1.js程序,讓UI繼續(xù)執(zhí)行繪制頁面內(nèi)容;
10.1: Woker線程有缺點
   瀏覽器不允行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}

項目中使用Worker
   (1)只要js中有DOM/BOM不能使用Worker
(2)Worker適合于執(zhí)行耗時JS任務(wù),數(shù)據(jù)分析數(shù)據(jù)統(tǒng)計
11:HTML5新特性--WebStorage
 在瀏覽器中存儲當(dāng)用戶的專用數(shù)據(jù):訪問歷史;定制樣式,
 在客戶端存儲數(shù)據(jù)技術(shù)
 (1)Cookie技術(shù)        兼容性好,數(shù)據(jù)不能超4kb,操作復(fù)雜
 (2)Flash                依賴Flash播放器
 (3)H5 WebStorage        兼容性差,數(shù)據(jù)8MB,操作簡單
 (4)IndexedDB         可存儲大量數(shù)據(jù)，不是標準
 
Session:會話 (操作過程)
瀏覽器從打開某一個網(wǎng)站第一個網(wǎng)頁開始[會話開始],中間可能打開多個頁面[會話中]直到關(guān)閉瀏覽器[會話結(jié)束],整個過程稱為一次"會話"
WebStorage提供二個對象:
(1)sessionStorage:類數(shù)組對象
  在瀏覽器進程序中分配一內(nèi)存,存儲一次web會話數(shù)據(jù),可供此次會話中所有頁面讀取或者保存，一旦瀏覽器關(guān)閉數(shù)據(jù)消失.
  示例:登錄用戶編號;昵稱
  #保存數(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ù)可以跨會話，即使瀏覽器關(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ā)生了修改，會觸發(fā)一次
  window.onstorage事件,可以監(jiān)聽此事件，實現(xiàn)監(jiān)視
  localStorage數(shù)據(jù)改變目的,sessionStorage數(shù)據(jù)修改不會
  觸發(fā)此事件.

12:HTML5 新特性之一--WebSocket--代碼不復(fù)雜原理
HTTP協(xié)議:屬于"請求-響應(yīng)"模型，只有客戶端發(fā)起請求，服務(wù)器才會返回響應(yīng)消息，沒有請求就沒有響應(yīng),一個請示主體，只能得到一個響應(yīng)，
有一些場景，此種模型力不從心：實時股票走勢圖
 解決方案:長輪詢(心跳請求)+AJAX --請求過于頻繁，服務(wù)器壓力大,不夠頻繁，客戶不滿意.
WebSocket協(xié)議: 屬于"廣播+接收", 客戶端連到服務(wù)器就不再斷開,
永久連接,雙方隨時向?qū)Ψ桨l(fā)送數(shù)據(jù),發(fā)送消息:ws協(xié)議適合于:實走股票走勢圖
   ws服務(wù)器:php/java/node.js 監(jiān)聽指定端口,向?qū)Ψ桨l(fā)送消息也可以接收消息.
   ws客戶端:php/java/node.js/html5新特性 主動發(fā)起連接請求，保持永久連接，向?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)斷開與服務(wù)器連接
socket.close();

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