html5總的來說多了十個(gè)新特性形真，但其不支持ie8及ie8以下版本的瀏覽器。
- 語義化標(biāo)簽
- 增強(qiáng)型表單
- 視頻和音頻
- Canvas 繪圖
- SVG 繪圖
- 地理定位
- 拖放 API
- WebWorker
- WebStorage
- WebSocket
一且警、語義化標(biāo)簽
html5 語義化標(biāo)簽，可以使開發(fā)者更方便清晰構(gòu)建頁面的布局寄摆。
<!-- 定義頁眉蒸眠，通常包含LOGO，標(biāo)題和導(dǎo)航 -->
<header></header>
<!-- 定義了頁腳询件，通常包含版權(quán)或法律聲明，有時(shí)還包含一些鏈接 -->
<footer></footer>
<!-- 定義了一個(gè)部分唆樊，其中包含經(jīng)常出現(xiàn)在網(wǎng)站上的導(dǎo)航鏈接 -->
<nav></nav>
<!-- 定義了一個(gè)部分宛琅，例如側(cè)邊欄 -->
<aside></aside>
<!-- 定義了主體內(nèi)容 -->
<main></main>
<!-- 定義了文檔的一部分 -->
<section></section>
<!-- 定義了一條獨(dú)立的內(nèi)容。它不單指主要內(nèi)容逗旁，而是可以用于注釋和小部件 -->
<article></article>
<!-- 定義用戶可以看到或者隱藏的額外細(xì)節(jié) -->
<details>
<summary>內(nèi)容標(biāo)題</summary>
<p>這是隱藏的內(nèi)容一</p>
<p>這是隱藏的內(nèi)容二</p>
</details>
<!-- 定義對(duì)話框 -->
<dialog open>
<p>我是對(duì)話框</p>
</dialog>
<!-- 定義自包含內(nèi)容嘿辟，如圖表舆瘪，圖片 -->
<figure>
<!-- 標(biāo)題 -->
<figcaption>午后時(shí)光</figcaption>
<img src="https://pics7.baidu.com/feed/d62a6059252dd42a066ff9f994ac9bb3c8eab898.jpeg?token=d0816df1b671a48272fbf91c58eb2d72&s=8B9456806C7640921D842CD90300F090" alt="午后時(shí)光" />
</figure>
<!-- 定義部分文本高亮顯示 -->
<mark>《CSS那些事兒》</mark>
<!-- 定義日期時(shí)間 -->
<time>2019/06/01</time>
二、增強(qiáng)型表單
html5修改一些新的input輸入特性红伦，改善更好的輸入控制和驗(yàn)證英古。
<!-- 選取顏色 -->
<input type="color" />
<!-- 選取日期 -->
<input type="date" />
<!-- 選取日期(UTC時(shí)間) -->
<input type="datetime" />
<!-- 選取日期（無時(shí)區(qū)） -->
<input type="datetime-local" />
<!-- 選擇一個(gè)月份 -->
<input type="month" />
<!-- 選擇周和年 -->
<input type="week" />
<!-- 選擇一個(gè)時(shí)間 -->
<input type="time" />
<!-- 包含e-mail地址的輸入域 -->
<input type="email" />
<!-- 數(shù)值的輸入域 -->
<input type="number" />
<!-- url地址輸入域 -->
<input type="url" />
<!-- 定義輸入電話號(hào)碼和字段 -->
<input type="tel" />
<!-- 用于搜索域 -->
<input type="search" />
<!-- 一個(gè)范圍內(nèi)數(shù)字值的輸入域 -->
<input type="range" />
html5新增了五個(gè)表單元素
<!-- 用戶會(huì)在他們輸入數(shù)據(jù)時(shí)看到域定義選項(xiàng)的下拉列表 -->
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
<!-- 進(jìn)度條，展示連接/下載進(jìn)度 -->
下載進(jìn)度：<progress value="22" max="100"></progress>
<!-- 提供一種驗(yàn)證用戶的可靠方法生成一個(gè)公鑰和私鑰 -->
<form action="/example/html5/demo_form.asp" method="get">
用戶名：<input type="text" name="usr_name" />
加密：<keygen name="security" />
<input type="submit" />
</form>
<!-- 用于不同類型的輸出比如尖酸或腳本輸出 -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<!-- 刻度值昙读，用于某些計(jì)量召调，例如溫度、重量等 -->
<meter value="0.6">60%</meter>
html5新增表單屬性
| 屬性 | 描述 |
|---|---|
| placehoder | 輸入框默認(rèn)提示文字 |
| required | 要求輸入的內(nèi)容是否可為空 |
| pattern | 描述一個(gè)正則表達(dá)式驗(yàn)證輸入的值 |
| min/max | 設(shè)置元素最小/最大值 |
| step | 為輸入域規(guī)定合法的數(shù)字間隔 |
| height/wdith | 用于image類型<input>標(biāo)簽圖像高度/寬度 |
| autofocus | 規(guī)定在頁面加載時(shí)蛮浑，域自動(dòng)獲得焦點(diǎn) |
| multiple | 規(guī)定<input>元素中可選擇多個(gè)值 |
三唠叛、音頻和視頻
html5提供了音頻和視頻文件的標(biāo)準(zhǔn)，既使用 <audio> 元素沮稚。
音頻：<audio src=" "></audio>艺沼。
<!-- 屬性提供添加播放、暫停和音量控件 -->
<audio 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 標(biāo)簽
</video>
四障般、Canvas 繪圖
https://www.runoob.com/w3cnote/html5-canvas-intro.html
五、SVG 繪圖
-
什么是SVG?
- SVG指可伸縮矢量圖形
- SVG用于定義用于網(wǎng)絡(luò)的基于矢量的圖形
- SVG使用XML格式定義圖形
- SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失
- SVG是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
-
SVG的優(yōu)勢
- SVG圖像可通過文本編譯器來創(chuàng)建和修改
- SVG圖像可被搜索盛杰、索引挽荡、腳本化或壓縮
- SVG是可伸縮的
- SVG圖像可在任何的分辨率下被高質(zhì)量的打印
- SVG可在圖像質(zhì)量不下降的情況下被放大
-
SVG 與 Canvas 區(qū)別
- SVG適用于描述XML中的2D圖形的語言。
- Canvas隨時(shí)隨地繪制2D圖形（使用javaScript）饶唤。
- SVG是基于XML的徐伐，意味這可以操作DOM，渲染速度較慢募狂。
- 在SVG中每個(gè)形狀都被當(dāng)做是一個(gè)對(duì)象办素，如果SVG發(fā)生改變，頁面就會(huì)發(fā)生重繪祸穷。
- Canvas是一像素一像素地渲染性穿，如果改變某一個(gè)位置，整個(gè)畫布會(huì)重繪雷滚。
| Canvas | SVG |
|---|---|
| 依賴分辨率 | 不依賴分辨率 |
| 不支持事件處理器 | 支持事件處理器 |
| 能夠以.png或.jpg格式保存結(jié)果圖像 | 復(fù)雜度會(huì)減慢搞渲染速度 |
| 文字呈現(xiàn)功能比較簡單 | 適合大型渲染區(qū)域的應(yīng)用程序 |
| 最合適圖像密集的游戲 | 不適合游戲應(yīng)用 |
六需曾、地理定位
使用 getCurrentPosition() 方法來獲取用戶的位置。以實(shí)現(xiàn)“LBS服務(wù)”
<body>
<div id="demo"></div>
<script>
var x = document.getElementById("demo");
getLocation();
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
x.innerHTML = "該瀏覽器不支持獲取地理位置";
}
}
function showPosition(position) {
x.innerHTML = `緯度：${position.coords.latitude}經(jīng)度：${position.coords.longitude}`
};
</script>
</body>
七祈远、拖放 API
拖放是一種常見的特性呆万，即捉取對(duì)象以后拖到另一個(gè)位置。
在html5中车份，拖放是標(biāo)準(zhǔn)的一部分谋减，任何元素都能夠拖放。
<div draggable="true"></div>
當(dāng)元素拖動(dòng)時(shí)扫沼，我們可以檢查其拖動(dòng)的數(shù)據(jù)出爹。
<div draggable="true" ondragstart="drag(event)"></div>
<script>
function drap(ev){
console.log(ev);
}
</script>
| 拖動(dòng)生命周期 | 屬性名 | 描述 |
|---|---|---|
| 拖動(dòng)開始 | ondragstart | 在拖動(dòng)操作開始時(shí)執(zhí)行腳本 |
| 拖動(dòng)過程中 | ondrag | 只要腳本在被拖動(dòng)就運(yùn)行腳本 |
| 拖動(dòng)過程中 | ondragenter | 當(dāng)元素被拖動(dòng)到一個(gè)合法的防止目標(biāo)時(shí)庄吼，執(zhí)行腳本 |
| 拖動(dòng)過程中 | ondragover | 只要元素正在合法的防止目標(biāo)上拖動(dòng)時(shí)，就執(zhí)行腳本 |
| 拖動(dòng)過程中 | ondragleave | 當(dāng)元素離開合法的防止目標(biāo)時(shí) |
| 拖動(dòng)結(jié)束 | ondrop | 將被拖動(dòng)元素放在目標(biāo)元素內(nèi)時(shí)運(yùn)行腳本 |
| 拖動(dòng)結(jié)束 | ondragend | 在拖動(dòng)操作結(jié)束時(shí)運(yùn)行腳本 |
八严就、Web Worker
http://www.ruanyifeng.com/blog/2018/07/web-worker.html
JavaScript 語言采用的是單線程模型总寻，也就是說，所有任務(wù)只能在一個(gè)線程上完成梢为，一次只能做一件事渐行。前面的任務(wù)沒做完，后面的任務(wù)只能等著抖誉。隨著電腦計(jì)算能力的增強(qiáng)殊轴，尤其是多核 CPU 的出現(xiàn)，單線程帶來很大的不便袒炉，無法充分發(fā)揮計(jì)算機(jī)的計(jì)算能力旁理。
Web Worker 可以通過加載一個(gè)腳本文件，進(jìn)而創(chuàng)建一個(gè)獨(dú)立工作的線程我磁，在主線程之外運(yùn)行孽文。
-
基本使用：
Web Worker的基本原理就是在當(dāng)前javascript的主線程中，使用Worker類加載一個(gè)javascript文件來開辟一個(gè)新的線程夺艰，
起到互不阻塞執(zhí)行的效果芋哭，并且提供主線程和新縣城之間數(shù)據(jù)交換的接口：postMessage、onmessage郁副。
// worker.js
onmessage =function (evt){
var d = evt.data;//通過evt.data獲得發(fā)送來的數(shù)據(jù)
postMessage( d );//將獲取到的數(shù)據(jù)發(fā)送會(huì)主線程
}
<script>
// worker.html
// 創(chuàng)建一個(gè)Worker對(duì)象并向它傳遞將在新線程中執(zhí)行的腳本的URL
var worker =new Worker("worker.js");
// 向worker發(fā)送數(shù)據(jù)
worker.postMessage("hello world");
// 接收worker傳過來的數(shù)據(jù)函數(shù)
worker.onmessage =function(evt){
// 輸出worker發(fā)送來的數(shù)據(jù)
console.log(evt.data);
}
</script>
九减牺、Web Storage
WebStorage 是HTML新增的本地存儲(chǔ)解決方案之一，但并不是取代cookie 而指定的標(biāo)準(zhǔn)存谎，cookie 作為 HTTP 協(xié)議的一部分用來處理客戶端和服務(wù)器的通信是不可或缺的拔疚，session 正式依賴與實(shí)現(xiàn)的客戶端狀態(tài)保持。WebSorage 的意圖在于解決本來不應(yīng)該 cookie 做既荚，卻不得不用 cookie 的本地存儲(chǔ)稚失。
websorage擁有5M的存儲(chǔ)容量，而cookie卻只有4K恰聘，這是完全不能比的句各。
客戶端存儲(chǔ)數(shù)據(jù)有兩個(gè)對(duì)象，其用法基本是一致晴叨。
- localStorage：沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage:在瀏覽器關(guān)閉的時(shí)候就會(huì)清除凿宾。
<body>
<button class="set-data-btn">設(shè)置數(shù)據(jù)</button>
<button class="get-datakey-btn">獲取某個(gè)索引的值</button>
<button class="remove-data-btn">刪除一條數(shù)據(jù)</button>
<button class="clear-data-btn">刪除所有數(shù)據(jù)</button>
<script>
let setBtn = document.querySelector('.set-data-btn');
let getKeyBtn = document.querySelector('.get-datakey-btn');
let removeBtn = document.querySelector('.remove-data-btn');
let clearBtn = document.querySelector('.clear-data-btn');
let data = {
id: 1,
username: '張三',
token: 'asjfixuz8o13512410uxucj12j4l124kl1h5'
};
// 設(shè)置數(shù)據(jù)
setBtn.onclick = () => localStorage.setItem('token', JSON.stringify(data));
// 獲取某個(gè)索引的值
getKeyBtn.onclick = () => console.log(localStorage.key(data))
// 刪除一條
removeBtn.onclick = () => localStorage.removeItem('token');
// 刪除所有
clearBtn.onclick = () => localStorage.clear();
</script>
十、WebSocket
WebSocket 協(xié)議為 web 應(yīng)用程序客戶端和服務(wù)端之間提供了一種全雙工通信機(jī)制兼蕊。
特點(diǎn)：
- 握手階段采用HTTP協(xié)議菌湃，默認(rèn)端口是80和443
- 建立在TCP協(xié)議基礎(chǔ)之上，和http協(xié)議同屬于應(yīng)用層
- 可以發(fā)送文本遍略，也可以發(fā)送二進(jìn)制數(shù)據(jù)惧所。
- 沒有同源限制，客戶端可以與任意服務(wù)器通信绪杏。
- 協(xié)議標(biāo)識(shí)符是ws（如果加密下愈，為wss），如ws://localhost:8023
