HTML5 知識一覽，10分鐘搞定它
阿新 • • 發佈：2020-06-20
#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
效果圖：
##HTML5視訊
直到現在，仍然不存在一項旨在網頁上顯示視訊的標準。
今天，大多數視訊是通過外掛（比如Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的外掛。
HTML5 規定了一種通過 video 元素來包含視訊的標準方法。
#最簡單的用法
//controls="controls"是自帶簡單的控制組件
#相容瀏覽器，運用標籤，嵌入多個視訊格式連結，瀏覽器只識別第一個可識別的格式
##HTML5音訊
直到現在，仍然不存在一項旨在網頁上播放音訊的標準。
今天，大多數音訊是通過外掛（比如Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的外掛。
HTML5 規定了一種通過 audio 元素來包含音訊的標準方法。
audio 元素能夠播放聲音檔案或者音訊流。
網頁不支援H5時顯示的內容
#相容瀏覽器，瀏覽器只識別第一個可播放的音訊檔案格式
Your browser does not support the audio tag.
先明確一個點：網頁中預設元素是不可拖動的，也是不可把其他元素放在另一個元素上面的,以下ev為DOM傳遞的引數event，以下為拖動步驟：
1、拖放的元素
（1）設定元素可拉動—— draggable="true"，如
![]()
（2）元素被拖動時儲存資料——ondragstart="ev.dataTransfer.setData("變數名",ev.target.id)"
2、放的地方
（1）其他元素懸空至本元素時，設定本元素可放置其他元素，這樣才可以將其放進去——ev.preventDefault();
##設定要被放置元素的標籤的事件ondragover="allowDrop(event)"
function allowDrop(ev)
{
ev.preventDefault();
}
（2）放下被拖動的元素時，再次設定本元素可放置其他元素，並獲取元素，**將元素新增為本元素的子元素（本質）**
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
##畫布
介紹：畫布就是利用javascript在網頁上繪製圖像的一種元素，畫布是一塊舉行區域，我們可以控制它的每一個畫素
使用（三步走）：
1、建立Canvas元素：eg：
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)使用標籤引入
- 優勢：所有主要瀏覽器都支援，並允許使用指令碼
- 缺點：不推薦在HTML4和XHTML中使用（但在HTML5允許）
(2)使用