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=document.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="5"/>
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.Cnavs绘图技术常用变形方法与属性有哪些
-rotate(deg);
-translate(x,y);
-save();
-restore();
16.Svg绘图技术列举三个重要标签
<ellipse rx="" ry="" cx="" cy=""></ellips>
<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); 起点坐标
quadraticCurvelTo(cp1x,cp1y,x,y); 控制点和终点坐
18.Canvas绘图技术如何使用平滑动画处理
window.requestAnimationFrame()
19.html5拖放api提供哪些事件
- 拖动源对象
dragstart 拖动开始
drag 拖动中
dragend 拖动结束
-拖动目标对象(不会动)
dragenter 拖动进入
dragover 拖动悬停
dragleave 拖动离开
drop 释放
20.html5的地理定位对象和方法有哪些
navigator.geolocation.getCurrentPosition
navigator.getolocation.watchPosition()
navigator.geolocation.clearWatch();
21.说说HTML5,CSS3的新特性,使用过哪些?
答案:
H5新特性:
结构标记(header,footer,section,artcle,aside,nav),
新表单元素(url,email,number,date,month,color等)
canvas,audio,video,地理定位,拖放,web存储,WebWorkers,WebSocket等
CSS新特性:
复杂选择器(属性选择器,伪类选择器,伪元素选择器,兄弟选择器),
边框倒角,边框阴影,渐变,转换,过渡,动画,弹性盒子,媒体查询技术等.
HTML5面试题的更多相关文章
- HTML5面试题-备
万不可投机取巧.只求当时过关,非长久之计也!(感谢大神分享) 面试有几点需要注意: 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑. 题目类型: 技术视野.项目细节.理论知 ...
- HTML5面试题-b
感谢分享 面试有几点需要注意: 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑. 题目类型: 技术视野.项目细节.理论知识型题,算法题,开放性题,案例题. 进行追问: 可以 ...
- 10个最常见的 HTML5 面试题及答案
这是选择了10个 HTML5 面试问题并给出了答案.这是 Web 开发人员最常见的面试问题,相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了.一起来看看吧. 您可能感兴趣的相关文章 Web 前 ...
- Html5 面试题汇总
1.HTML5 为什么只需要写 <!DOCTYPE HTML>? 答案解析: Html5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照他 ...
- 常见前端HTML5面试题
1.H5新标签新特性 新标签:header,nav,footer,aside,article,section,Canvas,audio,video 新特性:localStorag, sessionSt ...
- 【理论面试篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
##2017.10.30收集 面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
- 【编码题篇】收集整理来自网络上的一些常见的 经典前端、H5面试题 Web前端开发面试题
编写一个方法 求一个字符串的字节长度假设:一个英文字符占用一个字节,一个中文字符占用两个字节 function GetBytes(str){ var len = str.length; var byt ...
- Web 技术人员需知的 Web 缓存知识(转)
最近的译文距今已有4年之久,原文有一定的更新.今天踩着前辈们的肩膀,再次把这篇文章翻译整理下.一来让自己对web缓存的理解更深刻些,二来让大家注意力稍稍转移下,不要整天HTML5, 面试题啊叨啊叨的~ ...
- Web 技术人员需知的Web 缓存知识
最近的译文距今已有4年之久,原文有一定的更新.今天踩着前辈们的肩膀,再次把这篇文章翻译整理下.一来让自己对web缓存的理解更深刻些,二来让大家注意力稍稍转移下,不要整天HTML5, 面试题啊叨啊叨的~ ...
随机推荐
- 在java中构建高效的结果缓存
文章目录 使用HashMap 使用ConcurrentHashMap FutureTask 在java中构建高效的结果缓存 缓存是现代应用服务器中非常常用的组件.除了第三方缓存以外,我们通常也需要在j ...
- Robot Framework -003 在Windows10 安装Eclipse作为编辑器,安装 RED 插件。
本文采用Eclipse及其对应的插件来编辑.管理.运行Robot Framework. https://www.eclipse.org/downloads/ 本文安装 Eclipse IDE 2 ...
- 【三剑客】awk函数
1. 内置函数 awk的内置函数有算术.字符串.时间.位操作和其它杂项的函数. 1.1 算术函数 atan2(y,x) 返回弧度的反正切(y/x) cos(expr) 返回expr的余弦(以弧度形 ...
- 正则表达式(grep,awk,sed)和通配符
1. 正则表达式 1. 什么是正则表达式? 正则表达式就是为了处理大量的字符串而定义的一套规则和方法. 通过定义的这些特殊符号的辅助,系统管理员就可以快速过滤,替换或输出需要的字符串. Linux正则 ...
- ES6特性之:参数默认值
作为一个开发者,跟进行业步伐是非常需要的,不能躺在现有的知识和经验温床上做美梦.JavaScript的ES2015标准(即我们说的ES6)在2016年已经被广泛应用了,还没开始使用的朋友,赶紧来磨一下 ...
- 51NOD 1006 最长公共子序列 Lcs 动态规划 DP 模板题 板子
给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为: abcicba abdkscab ab是两个串的子序列,abc也是,abca也是,其中abca是这两个字符串最 ...
- .net core 基于Dapper 的分库分表开源框架(core-data)
一.前言 感觉很久没写文章了,最近也比较忙,写的相对比较少,抽空分享基于Dapper 的分库分表开源框架core-data的强大功能,更好的提高开发过程中的效率: 在数据库的数据日积月累的积累下,业务 ...
- Spring源码学习01:IntelliJ IDEA2019.3编译Spring5.3.x源码
目录 Spring源码学习01:IntelliJ IDEA2019.3编译Spring5.3.x源码 前言 工欲善其事必先利其器.学习和深读Spring源码一个重要的前提:编译源码到我们的本地环境.这 ...
- IBM Rational Rose软件下载以及全破解方法
最近忙着作业,软件设计的类图着实难画,于是整理了rose的下载和破解方法 Rational Rose是Rational公司出品的一种面向对象的统一建模语言的可视化建模工具.用于可视化建模和公司级水平软 ...
- 面试之JS深拷贝的实现
在面试中你是否遇到过如下场景: Q:小朋友,你是否了解如何拷贝一个对象? R:此时,机智的你可能会想到 Object.assign({}, obj); Q:那如何深拷贝一个对象呢? R:机智的你 JS ...