html5十大特性
HTML5总体比HTML4多了十个新特性，但其不支持IE8及IE8以下版本的浏览器。
- 语义化标签
- 表单功能
- 视频和音频
- Canvas绘图
- SVG绘图
- 地理定位
- 拖放API
- WebWorker
- WebStorage
- WebSocket
1、语义化标签
Q：对整个HTML结构进行语义化的规范操作有什么好处？
A：1 有利于SEO（Search Engine Optimization 搜索引擎优化），和搜索引擎建立良好的沟通，有助于爬虫爬取更多有效的信息。因为爬虫依赖于标签来确定上下文和各个关键字的权重。
2 方便其他设备的解析（屏幕阅读器，移动设备），以有意义的方式来渲染网页。
3 方便团队开发和维护，增加代码可读性，遵循标准，减少差异化。
————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45709829/article/details/115433620
结构化元素
HTML5提供的新元素可以更好的描述网页文档结构，比如：
其他元素
2、增强表单功能
新增输入类型（type）
HTML5新增了一些新的input输入特性，从而更好的进行输入控制和验证。
新增表单元素
新增表单属性
3、音频和视频
音频：<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>
4、Canvas绘图
Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。
<canvas id="tutorial" width="300" height="300"></canvas>
5、SVG绘图
什么是SVG?
SVG指可伸缩矢量图形
SVG用于定义用于网络的基于矢量的图形
SVG使用XML格式定义图形
SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG是万维网联盟的标准
SVG的优势
SVG图像可通过文本编译器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的
SVG图像可在任何的分辨率下被高质量的打印
SVG可在图像质量不下降的情况下被放大
SVG与Canvas区别
6、地理定位
使用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>
7、拖放
拖放是一种常见的特性，即捉取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。
示例：
<div draggable="true"></div>
当元素拖动时，我们可以检查其拖动的数据
<div draggable="true" ondragstart="drag(event)"></div> <script> function drap(ev){ console.log(ev); } </script>
拖动的生命周期
8、Web Worker
Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。
Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage、onmessage。
例：
<!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>
//worker.js onmessage = function (evt){ var d = evt.data;//通过evt.data获得发送来的数据 postMessage( d );//将获取到的数据发送会主线程 }
9、Web Storage【localStorage、sessionStorage】
WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准。cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的。
WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。
WebStorage两个主要目标：
（1）提供一种在cookie之外存储会话数据的路径。
（2）提供一种存储大量可以跨会话存在的数据的机制。
区别
10、WebSocket
WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。
特点：
握手阶段采用HTTP协议，默认端口是80和443
建立在TCP协议基础之上，和http协议同属于应用层
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，为wss），如ws://localhost:8023
