前端知識點總結——H5

前端知識點總結——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
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(進度條)

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

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

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

3.3: html5新特性—output

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

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

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

(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 當視頻暫停播放觸發事件

前端學習交流圈：767273102 ，裏面都是學習前端的從最基礎的HTML+CSS+JS炫酷特效，遊戲，插件封裝，設計模式到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裏面學習交流，每天都會有大牛定時講解前端技術!

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使用方式
本身是一個300*150的inline-block
矩形
圓形
橢圓
直線
多邊形

前端學習交流圈：767273102 ，裏面都是學習前端的從最基礎的HTML+CSS+JS炫酷特效，遊戲，插件封裝，設計模式到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裏面學習交流，每天都會有大牛定時講解前端技術!

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數據修改不會
  觸發此事件.
前端學習交流圈：767273102 ，裏面都是學習前端的從最基礎的HTML+CSS+JS炫酷特效，遊戲，插件封裝，設計模式到移動端HTML5的項目實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裏面學習交流，每天都會有大牛定時講解前端技術!

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