前端进阶高薪必会的4个html重难点知识梳理
为了更好的学习好前端，我接下来会整理前端从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属性的作用？
<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。
接下来还会分享54个《CSS高薪必会面试题》，电子书、《js高薪必会面试题》、《108个常用的CSS布局》等精心汇编内容，让你在自学的过程有更好的助力，大家有什么样的疑问可以联系我，可以邀请你进入我们的学习问答群，我们的老师会在群里每天给大家答疑问题，让我们一起加油！
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
- PC端项目开发（1个）
- 移动WebApp开发（2个）
- 多端响应式开发（1个）
共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
- 真机调试，云服务部署上线；
- Linux环境下 的 Nginx 部署，Nginx 性能优化；
- Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
- 企业项目域名跳转的终极解决方案，多网站、多系统部署；
- 使用 使用 Git 在线项目部署；
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条！老师会邀请你进入学习，并给你发放相关资料
