音频属性
使用属性控制audio标签的外观等功能：
| 属性 | 描述 |
|---|---|
| autoplay | 只要没有停止加载数据，音频自动开始播放 |
| autobuffer | 即使没有设置自动播放，音频也会自动开始缓冲 |
| controls | 允许用户控制音频播放，包括音量，快进，暂停或恢复 |
| loop | 允许播放结束后自动循环 |
| preload | 音频在载入页面时加载并准备就绪。如果设定自动播放则忽略 |
| src | 要嵌入的音频URL。可以在音频块中使用<source>元素指定要嵌入的音频来替代 |
Audio元素允许使用多个source元素，浏览器会使用第一个认可的格式。
视频属性
| 属性 | 描述 |
|---|---|
| autoplay | 只要没有停止加载数据，视频就立刻开始自动播放 |
| autobuffer | 即使没有开始设置自动播放，视频也会自动开始缓冲 |
| controls | 允许用户控制视频播放，包括音量，快进，暂停和恢复 |
| height | 以CSS的像素形式指定视频显示区域的高度 |
| width | 以CSS像素的形式来指定视频显示区域的宽度 |
| loop | 允许播放结束后自动循环 |
| preload | 视频在载入页面时加载并准备就绪，如果指定自动播放则忽略 |
| poster | 一个图像URL，显示用户播放或快进 |
| src | 要嵌入的视频URL。可以在视频块中使用<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大小不符合初始画布的比例，它将显得失真。
它们的区别有：
- SVG是一种使用XML描述2D图形的语言。Canvas通过JavaScript绘制2D图形。
- SVG基于XML，意味着SVG DOM中的每个元素都是可用的，可以对某个元素附加JavaScript事件处理器；
- 在SVG中，每个被绘制的图形都被看做是对象，如果SVG对象属性发生变化，那么浏览器能自动重现图形。
- Canvas是逐像素渲染的，一旦图形被绘制完成，浏览器就不会继续关注，如果其位置发生变化，那么整个场景也要重新绘制。
且：
| Canvas | SVG |
|---|---|
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 弱的文本渲染能力 | 适合带有大型渲染区域的应用程序（谷歌地图等） |
| 能以.jpg或.png格式保存结果图像 | 复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快 |
| 适合图像密集型游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用 |
网友评论