前端知識點總結——H5

楷楷發表於2019-02-16

前端知識點總結——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>

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）  音量

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~2*Math.PI
角度=>弧度 n*Math.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新特性主動發起連線請求，保持永久連線，向對方傳送訊息，並且接收訊息.

掌握:使用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

前端知識點總結——Vue
2019-03-19
前端Vue
前端知識點總結——HTML
2019-06-18
前端HTML
前端知識點總結——DOM
2019-06-18
前端
前端知識點總結——C3
2019-02-16
前端
前端知識點總結——JavaScript基礎
2019-06-20
前端JavaScript
前端知識點總結—面試專用
2019-02-16
前端面試
web前端javascript+jquery知識點總結
2020-02-17
Web前端JavaScriptjQuery
知識點總結
2018-05-28
「移動端」前端常見知識點總結
2021-08-27
前端
前端小知識點彙總
2019-04-10
前端
Java 知識點總結
2019-03-19
Java
django知識點總結
2019-01-28
Django
iOS 知識點總結
2018-04-27
iOS
MongoDB知識點總結
2020-06-09
MongoDB
HDFS知識點總結
2020-06-08
HBase知識點總結
2021-11-23
jQuery 知識點總結
2021-09-09
jQuery
Kafka知識點總結
2021-11-16
Kafka
Tomcat 知識點總結
2020-12-10
Tomcat
MySQL知識點總結
2020-12-11
MySql
移動前端知識總結
2019-02-16
前端
Vue.js中前端知識點總結筆記
2018-05-21
Vue.js前端筆記
知識點漏缺總結
2019-04-03
事務知識點總結
2019-10-25
HBase知識點集中總結
2020-06-03
docker常用知識點總結
2024-11-06
Docker
mysql 常用知識點總結
2024-09-16
MySql
（5）FIFO知識點總結
2024-06-08
HTML-知識點總結
2022-06-19
HTML
RabbitMQ 常用知識點總結
2021-07-12
MQ
MySQL 索引知識點總結
2020-12-15
MySql索引
前端知識點總結——JS高階（持續更新中）
2019-02-16
前端JS
跨域知識點部分總結
2019-03-01
跨域
Java基礎知識點總結
2018-10-20
Java
java面試知識點總結
2019-03-04
Java面試
總結的小知識點（一）
2018-12-10
筆試題知識點總結
2019-04-11
筆試
瀏覽器知識點總結
2018-05-04
瀏覽器

前端知識點總結——H5

前端知識點總結——H5

1.html5新特性

2.增強型表單

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

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

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

3.3: html5新特性—output

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

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

3.6:H5新特性—視訊播放

3.7:H5新特性—音訊

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

3.9 html5 新特性—canvas

4.canvas繪製—(重點)路徑

4.1canvas繪製—(重點)影像

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

5.svg繪製—(重點)

6:HTML5新特性—矩形

6.1:HTML5新特性—圓形

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

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

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

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

6.6:html5新技術–svg (重點)—影像

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

7.:html5新特性–地理定位(實現需要聯網)

8:html5新特性—拖動API（拖動上傳圖片）

9:上傳檔案—(重點)

10: Web Worker–程式碼3行,重點理論理解

11:HTML5新特性–WebStorage

12:HTML5 新特性之一–WebSocket–程式碼不復雜原理

相關文章