H5新特性

html5新特性

1、新增的标签

可分为新增功能标签，和语义标签

video    表示一段视频并提供播放的用户界面    
audio    表示音频    
canvas    表示位图区域    
source    为video和audio提供数据源    
track    为video和audio指定字母    
svg    定义矢量图    
code    代码段    
figure    和文档有关的图例    
figcaption    图例的说明    
main    
time    日期和时间值    
mark    高亮的引用文字    
datalist    提供给其他控件的预定义选项    
keygen    秘钥对生成器控件    
output    计算值    
progress    进度条    
menu    菜单    
embed    嵌入的外部资源    
menuitem    用户可点击的菜单项    
menu    菜单    
template    
section    
nav    
aside    
article    
footer    
header

2、自定义属性

可以在标签添加自定义属性data-*

//1.设置自定义属性
temp.dataset.lastname= 'xiaojin'; 
//2.读取自定义属性值
temp.dataset.lastname;//或者temp.dataset['lastname'] 

3、地理(Geolocation)API

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</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>经度: " + 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

用于在主线程，创建一个worker线程

image-20221029101114205.png

6、WebSocket

参考地址：略

7、拖拽释放(Drapanddrop)APIondrop

在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。
图片和链接按住鼠标左键选中，就可以拖放。
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

释放

到达目的地之后，释放元素事件