html5新特性
1集嵌、新增的標(biāo)簽
可分為新增功能標(biāo)簽少欺，和語(yǔ)義標(biāo)簽
video 表示一段視頻并提供播放的用戶界面
audio 表示音頻
canvas 表示位圖區(qū)域
source 為video和audio提供數(shù)據(jù)源
track 為video和audio指定字母
svg 定義矢量圖
code 代碼段
figure 和文檔有關(guān)的圖例
figcaption 圖例的說(shuō)明
main
time 日期和時(shí)間值
mark 高亮的引用文字
datalist 提供給其他控件的預(yù)定義選項(xiàng)
keygen 秘鑰對(duì)生成器控件
output 計(jì)算值
progress 進(jìn)度條
menu 菜單
embed 嵌入的外部資源
menuitem 用戶可點(diǎn)擊的菜單項(xiàng)
menu 菜單
template
section
nav
aside
article
footer
header
2正压、自定義屬性
可以在標(biāo)簽添加自定義屬性data-*
//1.設(shè)置自定義屬性
temp.dataset.lastname= 'xiaojin';
//2.讀取自定義屬性值
temp.dataset.lastname;//或者temp.dataset['lastname']
3瓷式、地理(Geolocation)API
<p id="demo">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長(zhǎng)的時(shí)間獲忍娑觥）：</p>
<button onclick="getLocation()">點(diǎn)我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"<br>經(jīng)度: " + position.coords.longitude;
}
</script>
4贸典、新增的表單類型
<form action="">
email: <input type="email">
url:<input type="url">
number: <input type="number">
range: <input type="range">
tel: <input type="tel"pattern="^\d{3}-\d{8}|\d{4}-\d{7}$">
color: <input type="color">
search：<input type="search">
date：<input type="date">
time：<input type="time">
datetime：<input type="datetime">
datetime-loacl: <input type="datetime-local">
month: <input type="month">
week: <input type="week" name="" id="">
<input type="submit">
</form>
5视卢、webworker
用于在主線程，創(chuàng)建一個(gè)worker線程
image-20221029101114205.png
6廊驼、WebSocket
參考地址：略
7据过、拖拽釋放(Drapanddrop)APIondrop
在HTML5標(biāo)準(zhǔn)中惋砂，為了使元素可拖動(dòng)，把draggable屬性設(shè)置為true绳锅。
文本西饵、圖片和鏈接是默認(rèn)可以拖放的，它們的draggable屬性自動(dòng)被設(shè)置成了true鳞芙。
圖片和鏈接按住鼠標(biāo)左鍵選中眷柔，就可以拖放。
文本只有在被選中的情況下才能拖放原朝。如果顯示設(shè)置文本的draggable屬性為true驯嘱，按住鼠標(biāo)左鍵也可以直接拖放。
| 針對(duì)對(duì)象 | 事件名稱 | 說(shuō)明 |
|---|---|---|
| 被拖動(dòng)的元素 | dragstart | 在元素開(kāi)始被拖動(dòng)時(shí)候觸發(fā) |
| drag | 在元素被拖動(dòng)時(shí)反復(fù)觸發(fā) | |
| dragend | 在拖動(dòng)操作完成時(shí)觸發(fā) | |
| 目的地對(duì)象 | dragenter | 當(dāng)被拖動(dòng)元素進(jìn)入目的地元素所占據(jù)的屏幕空間時(shí)觸發(fā) |
| dragover | 當(dāng)被拖動(dòng)元素在目的地元素內(nèi)時(shí)觸發(fā) | |
| dragleave | 當(dāng)被拖動(dòng)元素沒(méi)有放下就離開(kāi)目的地元素時(shí)觸發(fā) |
dragenter和dragover事件的默認(rèn)行為是拒絕接受任何被拖放的元素竿拆。因此，我們必須阻止瀏覽器這種默認(rèn)行為宾尚。e.preventDefault();
釋放
到達(dá)目的地之后丙笋，釋放元素事件
| 針對(duì)對(duì)象 | 事件名稱 | 說(shuō)明 |
|---|---|---|
| 目的地對(duì)象 | drop | 當(dāng)被拖動(dòng)元素在目的地元素里放下時(shí)觸發(fā)，一般需要取消瀏覽器的默認(rèn)行為煌贴。 |
