目錄
前言
1.語意化標簽
2.form表單增強
3.視頻和音頻
4.Canvas繪圖
5.SVG繪圖
6.地理位置定位（Geolocation API ）
7.拖放API
8.Web Worker
9.Web Storage
10.Web Socket
總結
前言
本期為大家總結面試時常被問到的一個問題，那就是H5新特新有哪些，目前H5的新特性在實際作業中也經常會用到，本章主要總結為主，因此沒有深入記錄，若想深入了解，還需單獨研究哦~
1.語意化標簽
HTML5新增的語意化標簽主要有：
<article>、<section>、<nav>、<aside>、<header>、<footer>、<time>等等...
2.Form表單增強
- Input的type新屬性：number、data、month、week、time、email、url等；
- Input標簽新增加的特有屬性
代碼：
<input type="number" name="demoNumber" min="1" max="100" step="2"/>
<input type="email" name="email" placeholder="請輸入注冊郵箱" />
<input type="url" placeholder="請輸入網址" name="url" />
<input type="tel" placeholder="輸入電話" name="phone"/>
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
<input type="date" name="datedemo" />
<input type="color"/>
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />Input標簽新增加的特有屬性
<input type="text" autofocus="autofocus"/>
1）autofocus屬性 此屬性可以設定當前頁面中input標簽加載完畢后獲得焦點，
2）max,min,step這些上面都是跟數字相關，
3）placeholder:提示資訊屬性，上面有demo，
4）multiple：用于檔案上傳控制元件，設定此屬性后，允許上傳多個檔案，
3.視頻和音頻標簽
代碼如下：
<!-- 視頻標簽 -->
<video src="url" controls="controls"></video> //src 視頻URL controls 展示控制元件，如播放按鈕
<!-- 音頻標簽 -->
<audio src="url" loop="loop" muted="muted"></audio> //src 音頻URL loop 音頻結束時重新播放 muted 靜音播放4.Canvas繪圖
HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制影像，畫布是一個矩形區域，可以控制其每一像素，canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加影像的方法，
案例代碼：
<html>
<canvas id="myCanvas" width="200" height="100"></canvas>
</html><script>
var c=document.getElementById("myCanvas"); //使用 id 來尋找 canvas 元素
var cxt=c.getContext("2d"); //getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪制路徑、矩形、圓形、字符以及添加影像的方法，
cxt.fillStyle="#FF0000"; //fillStyle 方法將其染成紅色，
cxt.fillRect(0,0,150,75); //fillRect 方法規定了形狀、位置和尺寸，
</script>效果：
5.SVG繪圖
SVG（Scalable Vector Graphics）是用來繪制矢量圖的HTML5標簽，只要定義好XML屬性就能夠獲得與其一致的影像元素，
使用SVG之前先將標簽加入到HTML body中，就像其他的HTML標簽一樣，你可以為SVG標簽為之添加ID屬性，也可以為之添加css樣式，例如“border-style:solid;border-width:2px;”，SVG標簽跟其它的HTML標簽有通用的屬性，你可以用height="100px" width="200px" 為其添加高度和寬度，
案例代碼：
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!-- 指定x1,y1,x2,y2值來代表起點終點坐標，在style屬性中使用“stroke:Green;”為線條指定顏色，用stroke-width:2為線條設定寬度 -->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
<!-- 圓的中心cx="55" cy="55"，半徑r="50"，fill="#219E3E"填充顏色，stroke="#17301D" stroke-width="2"線條顏色與寬度 -->
<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>效果：
6.地理位置定位（Geolocation API ）
地理位置（Geolocation）是HTML5 的重要特性之一，提供了確定用戶位置的功能，借助這個特性能夠開發基于位置資訊的應用，使得開發人員不用借助其他軟體就能輕松實作位置查找，地圖應用，導航等功能，具有劃時代的意義，
我們使用getCurrentPosition(success(position),error(err),options)方法來獲取當前用戶的地理位置
success(position)回呼函式是在獲取到地理資訊時呼叫的，其中的position引數是一個物件包括:
latitude(緯度)
longitude(經度)
altitude(海拔高度)
accuracy(緯度和經度的精度，以米為單位)
latitudeAccuracy(海拔高度的精度，以米為單位)
heading(設備的前進方向),speed(設備的前進速度以單位m/s)
timestamp(獲取位置的時間)，
error(err)回電函式是在獲取地理位置失敗時呼叫的，其中err引數有倆個屬性：
code和message，code{1:表示用戶拒絕了定位服務,2:獲取不到位置資訊,3:獲取資訊超時錯誤}，message是字串，表示錯誤資訊，
opations是一些可選屬性的串列包括:
enableHighAccuracy(是否要求高精度的地理位置資訊),值為true或false，
timeout(對地理資訊獲取操作做一個超時限制，如果超時，則回傳錯誤)，值為數字，單位為毫秒，
maximumAge(對地理位置資訊進行快取的有效時間做一個限制)，值為數字，單位為毫秒，直接上代碼......
<script>
//判斷瀏覽器是否支持Geolocation API
if ('geolocation' in navigator) {
//呼叫navigator.geolocation.getCurrentPosition
navigator.geolocation.getCurrentPosition(successCB, errorCB,{
// 指示瀏覽器獲取高精度的位置，默認為false
enableHighAccuracy: true,
// 指定獲取地理位置的超時時間，默認不限時，單位為毫秒
timeout: 5000,
// 最長有效期，在重復獲取地理位置時，此引數指定多久再次獲取位置，
maximumAge: 3000
})
} else {
alert('不支持geolocation')
}
//成功時的回呼函式
function successCB(res) {
console.log('維度' + res.coords.latitude); //維度39.8218870257394
console.log('經度' + res.coords.longitude); //經度116.28083042845932
}
//失敗時的回呼函式
function errorCB(res) {
console.log(res)
}
</script>7.拖放API
HTML5 為拖放行為提供了Drag & Drop API，Drag代表拖動，Drop代表放下，主要事件如下，在使用時系結相應的事件即可，
//事件型別
/*
//被拖動物件可以出發的事件
dragstart:拖動開始事件，(拖拽開始）
drag:從dragstart開始到dragend結束前，在拖動時不斷出現，（拖拽事件）
dragend:拖動結束事件，（拖拽結束）
//拖動到的目標物件可以觸發的事件
dragenter:拖到當前元素區域內的事件，（拖拽進入）
dragover:拖到當前元素的區域事件，該事件在拖動到程序中不斷的觸發，（懸浮事件）
dragleave：拖出當前元素區域事件，（拖拽離開）
drop:當前元素區域停止拖拽的事件，ps:drop往往發生在dropend事件前（丟棄事件）
*/注意：當使用丟棄事件(drop)時，需要在dragover中呼叫e.preventDefault()；才能觸發drop ，
8.Web Worker
web worker 是運行在后臺的 JavaScript，獨立于其他腳本，不會影響頁面的性能，您可以繼續做任何愿意做的事情：點擊、選取內容等等，而此時 web worker 在后臺運行，
主執行緒可以用new Worker("worker.js")的方式創建子執行緒；同時通過worker.onmessage = e => {console.log(e.data)}的方式監聽子執行緒傳回的值；子執行緒有一個全域變數self，相當于window，通過self.postMessage(result)的方式將資訊傳送到主執行緒
案例代碼：
worker.js檔案
//worker.js
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();worker.html檔案，在這個檔案檔案中使用Web Worker 模擬創建一個新的執行緒
<html>
<p>計數： <output id="result"></output></p>
<button onclick="startWorker()">開始作業</button>
<button onclick="stopWorker()">停止作業</button>
</html><script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("./demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的瀏覽器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>【溫馨提示】Chrome瀏覽器不允許通過本地加載web worker，可以把檔案部署到服務器上再通過瀏覽器訪問，或者換個瀏覽器試試，網上說Microsoft Edge可以，但我測驗時還是不行，最終在IE下測驗通過了，
9.Web Storage
Web Storage提供了兩種API：sessionStorage（會話存盤）和locaStorage（永久存盤）
- 存盤大小一般都是5MB
- 存盤位置：都保存在客戶端，不與服務器進行互動通信
- 存盤內容型別：locaStorage和sessionStorage都只能存盤字串型別，對于復雜的物件可以使用JSON物件的stringify和parse來處理，
- sessionStorage當瀏覽器頁面關閉時，資料消失，
- 和locaStorage資料永久保存在客戶端本地，即使頁面關閉資料也不會消失，下次打開可以繼續使用，
10.Web Socket
WebSocket協議本質上是一個基于TCP的協議，WebSocket使得客戶端和服務器之間的資料交換變得更加簡單，當獲取WebSocket連接之后，可以通過send()方法來向服務器發送資料，通過onmessage事件來接受服務器回傳的資料，
總結
本章記錄了H5新的一些比較常用的特性，有些內容沒有深入記錄，累了，累了，后續有時間會單獨進行記錄，盡情期待呦...
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/298917.html
標籤：其他
上一篇：60秒 Linux Nginx 騰訊云Https配置部署
下一篇：LNMP架構3——php