src和href的区别？
相同点：都是用来引用外部的资源文件的
不同点：
1. 使用src进行资源加载的时候，会阻塞后面的任务进行
2. 使用href进行加载资源的时候，属于并行加载，不会阻塞
一般使用<script src="XXX">的时候，都建议放在页面最底部，最后一步操作就不会阻塞其它资源执行了
文档声明的DOCTYPE的作用？
浏览器有两种解析模式：严格模式和混杂模式
严格模式：按照W3C标准解析
混杂模式：兼容模式，兼容老的浏览器
声明：<!doctype html>目的就是让浏览器进入严格模式，按照HTML5规范，W3C标准解析
行内元素有哪些？块级元素有哪些？
行内元素：a span img strong small sub sup button u等标签
块级元素：div ul li ol h1 h2 h3等等h系列标签 p标签 header section aside footer
script标签中defer和async的区别？
1. 首先如果只是<script src='XXXX'>这种写法，当浏览器执行到这段代码时，就会先去执行加载这块资源，阻塞后面的文档解析。举个例子也就是：如果我执行的<script src='XXXX'>这个资源需要5s，后面的文档的解析需要等到5s后才能开始继续进行。然后defer和async的属性，主要就是解决以上同步执行阻塞的问题，可以达到异步加载资源的效果。
2. 其实说到资源加载我们还有多懂一个概念就是：这个过程中，有加载资源阶段 和 执行阶段。 举个例子： 我们平时很多人要去玩王者荣耀，这个游戏里面经常会打开界面让我们开始下载压缩包资源， 那这个过程就和script里面加载资源阶段一个道理， 然后我们游戏压缩包资源下载好了，要去启动游戏了，启动游戏到进入游戏界面大概需要1s，这个过程就和script里面执行阶段一个道理。
3. 所以我们了解了这俩个概念后，来看defer和async，结论就是： defer和async在加载资源阶段都是并行的， 区别在于async 加载资源阶段下载完毕后，进入到执行阶段会阻塞主线程。 而defer优先级就低了很多，只有主线程要做的事情都处理完成，到最后才开始进入他的执行阶段开始使用。举个例子： 俩个组长（async组长和defer组长）手上都有自己的活在做，所以把加载资源的活交给了各自的小弟并行去做， 当各自小弟安排的活做好了告诉自己组长，如果是async组长那就是比较高效，直接停下手上活，把这个小弟做好的活演示下，演示完成后继续做手上的活。 defer组长就是比较佛系，虽然小弟和他说东西做好了，可是他还是把自己手上活全部做完了，到最后再去演示小弟做出的东西。
共同点：都可以并行加载JS文件，而且不会阻塞页面的加载
不同点：
1. defer加载完以后，它会等整个页面加载完成以后再执行JS
2. asyn是页面加载完以后，它会立即执行JS，所以说 如果对JS执行顺序有严格要求的话，建议还是使用defer来进行加载
CSS选择器及其优先级？
对于选择器的优先级权重：
1. 标签选择器、伪类选择器：1
2. 类选择器、伪类选择器、属性选择器：10
3. id选择器：100
4. 内联样式：1000
注意事项：
!important声明的样式的优先级最高；
如果优先级相同的情况下，则最后出现的样式生效；
继承得到的样式优先级最低；
通用选择器 （*）、子选择器（>）和相邻同胞选择器（+）并不在这个四个等级内，所以它们的权值都为0；
样式表的来源不同时，优先级顺序为：内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式；
display的属性值和作用？
none元素是不显示，会从文档流中移除；
block块类型，默认的宽度是父元素宽度，可设置宽高，换行显示；
inline行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block默认宽度为内容宽度，可以设置宽高，同行显示。
list-item像块类型元素一样显示，并添加样式列表标记。
table此元素会作为块级表格来显示。
display的block、inline和inline-block的区别？
block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；
inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
inline-block： 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。
隐藏元素的方法有哪些？
display: none：该元素不会在页面中占置，点击响应事件也不会触发。
visibility: hidden：元素在页面中仍占据空间，点击响应事件也不会触发。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。元素仍在页面中占据位置，点击响应事件也不会触发。 （和visibility: hidden一样的效果）
opacity: 0：将元素的透明度设置为 0，元素在页面中仍占据空间，点击响应事件会触发。
position: absolute：使用绝对定位将元素移出可视区域内，来实现元素的隐藏。
z-index: 负值：来使其他元素遮盖住该元素，来实现隐藏。
Link和@import的区别？
相同点： 它们都是可以用来引用CSS样式的
不同点：
1. link是并发加载， @import会被阻塞，需要等网站加载完毕才开始加载
2. @import是CSS高版本提出的，对老的浏览器兼容不友好
3. @import只能加载CSS， link出了能加载CSS，其他的一些也可以