2019 HTML5 面试题

最新推荐文章于 2024-05-22 22:40:25 发布

智取边角料

最新推荐文章于 2024-05-22 22:40:25 发布

阅读量661

点赞数

文章标签：前端面试题 HTML5 HTML5新特性

本文链接：https://blog.youkuaiyun.com/weixin_45579891/article/details/100931976

版权

HTML5

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

html5有哪些新特性举五种？

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

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

Color	Date	Datetime	Email
Time	Url	Range	Tel
Number	Search

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

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

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

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

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

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

HTML5 中如何嵌入视频？
HTML5 支持 MP4、WebM 和 Ogg 格式的视频，下面是简单示例：

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

html5视频专用的css属性有哪些？
object-fit
fill: “填充” 默认值将视频拉伸操作填满空间
contain: "包含"保持原有尺寸比例，容器空白
cover: "覆盖"保持原有尺寸比例,宽度或者高度
至少一个可以与父元素一致[裁切]
Html5 视频常用的方法和事件有哪些？

常用的方法	事件
controls	是否显示播放控件
autoplay	是否自动播放
loop	是否循环播放
muted	-是否是静音播放
poster	-在播放视频之前广告
preload	预加载策略 – auto:预加载一定时长视频与元数据 –metadata:预加载元数据 – none:不预加载数据
volume:1	当前音量 (0~1)
playbackRate	回放速率大于1快放小于1慢播
paused:true	当前视频是否处理暂停状态
play()	播放视频
pause()	暂停播放视频
onplay	当前视频开始播放时触发事件
onpause	当前视频暂停播放时触发事件

如何解决html5视频移动播放时同层播放问题？

		<video src="http://xxx.mp4" x5-video-player-type="h5"/>

Canvas 绘图技术常用路径方法与属性有哪些？

ctx.beginPath()	ctx.closePath()
ctx.moveTo(x,y)	ctx.lineTo(x,y)
ctx.stroke();	ctx.fill()
ctx.arc(cx,cy,r,start,end)

Canvas 绘图技术常用图像方法与属性有哪些？

		var p3 = new Image();
   		p3.src = "x.png"
  		p3.onload = function(){..}
  		ctx.drawImage(p3,x,y);

Canvas 绘图技术常用变形方法与属性有哪些？

-rotate(deg)	-translate(x,y)
-save()	-restore();

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>

Canvas 绘图技术如何绘制贝赛尔曲线？

	moveTo(x,y); 起点坐标 
	quadraticCurveTo(cp1x,cp1y,x,y); 控制点和终点坐

Canvas 绘图技术如何使用平滑动画处理？

	 window.requestAnimationFrame()

Html5拖放api提供哪些事件？

拖动对象	拖动目标对象(不会动)
dragstart 拖动开始	dragenter 拖动进入
drag 拖动中	dragover 拖动悬停
dragend 拖动结束	dragleave 拖动离开
	drop 释放

Html5 基于定位对象与方法有哪些？

常用的有以下三种
navigator.geolocation.getCurrentPosition
navigator.geolocation.watchPosition()
navigator.geolocation.clearWatch()

说说 HTML5 的新特性，使用过哪些？
答：结构标记（header，footer，section，article，aside，nav），新表单元素（url，email，number，date，month，color等），canvas，audio，video，地理定位，拖放，web存储，Web Workers，WebSocket等。
说说 CSS3 的新特性，使用过哪些？
答：复杂选择器器（属性选择器，伪类选择器，伪元素选择器，兄弟选择器等），边框倒角，边框阴影，渐变，转换，过渡，动画，弹性盒子，媒体查询技术等。