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

(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：用于標示一個值所值的范圍:不可接受(紅色),可以接受(黃色),非常優秀(綠)
薪水:
最佳值=”” value=”當前值”>

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

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 是否循環播放
poster 在播放第一幀畫面之前廣告(圖片)
preload 視頻加載策略

auto: 預加載一定時長視頻和元數據

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

js對象屬性:

currentTime  當前播放時長
duration     總時長
paused:     當前視頻是否處理暫停狀態
volume（0~1）  音量

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

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

auto: 預加載一定時長視頻和元數據

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

js對象屬性

currentTime  當前播放時長
duration     總時長
paused:     當前視頻是否處理暫停狀態
volume（0~1）  音量

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

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

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

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

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);     清除矩形范圍內所有圖形

(2)使用canvas繪制文本

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

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 開始角度和結束角度
圓弧度 0~2*Math.PI
角度=>弧度 n*Math.PI/180=>弧度
ctx.stroke(); 描邊
ctx.fill(); 填充

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

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

canvas繪圖中有變形技術同，可以針對某一個圖形/圖像在繪制過程中進行變形:rotate();translate();平移原點
ctx.rotate(弧度); 旋轉繪制圖像以畫布原點為軸心.
ctx.translate(x,y); 將畫布原點平移到指定位置
ctx.save(); 保存畫筆當前所有狀態值
ctx.restore()); 恢復畫筆上一次保存時所有狀態值

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

canvas繪圖    svg繪圖

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

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

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

文本內容

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


10: Web Worker--代碼3行,重點理論理解
程序:一組代碼(硬盤)
進程:操作系統將程序代碼調用(內存中)準備執行
線程:進程內部執行代碼序列

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

按鈕2
解決方案:
   創建一個新的web Woker線程執行1.js程序,讓UI繼續執行繪制頁面內容;
10.1: Woker線程有缺點
   瀏覽器不允行worker線程操作DOM、BOM元素
   原因:瀏覽器只允許UI線程操作DOM/BOM，也就是woker
   執行的代碼中不能包含DOM操作/類似jquery也不行.
10.2:Worker線程可以發送或者接收UI線程數據
 *Woker發送數據-->UI接收數據
   1:worker
    postMessage(rs);
   2:UI
    var w2 = new Worker("01.js");
    w2.onmessage = function(e){e.data}
 *UI發送數據-->Worker接收數據
   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適合于執行耗時JS任務,數據分析數據統計
11:HTML5新特性--WebStorage
 在瀏覽器中存儲當用戶的專用數據:訪問歷史;定制樣式,
 在客戶端存儲數據技術
 (1)Cookie技術        兼容性好,數據不能超4kb,操作復雜
 (2)Flash                依賴Flash播放器
 (3)H5 WebStorage        兼容性差,數據8MB,操作簡單
 (4)IndexedDB         可存儲大量數據，不是標準
 
Session:會話 (操作過程)
瀏覽器從打開某一個網站第一個網頁開始[會話開始],中間可能打開多個頁面[會話中]直到關閉瀏覽器[會話結束],整個過程稱為一次"會話"
WebStorage提供二個對象:
(1)sessionStorage:類數組對象
  在瀏覽器進程序中分配一內存,存儲一次web會話數據,可供此次會話中所有頁面讀取或者保存，一旦瀏覽器關閉數據消失.
  示例:登錄用戶編號;昵稱
  #保存數據
  sessionStorage[key]=val;
  sessionStorage.setItem(key,val);
  sessionStorage.length            //保存數量
  var key = sessionStorage.key(i);    //依據數值返回左側key
  #獲取數據
  var val = sessionStorage[key]
  var val = sessionStorage.getItem(key);
  #清除數據
  sessionStorage.removeItem(key);
  sessionStorage.clear();

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

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

小結端口:
  apache 默認端口      80 
  mysql  默認端口      3306
  https  默認端口       443
  webSocket 默認端口   9001