HTML5
1. sessionStorage和localStorage的区别
答案：
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
2. Canvas和SVG的区别是什么
答案：
canvas绘制2d位图svg绘制2d 矢量图
canvas通过js程序指令创建图形，svg通过标签创建图形
canvas可以只能将事件绑定在画布上，svg可以将事件绑定在任意元素上
canvas应用方向，网页特效与小游戏，svg创建统计图与地图应用
3.如果通过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
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: "覆盖"保持原有尺寸比例,宽度或者高度
至少一个可以与父元素一致[裁切]
11、Html5 视频常用的方法和事件有哪些
-controls -是否显示播放控件
-autoplay -是否自动播放
-loop -是否循环播放
-muted -是否是静音播放
-poster -在播放视频之前广告
-preload -预加载策略
auto:预加载一定时长视频与元数据
metadata:预加载元数据
none:不预加载数据
-volume:1 当前音量 (0~1)
-playbackRate 回放速率 大于1快放 小于1慢播
-paused:true 当前视频是否处理暂停状态
-play() 播放视频
-pause() 暂停播放视频
-onplay 当前视频开始播放时触发事件
-onpause 当前视频暂停播放时触发事件
12、如何解决html5视频移动播放时同层播放问题
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
13、Canvas 绘图技术常用路径方法与属性有哪些
ctx.beginPath():
ctx.closePath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
ctx.stroke();
ctx.fill();
ctx.arc(cx,cy,r,start,end);
14、Canvas 绘图技术常用图像方法与属性有哪些
var p3 = new Image();
p3.src = "x.png"
p3.onload = function(){..}
ctx.drawImage(p3,x,y);
15、Canvas 绘图技术常用变形方法与属性有哪些
--rotate(deg)
-translate(x,y)
-save()
-restore();
16、Svg 绘图技术例举三个常用标签
<ellipse rx="" ry="" cx="" cy=""></ellipse>
<line x1="" y1="" x2="" y2="" stroke-width="" stroke-linecap="" stroke=""></line>
<rect x="" y="" width="" height="" fill="" fill-opacity=""
<circle cx="" cy="" r=""></circle>
17、Canvas 绘图技术如何绘制贝赛尔曲线
moveTo(x,y); 起点坐标
quadraticCurveTo(cp1x,cp1y,x,y); 控制点和终点坐
18、Canvas 绘图技术如何使用平滑动画处理
window.requestAnimationFrame()
19、Html5拖放api提供哪些事件
-拖动源对象
dragstart 拖动开始
drag 拖动中
dragend 拖动结束
-拖动目标对象(不会动)
dragenter 拖动进入
dragover 拖动悬停
dragleave 拖动离开
drop 释放
20、Html5 地于定位对象与方法有哪些
navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition()
navigator.geolocation.clearWatch();
21说说HTML5，CSS3的新特性，使用过哪些？
答案：
H5新特性：
结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。
CSS3新特性：
复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。