写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

【往期回顾】

【其他系列】

1. 图片标签

1.1 基本使用 总结： 像素（ px ）是一种单位，学到 CSS 时，我们会详细讲解。 尽量不同时修改图片的宽和高，可能会造成比例失调。 暂且认为 img 是行内元素（学到 CSS 时，会认识一个新的元素分类，目前咱们只知道：块、行内）。 alt 属性的作用： 搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。 盲人阅读器会朗读 alt 属性的值。 1.2 路径的分类 相对路径：以当前位置作为参考点，去建立路径。 注意点： 相对路径中的 ./ 可以省略不写。 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。 绝对路径：以根位置作为参考点，去建立路径。 本地绝对路径： E:/a/b/c/奥特曼.jpg 。（很少使用） 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。 注意点： 使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。 使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入失败。 1.3 常见图片格式 jpg 格式： 概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。 主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网页中很常见。 png 格式： 概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。 主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配图等。 bmp 格式： 概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。 主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。 使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使用） gif 格式： 概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。 主要特点：支持的颜色较少、支持简单透明背景、支持动态图。 使用场景：网页中的动态图片。 webp 格式： 概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。 主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。 使用场景：网页中的各种图片。 base64 格式 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。 原理：把图片进行 base64 编码，形成一串文本。 如何生成：靠一些工具或网站。 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。 使用场景：一些较小的图片，或者需要和网页一起加载的图片。 图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。

 2. 超链接

结语