HTML5新特性

2022-05-07 Celinf

①语义化标签，可以让页面有更加完善的结构，让页面的元素有含义，同时利于被搜索引擎解析，有利于seo，主要标签包括下面的标签：

html5新的常用标签

②增强型表单

可以通过input的type属性指定类型是number还是date或者url，同时还添加了placeholder和required等表单属性。

<input type="range" id="a" value="50" required>
<input type="number" id="b" value="50" placeholder="请输入数字">

③媒体元素

新增了audio和video两个媒体相关的标签，可以让开发人员不必以来任何插件就能在网页中嵌入浏览器的音频和视频内容。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
// 有些低版本浏览器不支持Video标签。
</video>
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
// 有些低版本浏览器不支持 audio 元素。
</audio>

④canvas绘图

canvas绘图指的是在页面中设定一个区域，然后通过JS动态的在这个区域绘制图形。

<canvas id="canvas" width="300" height="300"></canvas>

⑤svg绘图

//画了一个圆
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

⑥地理定位

getCurrentPosition()方法来获取用户的位置，从而实现队地理位置的定位。

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;    
}

⑦拖放API

通过给标签元素设置属性draggable值为true，能够实现对目标元素的拖动。

<img draggable="true"> // 拖放图片

⑧Web Worker

Web Worker通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行，worker线程运行结束之后会把结果返回给主线程，worker线程可以处理一些计算密集型的任务，这样主线程就会变得相对轻松，这并不是说JS具备了多线程的能力，而实浏览器作为宿主环境提供了一个JS多线程运行的环境。

if(typeof(Worker)!=="undefined")
{
    // 是的! Web worker 支持!
    // 一些代码.....
}
else
{
    //抱歉! Web Worker 不支持
}

⑨Web Storage

需要重点掌握的是cookie、Localstorage和SessionStorage三者之间的区别：

1.有效期

cookies是会话机制，它是在设置的时间内（自己设置的）有效。
localStorage是属于本地存储的一种，是永久存储，除非手动删除，否则一直有效。
sessionStorage也是属于本地存储的一种，是临时存储，在关闭当前页面或者当前浏览器窗口前有效。

2.存储数据的大小

cookies存储的数据大小在4k左右。
localStorage存储的数据大小在20M左右。
sessionStorage存储的数据大小在5M左右。

3.作用范围

cookies只能作用于当面目录以及当前的子目录。
localStorage是同一浏览器不同标签页之间数据可以共享。
sessionStorage中存储的数据是只能在当前标签页中使用。

4.安全性

cookies的安全性比loaclStorage和sessionStorage的安全性好。

⑩Websocket

websocket和HTTP的区别：

相同点：HTTP和Websocket都是基于TCP的应用层协议。
不同点：①websocket是双向通信协议，模拟socket协议，可以双向发送和接受消息，HTTP是单向的，意思是说通信只能由客户端发起。②websocket是需要浏览器和服务器通过握手建立连接，但是HTTP是浏览器向服务器发送连接，服务器预先不知道这个连接。
联系：websocket建立握手时需要基于HTTP进行传输，建立连接之后呢便不再需要HTTP协议了。

【注】HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

webSocket

学习记录，如有侵权请联系删除