背景
今天是我面试准备第二天
本人情况：三年前端，想要跳槽，复习一下面试怎么造火箭吧🚀
技能上，vue 用的多一些，其他的react, webpack, node 等等属于不常用技能，日常拧螺丝是够的，造火箭还要再复习复习
内容
今日复习的内容是HTML 的一些基础知识，参考的是 @CUGGZ 大佬的文章「2021」高频前端面试题汇总之HTML篇，有不少学到的东西。
1. src和href的区别
src和href都是用来引用外部的资源，它们的区别如下：
- src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到
该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。 - href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，
就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。
第一道题就把我整懵了。我百度了一下一些人的回答情况，都是几年前的答案，都确定的说 src 会阻塞渲染，但是这个有点违反常识，我自己测试发现，script 会阻塞，img 是不会阻塞的。下载那个a 标签的资源一般点击后才会下载
4. script标签中defer和async的区别
两者都是用于script 异步下载，不阻塞页面渲染
- async 异步下载完后立即执行，执行期间阻塞页面渲染，多个async script 文件，不能保证按顺序执行
- defer 异步下载，等待页面渲染完毕后才执行，DOMContentLoaded 之前，多个defer script 文件，按顺序执行
5. 常⽤的meta标签有哪些
charset keywords description refresh viewport robots
7. img的srcset属性的作⽤？
srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片
15. Canvas和SVG的区别
SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。
其特点如下：
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。 其特点如下：
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
20. 说一下 HTML5 drag API
- dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
- darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
- dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
- dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
- dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
- drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
- dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。
