美文网首页
前端面试题

前端面试题

作者: 梁戈霄 | 来源:发表于2019-07-19 08:29 被阅读0次

    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中直接写 <svg>

    地理定位 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

    来源:简书

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

    相关文章

      网友评论

          本文标题:前端面试题

          本文链接:https://www.haomeiwen.com/subject/abidlctx.html