HTML5知識點匯總
HTML5 中的一些有趣的新特性
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar（日曆）、date（日期）、time（時間格式）、email（郵件）、url（鏈接）、search（搜尋）,可以方便用戶填寫或者方便格式驗證。
目錄：
- 新增內容元素解釋及表單控件舉例
- 視頻
- 音頻
- 拖放
- 畫布
- SVG
- 地理定位
- Web存儲
- 應用緩存
- Web Workers
- 服務器發送事件
PS以下內容只是基於個人對HTML5的大致理解，做個筆記，若有錯誤，請不要吝嗇指出哈，詳情可以查看 https://www.w3school.com.cn/html5/index.asp
表單控件舉例
1、date
<input type="date" >
效果圖：
HTML5視頻
直到現在，仍然不存在一項旨在網頁上显示視頻的標準。
今天，大多數視頻是通過插件（比如Flash）來显示的。然而，並非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
#最簡單的用法
<video src="movie.ogg" controls="controls">不支持H5時显示的內容</video> //controls="controls"是自帶簡單的控制組件
#兼容瀏覽器，運用<source>標籤，嵌入多個視頻格式鏈接，瀏覽器只識別第一個可識別的格式
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML5音頻
直到現在，仍然不存在一項旨在網頁上播放音頻的標準。
今天，大多數音頻是通過插件（比如Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的插件。
HTML5 規定了一種通過 audio 元素來包含音頻的標準方法。
audio 元素能夠播放聲音文件或者音頻流。
<audio src="song.ogg" controls="controls">網頁不支持H5時显示的內容</audio>
#兼容瀏覽器，瀏覽器只識別第一個可播放的音頻文件格式
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
先明確一個點：網頁中默認元素是不可拖動的，也是不可把其他元素放在另一個元素上面的,以下ev為DOM傳遞的參數event，以下為拖動步驟：
1、拖放的元素
（1）設置元素可拉動—— draggable=”true”，如
<img draggable="true" />
（2）元素被拖動時保存數據——ondragstart=”ev.dataTransfer.setData(“變量名”,ev.target.id)”
2、放的地方
（1）其他元素懸空至本元素時，設置本元素可放置其他元素，這樣才可以將其放進去——ev.preventDefault();
##設置要被放置元素的標籤的事件ondragover="allowDrop(event)"
function allowDrop(ev)
{
ev.preventDefault();
}
（2）放下被拖動的元素時，再次設置本元素可放置其他元素，並獲取元素，將元素添加為本元素的子元素（本質）
<!- 相對應的放置其他元素的容器設置，ondrop為放下時，ondragover是有其他元素懸空至本元素時->
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
畫布
介紹：畫布就是利用javascript在網頁上繪製圖像的一種元素，畫布是一塊舉行區域，我們可以控制它的每一個像素
使用（三步走）：
1、創建Canvas元素：eg：
<canvas id="myCanvas" width="200" height="100"></canvas>
2、獲取canvas元素，創建context對象：eg:
var c=document.getElementById("myCanvas");
3、繪製，eg:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
SVG
定義
- SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
- SVG 用於定義用於網絡的基於矢量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
- SVG 是萬維網聯盟的標準
總結：內容為純粹的XML格式，可無線放大拉伸像素不變，尺寸比jpeg、gif等小，圖像中有文本還可以被搜索到（適合做地圖等）。
競爭對手：Flash，SVG優勢：與其他標準（比如 XSL 和 DOM）相兼容，而 Flash 則是未開源的私有技術
使用方法:
(1)使用標籤引入
(2)使用標籤引入
(3)使用 iframe 標籤引入
(4)直接在HTML嵌入SVG代碼
在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代碼。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
(5)直接使用鏈接嵌入
<a href="circle1.svg">View SVG file</a>
地理定位
HTML5 Geolocation API 用於獲得用戶的地理位置。
用法：
主要使用navigator.geolocation對象來獲取地理位置信息，它主要有getCurrentPosition()，watchPosition()，clearWatch()三個方法
（1）getCurrentPosition
（2）watchPosition
返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。
（3）clearWatch(),停止 watchPosition() 方法
例子：
//例子關鍵代碼：返回用戶位置的經度和緯度
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}}
效果：
Web 存儲
瀏覽器中的數據本來是由 cookie 完成的。但是 cookie不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據
HTML5 使用 JavaScript 來存儲和訪問數據。
介紹
1、localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之後，數據依然可用。
2、sessionStorage方法用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅、是會話級別的存儲。只允許同一窗口訪問。 （同一個頁面才可以訪問存儲的元素，刷新也可以繼續訪問，但是關閉頁面重新打開，數據就不見了）
使用
1、先判斷（瀏覽器是否支持）——if(typeof(Storage)!==”undefine”){若支持執行的代碼段}else{不支持執行代碼段}
2、localStorage的增刪改查
增：localStorage.setItem(“propName”,”value”)
刪：localStorage.removeItem(‘propName’)
改：localStotage.propNmae=newValue
查：localStorage.getItem(propName)
3、sessionStorage的增刪改查
增：sessionStorage.setItem(“propName”,”value”)
刪：sessionStorage.removeItem(‘propName’)
改：sessionStotage.propNmae=newValue
查：sessionStorage.getItem(propName)
例子（localstorage,session同下）：
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Gates");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "抱歉！您的瀏覽器不支持 Web Storage ...";
}
</script>
</body>
sessionStorage 、localStorage和cookei的區別：
應用場景
因為考慮到每個 HTTP 請求都會帶着 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~
而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5遊戲通常會產生一些本地數據，localStorage 也是非常適用的。如果遇到一些內容特別多的表單，為了優化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然後按步驟引導用戶填寫。這時候 sessionStorage 的作用就發揮出來了。
應用緩存——Application Cache
HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
離線瀏覽 – 用戶可在應用離線時使用它們
速度 – 已緩存資源加載得更快
減少服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。
使用：
1、manifest文件配置：
manifest 文件可分為三個部分：
CACHE MANIFEST（必須）- 在此標題下列出的文件將在首次下載後進行緩存
NETWORK – 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK – 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
例子：
CACHE MANIFEST
# 2012-02-21 v1.0.0 //註釋行，在服務器中更改一個函數或者一幅圖片，此文件都不會被修改，但更新此備註卻可以更新緩存文件的方法
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html5/ /404.html
PS:瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
##以下為html文件中的使用直接在html標籤中將其引入
<html manifest="demo.appcache"> //直接在html文件中引入appcache文件
web Workers
介紹：運行在後台的一個js腳本，獨立於其他腳本，不影響頁面性能
使用：
0、創建一個需要用於後台運行的js文本文件——需要一個postMessage(data) //向某個頁面傳達信息
1、先判斷瀏覽器是否支持：if(typeof(Worker)!==”undefined”)
2、創建new Worker(‘js文本路徑’)
3、使用onmessage監聽是否有消息傳來，所有則接收js傳來的信息，並加以處理運用
4、終止Web Worker 終止 web worker，並釋放瀏覽器/計算機資源，請使用 terminate() 方法 //終止后需刷新頁面才可重新使用
例子：
創建計數腳本，該腳本存儲於 “demo_workers.js” 文件中：
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
以下是html文件：
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />
<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="Sorry, your browser
does not support Web Workers...";
}
}
function stopWorker()
{
w.terminate();
}
</script>
</body>
</html>
效果圖：
補充：
onOpen :當通往服務器的連接被打開
onMessage：當接收到消息
onerror :當錯誤發生
注意：
1、web worker 通常不用於如此簡單的腳本，而是用於更耗費 CPU 資源的任務。
2、由於 web worker 位於外部文件中，它們無法訪問下例 JavaScript 對象：
window 對象
document 對象
parent 對象
服務器發送事件：
介紹：Server-Sent 事件 – 單向消息傳遞
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。
例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。
使用： 判、創、監聽、使用。
html文件：
if(typeof(EventSource)!=="undefined"){ //判
var source=new EventSource("demo_sse.php"); //創
source.onmessage=function(event) //監聽
{
document.getElementById("result").innerHTML+=event.data + "<br />"; //使用
};
else
{
document.getElementById("result").innerHTML="抱歉，您的瀏覽器不支持 server-sent 事件 ...";
}
demo_sse.php文件
<?php
header('Content-Type: text/event-stream'); //把報頭 "Content-Type" 設置為 "text/event-stream"
header('Cache-Control: no-cache'); //規定不對頁面進行緩存
$time = date('r');
echo "data: The server time is: {$time}\n\n"; //輸出發送日期（始終以 "data: " 開頭）
flush(); ////向網頁刷新輸出數據
?>
posted on
2020-06-20 11:34 哎呀呀大池 閱讀(
…) 評論(
…) 編輯 收藏
刷新評論 刷新頁面 返回頂部
Powered by: 博客園 Copyright © 2020 哎呀呀大池
Powered by .NET Core on Kubernetes
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※別再煩惱如何寫文案,掌握八大原則!
※教你寫出一流的銷售文案?
※超省錢租車方案
※FB行銷專家,教你從零開始的技巧
