前端知識點總結——H5

1.html5新特性

(1)新的語義標籤 (2)增強型表單* (3)音訊和視訊 (4)Canvas繪圖 (5)SVG繪圖 (6)地理定位 (7)拖動API (8)Web Worker (9)Web Storage (10)Web Socket

2.增強型表單

1.新input type <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

3.html5新特性---datalist(資料列表)

<datalist id=”list3”>     datalist本身不可見
  <option>xxx</option>
  <option>yyy</option>
</datalist>
<input type=”text” list=”list3”/> 
datalist為input提供輸入建議列表

3.1: html5新特性---progress(進度條)

<progress></progress> 左右晃動進度條 <progress value=”0.5” /> 具有指定進度值進度條

3.2: html5新特性---meter(刻度尺)

Meter：用於標示一個值所值的範圍:不可接受(紅色),可以接受(黃色),非常優秀(綠) 薪水:  <meter min=”最小值” max=”最大值” low=”下限” high=”上限” 最佳值=”” value=”當前值”>

3.3: html5新特性---output

output:輸出，語義標籤,沒有任何外觀樣式，樣式等同於span 商品單價: 3.50 購買數量: <input type=”number” value=”1”> 小計:<output>7.00</output> web前端學習交流群：784783012 裡面可以與大神一起交流並走出迷茫。新手可免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行不停更新最新的教程和學習方法（詳細的前端專案實戰教學視訊），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入

3.4:html5新特性—(表單元素新屬性)

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

<form id=”f3”></form> <input type=”text” form=”f3” /> (5) required 必填空 (6) maxlength 字串最大長度 (7) minlength 字串最小長度 (8) min 指定數值最小值 (9) max 指定數值最大值 (10) pattern 指定輸入內容符合正則表示式

3.5 html5新特性--視訊與音訊 (重點)

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

3.6:H5新特性—視訊播放

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

它本身是一個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 當視訊暫停播放觸發事件

3.7:H5新特性—音訊

   <audio src=”x.mp3”></audio>
   <audio>
      <source src=”x.mp3” />
      <source src=”x.wav” />
   </audio>

它預設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 當視訊暫停播放觸發事件

3.8 html5 新特性—canvas繪圖 (重點)

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

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

3.9 html5 新特性—canvas

 Canvas畫布:畫布是H5提供的繪圖基礎
   <canvas width=”500” height=”400”>
      您的瀏覽器版本太低，請升級
   </canvas>

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); 測量文字寬度

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

4.1canvas繪製---(重點)影象

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); //拉伸圖片
}

4.2canvas繪製---(重點)影象->變形

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

5.svg繪製—(重點)

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

canvas繪圖 svg繪圖

型別 2D點陣圖 2D向量圖 如何繪製圖 使用JS程式碼繪圖 使用標籤繪圖 事件繫結 每個圖形不是一個元素，無法直接繫結事件. 每個圖形都是元素，可以直接繫結事件監聽 應用場合 遊戲,特效 地圖

SVG誕生於2000年，早期作為XML擴充套件應用出現，H5標準把常用 SVG標籤採納為標準，但有些被廢棄. svg使用方式 <svg></svg> 本身是一個300*150的inline-block <rect></rect> 矩形 <circle></circle> 圓形 <elipse></elipse> 橢圓 <line></line> 直線 <polyline></polyline>多邊形

6:HTML5新特性—矩形

<rect width=”” height=”” x=”” y=”” fill=”” fill-opacity=””
stroke=”” storke-opacity=””></rect>

6.1:HTML5新特性—圓形

<circle r=”” cx=”” cy=”” ></circle>

6.2:html5新技術--svg (重點)—橢圓

  <ecllipse  rx=”” ry=””  cx=”” cy=””  />
  rx:水平半徑
  ry:垂直半徑

6.3:html5新技術--svg (重點)—直線

<line x1=”” y1=”” x2=”” y2=”” stroke=”” stroke-width=””..></line>

6.4:html5新技術--svg (重點)—折線

<polyline points=”x,y x,y x,y ...” ></polyline>

6.5:html5新技術--svg (重點)—文字

<text text-size=”” fill=””...>文字內容</text>

6.6:html5新技術--svg (重點)—影象

<image xlink:href=”x.jpg” x y width height></image>

6.7:html5新技術--svg (重點)—漸變物件

   <defs>
     <linearGradient id=”r2” x1=”0%” y1=”0%” x2=”100%” y2=”0%”>
      <stop offset=”0%” stop-color=”green”>
      <stop offset=”50%” stop-color=”yellow”>
      <stop offset=”100%” stop-color=”red”>
   </defs>
   <rect width=”400” height=”200” fill=”url(#r2)”

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指定金鑰
 <script src="http://api.map.baidu.com/api?
 v=2.0&ak=申請金鑰">
 </script>
 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)執行緒
<button>按鈕1</button>
<script src="1.js"></script>
<button>按鈕2</button>

解決方案: 建立一個新的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新特性 主動發起連線請求，保持永久連線，向對方傳送訊息，並且接收訊息. web前端學習交流群：784783012 裡面可以與大神一起交流並走出迷茫。新手可免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行不停更新最新的教程和學習方法（詳細的前端專案實戰教學視訊），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入 掌握:使用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 web