2021.6.9模擬賽
html5總的來說比html4多了十個新特性，但其不支援ie8及ie8以下版本的瀏覽器
一、語義標籤
二、增強型表單
三、視訊和音訊
四、Canvas繪圖
五、SVG繪圖
六、地理定位
七、拖放API
八、WebWorker
九、WebStorage
十、WebSocket
一、語義標籤
html5語義標籤，可以使開發者更方便清晰構建頁面的佈局
| 標籤 | 描述 |
| <header> | 定義了文件的頭部區域 |
| <footer> | 定義了文件的尾部區域 |
| <nav> | 定義文件的導航 |
| <section> | 定義文件中的節 |
| <article> | 定義文章 |
| <aside> | 定義頁面以外的內容 |
| <details> | 定義使用者可以看到或者隱藏的額外細節 |
| <summary> | 標籤包含details元素的標題 |
| <dialog> | 定義對話方塊 |
| <figure> | 定義自包含內容，如圖表 |
| <main> | 定義文件主內容 |
| <mark> | 定義文件的主內容 |
| <time> | 定義日期/時間 |
二、增強型表單
html5修改一些新的input輸入特性，改善更好的輸入控制和驗證
| 輸入型別 | 描述 |
| color | 主要用於選取顏色 |
| date | 選取日期 |
| datetime | 選取日期(UTC時間) |
| datetime-local | 選取日期（無時區） |
| month | 選擇一個月份 |
| week | 選擇周和年 |
| time | 選擇一個時間 |
| 包含e-mail地址的輸入域 | |
| number | 數值的輸入域 |
| url | url地址的輸入域 |
| tel | 定義輸入電話號碼和欄位 |
| search | 用於搜尋域 |
| range | 一個範圍內數字值的輸入域 |
html5新增了五個表單元素
| <datalist> | 使用者會在他們輸入資料時看到域定義選項的下拉列表 |
| <progress> | 進度條，展示連線/下載進度 |
| <meter> | 刻度值，用於某些計量，例如溫度、重量等 |
| <keygen> |
提供一種驗證使用者的可靠方法 生成一個公鑰和私鑰 |
| <output> |
用於不同型別的輸出 比如尖酸或指令碼輸出 |
html5新增表單屬性
| 屬性 | 描述 |
| placehoder | 輸入框預設提示文字 |
| required | 要求輸入的內容是否可為空 |
| pattern | 描述一個正則表示式驗證輸入的值 |
| min/max | 設定元素最小/最大值 |
| step | 為輸入域規定合法的數字間隔 |
| height/wdith | 用於image型別<input>標籤影象高度/寬度 |
| autofocus | 規定在頁面載入時，域自動獲得焦點 |
| multiple | 規定<input>元素中可選擇多個值 |
三、音訊和視訊
html5提供了音訊和視訊檔案的標準，既使用<audio>元素。
音訊：<audio src=" "></audio>
<audio controls> //controls屬性提供新增播放、暫停和音量控制元件。 <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支援 audio 元素。 //瀏覽器不支援時顯示文字 </audio>
視訊：<video src=" "></video>
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的瀏覽器不支援Video標籤。 </video>
四、Canvas繪圖
https://www.runoob.com/w3cnote/html5-canvas-intro.html
五、SVG繪圖
什麼是SVG?
SVG指可伸縮向量圖形
SVG用於定義用於網路的基於向量的圖形
SVG使用XML格式定義圖形
SVG影象在放大或改變尺寸的情況下其圖形質量不會有損失
SVG是全球資訊網聯盟的標準
SVG的優勢
與其他影象格式相比，是喲個SVG的優勢在於：
SVG影象可通過文字編譯器來建立和修改
SVG影象可被搜尋、索引、指令碼化或壓縮
SVG是可伸縮的
SVG影象可在任何的解析度下被高質量的列印
SVG可在影象質量不下降的情況下被放大
SVG與Canvas區別
*SVG適用於描述XML中的2D圖形的語言
*Canvas隨時隨地繪製2D圖形（使用javaScript）
*SVG是基於XML的，意味這可以操作DOM，渲染速度較慢
*在SVG中每個形狀都被當做是一個物件，如果SVG發生改變，頁面就會發生重繪
*Canvas是一畫素一畫素地渲染，如果改變某一個位置，整個畫布會重繪。
| Canvas | SVG |
| 依賴解析度 | 不依賴解析度 |
| 不支援事件處理器 | 支援事件處理器 |
| 能夠以.png或.jpg格式儲存結果影象 | 複雜度會減慢搞渲染速度 |
| 文字呈現功能比較簡單 | 適合大型渲染區域的應用程式 |
| 最合適影象密集的遊戲 | 不適合遊戲應用 |
六、地理定位
使用getCurrentPosition()方法來獲取使用者的位置。以實現“LBS服務”
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>
七、拖放API
拖放是一種常見的特性，即捉取物件以後拖到另一個位置。
在html5中，拖放是標準的一部分，任何元素都能夠拖放。
<div draggable="true"></div>
當元素拖動時，我們可以檢查其拖動的資料。
<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
console.log(ev);
}
</script>
| 拖動生命週期 | 屬性名 | 描述 |
| 拖動開始 | ondragstart | 在拖動操作開始時執行指令碼 |
| 拖動過程中 | ondrag | 只要指令碼在被拖動就執行指令碼 |
| 拖動過程中 | ondragenter | 當元素被拖動到一個合法的防止目標時，執行指令碼 |
| 拖動過程中 | ondragover | 只要元素正在合法的防止目標上拖動時，就執行指令碼 |
| 拖動過程中 | ondragleave | 當元素離開合法的防止目標時 |
| 拖動結束 | ondrop | 將被拖動元素放在目標元素內時執行指令碼 |
| 拖動結束 | ondragend | 在拖動操作結束時執行指令碼 |
八、Web Worker
Web Worker可以通過載入一個指令碼檔案，進而建立一個獨立工作的執行緒，在主執行緒之外執行。
基本使用：
Web Worker的基本原理就是在當前javascript的主執行緒中，使用Worker類載入一個javascript檔案來開闢一個新的執行緒，
起到互不阻塞執行的效果，並且提供主執行緒和新縣城之間資料交換的介面：postMessage、onmessage。
javascript:
//worker.js
onmessage =function (evt){
var d = evt.data;//通過evt.data獲得傳送來的資料
postMessage( d );//將獲取到的資料傳送會主執行緒
}
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB頁主執行緒
var worker =new Worker("worker.js"); //建立一個Worker物件並向它傳遞將在新執行緒中執行的指令碼的URL
worker.postMessage("hello world"); //向worker傳送資料
worker.onmessage =function(evt){ //接收worker傳過來的資料函式
console.log(evt.data); //輸出worker傳送來的資料
}
</script>
</head>
<body></body>
</html>
九、Web Storage
WebStorage是HTML新增的本地儲存解決方案之一，但並不是取代cookie而指定的標準，cookie作為HTTP協議的一部分用來處理客戶端和伺服器的通訊是不可或缺的，session正式依賴與實現的客戶端狀態保持。WebSorage的意圖在於解決本來不應該cookie做，卻不得不用cookie的本地儲存。
websorage擁有5M的儲存容量，而cookie卻只有4K，這是完全不能比的。
客戶端儲存資料有兩個物件，其用法基本是一致。
localStorage：沒有時間限制的資料儲存
sessionStorage:在瀏覽器關閉的時候就會清除。
localStorage.setItem(key,value);//儲存資料 let value = localStorage.getItem(key);//讀取資料 localStorage.removeItem(key);//刪除單個數據 localStorage.clear();//刪除所有資料 let key = localStorage.key(index);//得到某個索引的值
十、WebSocket
WebSocket協議為web應用程式客戶端和服務端之間提供了一種全雙工通訊機制。
特點：
（1）握手階段採用HTTP協議，預設埠是80和443
（2）建立在TCP協議基礎之上，和http協議同屬於應用層
（3）可以傳送文字，也可以傳送二進位制資料。
（4）沒有同源限制，客戶端可以與任意伺服器通訊。
（5）協議識別符號是ws（如果加密，為wss），如ws://localhost:8023
文章參考：
https://www.cnblogs.com/vicky1018/p/7705223.html
https://www.cnblogs.com/greatluoluo/p/5714221.html
https://www.jianshu.com/p/37c0b1eb4145