前端面试题

1、link和import的区别

1、link属于html标签,而@import是css提供的。

2、页面被加载时,link会同时被加载,而@import引用的css会等到页面加载结束后加载。

3、link是html标签,因此没有兼容性,而@import只有IE5以上才能识别。

4、link方式样式的权重高于@import的。

2、HTML5为什么只需要写

HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。

而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为。

其中,SGML是标准通用标记语言,简单的说,就是比HTML,XML更老的标准,这两者都是由SGML发展而来的。BUT,HTML5不是的。


这是文档类型声明,它声明了文档类型为html5,它告诉浏览器和其他开发者,该文档使用的是html5标准和应该使用html5标准。


3、doctype作用,标准模式和兼容模式有什么区别

告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

区别:

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

附代码:https://www.cnblogs.com/sunhe/p/4994058.html

4、请写出html5新增的API

SVG    定义  矢量图工具, 绘图

SVG在H5标准之前就有了, IE对SVG的兼容性非常好

svg与canvas区别

canvas位图, svg是矢量图

canvas使用JavaScrpt绘图, svg使用XML来绘图

canvas不支持事件(借助库) svg支持事件

svg的应用领域    矢量图标      地图

SVG的使用

HTML中使用SVG

在html中直接写

地理定位 geolocation

navigator.gentlocation

getCurrentPosition(successCallback, errorCallback, options)  获取当前的地理位置

watchPosition(successCallback, errorCallback, options) 监听地理位置变化

clearWatch()  停止位置监听

position对象

获取位置成功会调用 successCallback回调函数, 自动接收position对象

coords

longitude 维度

latitude  精度

altitude  海拔

handing 前进方向

speed        速度

altitudeAccuracy 海拔经度

accuracy  坐标经度

timestamp 时间戳

error对象

获取位置失败,调用errorCallback回调,调用 error对象

code 错误代码

message 错误信息

选项 options

timeout      超时时间

enableHighAccuracy    是否最优

maximunAge 最大缓存时间

注意

chrome浏览器只有在https方式下打开的网页才能获取地理位置

手上上的大部分浏览器,微信 也要求https 才能获取位置

多媒体      相关标签

视频

音频

DOM(video/audio)

属性

volume 音量

muted 是否静音

方法

play()

pause()

事件

onplay

视频插件

ckplayer

jplayer

flowplayer

video.js

flv.js

拖拽

属性

draggable 设置为true 元素就可以被拖拽

事件

ondrag

ondragstart

ondragend

ondragenter

ondragleave

ondragover

ondrop

dataTransfer

获取 是dragEvent的属性

getData()

setData()

附图片:https://blog.csdn.net/qq_42074075/article/details/88861259

5、CSS优先级算法如何计算?

选择符Specificity值列表:

规则:

行内样式优先级Specificity值为1,0,0,0,高于外部定义。

如:

sjweb

外部定义指经由或标签定义的规则;

2.!important声明的Specificity值最高;

3.Specificity值一样的情况下,按CSS代码中出现的顺序决定,后者CSS样式居上;

4.由继续而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

算法:

当遇到多个选择符同时出现时候

按选择符得到的Specificity值逐位相加,

{数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

就得到最终计算得的specificity,

然后在比较取舍时按照从左到右的顺序逐位比较。

姓名:蒋伟_fc89

转载于:https://www.jianshu.com/p/c80627fbc109

来源:

著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(前端面试题)