标签：十大 SVG Worker 特性 cookie html5 worker evt 拖放

HTML5总体比HTML4多了十个新特性，但其不支持IE8及IE8以下版本的浏览器。

语义化标签
表单功能
视频和音频
Canvas绘图
SVG绘图
地理定位
拖放API
WebWorker
WebStorage
WebSocket

1、语义化标签

结构化元素

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

标签：十大,SVG,Worker,特性,cookie,html5,worker,evt,拖放
From： https://www.cnblogs.com/meiyanstar/p/18336457

html5十大特性