前端第二章：9.HTML如何在网页中添加图片（img标签使用方法，以及img标签属性：alt、height、width）；图片格式选择

一、img 标签简介

1.是自结束标签
2.用于向当前页面引入一个 外部图片
3.可以引入 gif 动图
4.img 是 替换元素，具有块元素和行内元素的某些特点

二、img标签基础

0.使用img标签将 图片 引入 网页！
1.代码：

<img src="图片的相对路径/绝对路径/网页链接">

2.示例（图片链接）：

3.引用成功：

三、img标签 -> alt属性

1.作用：
1.1 对图片的描述，一般不会显示这个文本。如果图片加载失败，那么有些浏览器就会显示 alt 中的字样，就像这样：

1.2 alt属性能够被搜索引擎识别！所以你搜索“松鼠”的时候，就出现了松鼠的图片

2.代码：

<img src="松鼠的图片地址" alt="松鼠">

四、img标签 -> width属性

1.用来设置图片的宽度
2.示例：我们要将图片的宽度设置成500像素

<img width="500" src="图片地址" alt="图片介绍">

五、img标签 -> height属性

1.用来设置图片的高度
2.示例：我们要将图片的高度设置成1000像素

<img height="1000" src="图片地址" alt="图片介绍">

六、图片格式选择

0.加载速度极快，和网页同时加载：base64
1.透明效果（玻璃、水）：png
2.照片：jpg
3.logo：gif
4.效果优、显示好，但是兼容效果差：webp

5.将图片转换成编码：base64
我们可以直接将文本格式的base64文件内容复制进 src 属性中，然后就会直接显示这个图片