前端常见面试题十五
目录：
1、link和import的区别
2、HTML5为什么只需要写<!
3、doctype作用，标准模式和兼容模式有什么区别
4、请写出html5新增的API
5、CSS优先级算法如何计算？
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不是的。
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的使用
<svg>
<rect>
<circle>
<line>
<path>
<ellipse>
<polygon>
HTML中使用SVG
在html中直接写 <svg>
<embed src="" type="image/svg+xml" width="" height="">
<object data="" type="image/svg+xml" width="" height="">
<iframe src="">
地理定位 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 才能获取位置
多媒体 相关标签
<video> 视频
<audio> 音频
<source>
<track>
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，高于外部定义。
如：<div style=”color: red”>sjweb</div>
外部定义指经由<link>或<style>标签定义的规则；
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，
然后在比较取舍时按照从左到右的顺序逐位比较。
