HTML5知識點總結

AiYadc發表於2020-06-20
HTML

HTML5知識點彙總

HTML5 中的一些有趣的新特性

用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線儲存的更好的支援
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控制元件，比如 calendar（日曆）、date（日期）、time（時間格式）、email（郵件）、url（連結）、search（搜尋）,可以方便使用者填寫或者方便格式驗證。

表單控制元件舉例

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);

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();                                       ////向網頁重新整理輸出資料
?>

相關文章