为了更好的学习好前端，我接下来会整理前端从html、css、js的经典面试题，这个是由我们艾编程清心老师和arry老师精心整理出来的重点面试题，大家可以留意下，学会了，对于你接下来找工作以及查漏补缺学习非常有帮助！
内容大纲：
- src和href的区别;
- script 标签中 defer 和 async 的区别;
- 常用 meta 标签有哪些;
- img的srcset和sizes属性的作用;
1、src和href的区别
src 和 href 都是用来引用外部的资源，它们的区别如下： src: 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。 href : 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。常用在 a、link 等标签上。
2、script 标签中 defer 和 async 的区别？
如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。 defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下： 执行顺序: 多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行； 脚本是否并行执行：async 与 defer 属性都会并行加载，但是async加载完后会立即执行, 阻塞其他任务的执行, defer 会最后再执行
3、常用 meta 标签有哪些？
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等
- charset, 用来描述 HTML 文档的编码类型
- <meta charset="UTF-8">
- keywords
- <meta name="keywords" content="关键词" />
- description
- <meta name="description" content="页面描述" />
- refresh 页面重定向和刷新
- <meta http-uquiv="refresh" content="0;url=" />
- viewport 适配移动端， 控制视口大小和比例
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- robots 搜索引擎方式
- <meta name="robots" content="index,follow" />
- 其中，content 参数如下：
- all, 文件被检索， 链接可被查询
- none, 文件不可检索，链接不可查询
- index, 文件可检索
- follow, 链接可被查询
- noindex 文件不可检索
- nofollow 链接不可查询
4、img的srcset和sizes属性的作用？
代码语言：javascript复制<img src='' srcset='' size=''srcset属性 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 srcset属性格式：图片地址 宽度描述w 像素密度描述x，多个资 源之间用逗号分隔 <img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />上面代表示，当浏览器宽达到800px，则加载middle.jpg，达到1400px，则加载big.jpg。 注意： 像素密度描述只对固定宽度图片有效。
sizes属性： 浏览器提供一个预估的图片显示宽度 属性格式：媒体查询 宽度描述（支持px），多条规则用逗号分隔。 <img src="" srcset="" sizes="(max-width: 320px) 300w, 1200w"/> 以上代码表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。
