面試： H5新特性：十個新特性
PS：比較全面，故不自己總結了，轉載自：https://www.cnblogs.com/binguo666/p/10928907.html
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