前端面试题HTML5(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/AyayaOVO/article/details/107007650

1. sessionStorage和localStorage的区别

答案：
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

2. Canvas和SVG的区别是什么

答案：
canvas绘制2d位图svg绘制2d 矢量图
canvas通过js程序指令创建图形，svg通过标签创建图形
canvas可以只能将事件绑定在画布上，svg可以将事件绑定在任意元素上
canvas应用方向，网页特效与小游戏，svg创建统计图与地图应用

如果通过canvas路径绘制一个圆心 250 200 半径为100 描边红色的圆
提示：画布id 为box 画布宽高相同500px

  var can = docuemnt.getElementById("box");
   var ctx = can.getContext("2d");
   ctx.beginPath();
   ctx.arc(250,200,100,0,2*Math.PI);
   ctx.stroke();

4. html5有哪些新特性举五种

canvas 绘图技术
svg 绘图技术
webworker 新线程
websocket 网络协议
webstorage 客户端存储

5:html5表单中新input type 属性值有哪些

Color
Date
Datetime
Email
Time
Url
Range
Tel
Number
Search

6：html5中如何创建一个worker线程,以及接收和发送数据

var worker = new Worker("1.js");
worker.postMessage();
worker.onmessage = function (e)
{
e.data;
};

7:Local storage和cookies之间的区别是什么？

区别一:客户端和服务端都能访问数据。
Cookie的数据通过每一个请求发送到服务端
Local storage只有本地浏览器端可访问数据，
服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器
区别二:大小
每个cookie有4095byte
Local storage每个域5MB
区别三:过期
Cookies有有效期，所以在过期之后cookie和cookie数据会被删除
Local storage有过期数据，如需删除只能手工删除

8、HTML5 中如何嵌入音频？

HTML5 支持 MP3、Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：

<audio controls>
    <source src=”jamshed.mp3″ type=”audio/mpeg”>
    您的浏览器不支持音频播放
</audio>

9、HTML5 中如何嵌入视频？

HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：

<video width=”450″ height=”340″ controls>
  <source src=”jamshed.mp4″ type=”video/mp4″>
您的浏览器不支持视频播放
</video>

10、html5视频专用的css属性有哪些

object-fit
fill: “填充” 默认值将视频拉伸操作填满空间
contain: "包含"保持原有尺寸比例，容器空白
cover: "覆盖"保持原有尺寸比例,宽度或者高度
至少一个可以与父元素一致[裁切]