2 HTML5新特性

2.1 语义化标签

语义化的优点如下：

  • 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
  • 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
  • 文档中的节

  • 注释：在一个文档中，不能出现一个以上的

    元素。
    元素不能是以下元素的后代：
    、

image.png

2.2 增强型表单

略

2.3 视频和音频

image.png

2.4 Canvas绘图

Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

2.5 SVG绘图

SVG是html5的另一项图形功能，它是一种标准的矢量图形，是一种文件格式，有自己的API。html5引入了内联SVG，使得SVG元素可以直接出现在html标记中。

对比 Canvas，其基于位图的图像。其使用 JavaScript 程序绘图（动态生成），提供的功能更原始，适合图像处理、动态渲染以及大数据量绘制。优点如下：

  • 性能高，可以自己控制绘制过程。
  • 可控性高（像素级别）。
  • 内存占用恒定（与像素点个数有关）。

Svg，其基于矢量的图像。适合用来做动态生成，且容易编辑。

  • 不失真，放大缩小都清晰。
  • 学习成本低，其也是一种 DOM 结构。
  • 使用方便，设计软件即可导出（icon 就是这样实现的）。

2.6 地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。

  1. window.navigator.geolocation {
  2.     getCurrentPosition:  fn  用于获取当前的位置数据
  3.     watchPosition: fn  监视用户位置的改变
  4.     clearWatch: fn  清除定位监视
  5. }

2.7 拖放API

拖动生命周期 属性名 描述
拖动开始 ondragstart 在拖动操作开始时执行脚本
拖动过程中 ondrag 只要脚本在被拖动就运行脚本
拖动过程中 ondragenter 当元素被拖动到一个合法的防止目标时，执行脚本
拖动过程中 ondragover 只要元素正在合法的防止目标上拖动时，就执行脚本
拖动过程中 ondragleave 当元素离开合法的防止目标时
拖动结束 ondrop 将被拖动元素放在目标元素内时运行脚本
拖动结束 ondragend 在拖动操作结束时运行脚本

2.8 Web Worker

Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage、onmessage。

  1. if (window.Worker) { ... }
  1. //worker.js
  2. // self 代表子线程自身
  3. self.onmessage = function (evt) {
  4.   console.log(evt.data); 
  5.   self.postMessage("worker");
  6. };
  8. // 主线程
  9. const worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
  10. worker.postMessage("hello world");     //向worker发送数据
  11. worker.onmessage = function(evt){     //接收worker传过来的数据函数
  12.    console.log(evt.data);              //输出worker发送来的数据
  13. }
  • 分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
  • 在 worker 内，不能直接操作 DOM 节点，也不能使用 window 对象的默认方法和属性
  • 使用大量 window 对象之下的东西，包括WebSockets，IndexedDB
  • 不能访问 localStorage

https://www.ruanyifeng.com/blog/2018/07/web-worker.html

  1. // 主线程
  2. worker.terminate();
  4. // Worker 线程
  5. self.close();

2.9 Web Storage

WebStorage是HTML新增的本地存储解决方案之一，但并不是取代 cookie 而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。WebSorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。

  • websorage拥有5M 的存储容量，而cookie却只有4K，这是完全不能比的。

  • localStorage：没有时间限制的数据存储

  • sessionStorage:在浏览器关闭的时候就会清除。 ```javascript //sessionStorage和localStorage方法一致

//保存数据 localStorage.setItem(key,value); //读取数据 localStorage.getItem(key); //删除单个数据 localStorage.removeItem(key); //删除所有数据 localStorage.clear(); //得到某个索引的key localStorage.key(index); ```

2.10 WebSocket

2.11 History API