视频与音频属性，Web存储，Canvas画布与SVG

音频属性

使用属性控制audio标签的外观等功能：

Audio元素允许使用多个source元素，浏览器会使用第一个认可的格式。

视频属性

Web Storage储存的两种方式

一、localStorage(永久性本地存储）

一直存储在本地，数据存储是永久的，除非用户对其进行删除操作，其存储没有时间限制，几天后，几月后，几年后数据依然可用。
特点：

• 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localstorage的数据，除非删除，但客户端或浏览器之间的数据相互独立。
• 数据不同于cookie，不会随着Http请求发送到后台服务器；
• 存储数据的大小不用考虑，HTML5要求浏览器至少支持到4MB.
  可F12查看application中的localstorage
  localstorage对本地存储的相关操作：
• setltem(key,value):添加本地存储数据。
• getltem(key):通过key获取相应的value。
• removeltem(key):通过key删除本地数据。
• clear():清空数据。

二、sessionStorage（会话级别的本地存储）

在会话期内有效，数据在浏览器关闭后自动删除；
特点：
会话控制，短期保存。窗口或浏览器，客户端关闭后自动删除数据。
sessionStorage对本地存储的相关操作：

• setltem（key,value):添加本地存储数据。
• getltem(key):通过key获取相应的value。
• removeltem(key):通过key删除本地数据。
• clear():清空数据。

三、Canvas与SVG的区别

SVG（可缩放矢量图形）可以在网页中创建完全按比例放大和缩小的图像，无论用户屏幕大小，可以实现交互式和动画功能，是一种使用XML描述2D图形的语言。

Canvas 通过JAVAScripit绘制2D图形，是一个[HTML]元素，它可以用于绘制图形，组合照片或创建简单的动画。画布的默认大小为300像素×150像素（宽度×高度）。但是可以使用HTML height和width属性来定义自定义大小。

<canvas id="tutorial" width="150" height="150"></canvas>

如果未指定 width和height属性，则画布最初将为300像素宽和150像素高。可以通过CSS任意调整元素的大小，但是在渲染过程中，图像将按比例缩放以适合其布局大小：如果CSS大小不符合初始画布的比例，它将显得失真。

它们的区别有：

1. SVG是一种使用XML描述2D图形的语言。Canvas通过JavaScript绘制2D图形。
2. SVG基于XML，意味着SVG DOM中的每个元素都是可用的，可以对某个元素附加JavaScript事件处理器；
3. 在SVG中，每个被绘制的图形都被看做是对象，如果SVG对象属性发生变化，那么浏览器能自动重现图形。
4. Canvas是逐像素渲染的，一旦图形被绘制完成，浏览器就不会继续关注，如果其位置发生变化，那么整个场景也要重新绘制。
   且：