前端进阶高薪必会的4个html重难点知识梳理

为了更好的学习好前端，我接下来会整理前端从html、css、js的经典面试题，这个是由我们艾编程清心老师和arry老师精心整理出来的重点面试题，大家可以留意下，学会了，对于你接下来找工作以及查漏补缺学习非常有帮助！

内容大纲：

1. src和href的区别;
2. script 标签中 defer 和 async 的区别;
3. 常用 meta 标签有哪些;
4. 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属性的作用？

<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。