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
效果圖:
![](https://img2020.cnblogs.com/blog/2016286/202006/2016286-20200620112032031-2000627388.png)
##HTML5視訊
直到現在,仍然不存在一項旨在網頁上顯示視訊的標準。
今天,大多數視訊是通過外掛(比如Flash)來顯示的。然而,並非所有瀏覽器都擁有同樣的外掛。
HTML5 規定了一種通過 video 元素來包含視訊的標準方法。
#最簡單的用法
//controls="controls"是自帶簡單的控制組件
#相容瀏覽器,運用標籤,嵌入多個視訊格式連結,瀏覽器只識別第一個可識別的格式
![](https://img2020.cnblogs.com/blog/2016286/202006/2016286-20200620112331559-1147290118.png)
##HTML5音訊
直到現在,仍然不存在一項旨在網頁上播放音訊的標準。
今天,大多數音訊是通過外掛(比如Flash)來播放的。然而,並非所有瀏覽器都擁有同樣的外掛。
HTML5 規定了一種通過 audio 元素來包含音訊的標準方法。
audio 元素能夠播放聲音檔案或者音訊流。
網頁不支援H5時顯示的內容
#相容瀏覽器,瀏覽器只識別第一個可播放的音訊檔案格式
Your browser does not support the audio tag.
![](https://img2020.cnblogs.com/blog/2016286/202006/2016286-20200620112344962-970879167.png)
先明確一個點:網頁中預設元素是不可拖動的,也是不可把其他元素放在另一個元素上面的,以下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)使用