面试题之HTMl篇（1）

1.src和href区别

src用于替换当前元素，href用于在当前文档和引用资源之间确认联系
（1） src
src是source缩写，指向外部资源位置，在请求src资源时会将其指向的资源下载并应用到文档内；

<script src="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源下载直到该资源加载编译执行完成，这也是为什么要把js脚本放在底部而不是头部。
（2） href
href是指向网络资源所在位置，建立和当前元素或文档之间链接；

<link href="test.css" rel="stylesheet"/>

2.DOCTYPE(文档类型)作用

DOCTYPE是HTMl5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器应该以什么样的文档类型定义来解析文档，必须声明在HTMl文档第一行。
浏览器渲染页面的两种模式

• CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。在标准模式下，浏览器以其支持的最高标准呈现页面。
• BackCompat：怪异模式，浏览器使用自己的怪异模式渲染页面。在怪异模式中，页面以一种比较松散的向后兼容方式展示。

3.script标签中defer和async区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。不会等待后续文档元素加载，读取到就会开始加载和执行，阻塞了后续文档加载；
defer和async属性都是去异步加载外部JS脚本文件，它们都不会阻塞页面解析

• 执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序来执行；
• 脚本是否并行执行：async属性表示后续文档的加载和执行与js脚本的加载和执行是并行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载（此时仅加载不执行）是并行进行的（异步），js脚本需要等到文档所有元素解析完成以后才执行，DOMContentLoaded事件触发执行之前。

4.img的srcset属性作用

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了img标签的srcset属性。srcset属性用于设置不同屏幕密度下，img会自动生成不同的图片

<img src="image-128.png" srcset="image-256.png 2x" />