HTML图片标签img

1. 基本使用

1. 像素（ px ）是一种单位，学到 CSS 时，我们会详细讲解。
2. 尽量不同时修改图片的宽和高，可能会造成比例失调。
3. 暂且认为 img 是行内元素（学到 CSS 时，会认识一个新的元素分类，目前咱们只知道：块、行内）。
4. alt 属性的作用：

• 搜索引擎通过 alt 属性，得知图片的内容。—— 最主要的作用。
• 当图片无法展示时候，有些浏览器会呈现 alt 属性的值。
• 盲人阅读器会朗读 alt 属性的值。

2. 路径的分类

• 相对路径：以当前位置作为参考点，去建立路径
  

注意点：

• 相对路径中的./可以省略不写。
• 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

• 绝对路径：以根位置作为参考点，去建立路径。

• 本地绝对路径： E:/a/b/c/奥特曼.jpg 。（很少使用）
• 网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。

注意点：

• 使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
• 使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入
  失败。

3. 常见图片格式

3.1. jpg 格式：

• 概述：扩展名为 .jpg 或 .jpeg ，是一种有损的压缩格式（把肉眼不容易观察出来的细节
  丢弃了）。
• 主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
• 使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等 。—— 该格式网页中很常见。

3.2. png 格式：

• 概述：扩展名为 .png ，是一种无损的压缩格式，能够更高质量的保存图片。
• 主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
• 使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如 ：公司logo图、重要配图等。

3.3. bmp 格式：

• 概述：扩展名为 .bmp ，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
• 主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
• 使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片 。（网页中很少使用）

3.4. gif 格式：

• 概述：扩展名为 .gif ，仅支持256种颜色，色彩呈现不是很完整。
• 主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
• 使用场景：网页中的动态图片。

3.5. webp 格式

• 概述：扩展名为 .webp ，谷歌推出的一种格式，专门用来在网页中呈现图片。
• 主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
• 使用场景：网页中的各种图片。

3.6. base64 格式

• 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
• 原理：把图片进行 base64 编码，形成一串文本。
• 如何生成：靠一些工具或网站。
• 如何使用：直接作为 img 标签的 src 属性的值即可，并且不受文件位置的影响。
• 使用场景：一些较小的图片，或者需要和网页一起加载的图片。
  base64 格式无需进行http请求

图片的格式非常多，上面这些，只是一些常见的、我们前端人员常接触到的。