【HTML】图片标签（img）

图片标签（img）

图片标签用于向当前页面中引入一个外部图片。
使用img标签来引入外部图片，img标签是一个自结束标签。
img这种元素属于替换元素（块元素和行内元素之间，具有两种元素的特点）。

属性

src属性

src 属性指定的是外部图片的路径（路径规则和超链接是一样的，可以是绝对路径，也可以是相对路径）。

alt属性

alt属性指定图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示。
搜索引擎会根据alt中的内容来识别图片，屏幕阅读器等可能会用到alt属性的内容，但是目前我们用到的概率不大。

图片的宽高

width属性指定图片的宽度（单位是像素）。
height属性指定图片的高度（单位是像素）。
宽度和高度如果只修改了一个，则另一个会等比例缩放，如果两个都做了修改，则以设置的数值为准。

注意

一般情况下在PC端，不建议修改图片的大小。大图缩小，浪费内存；小图放大，容易失真，需要多大的图片就裁多大。
但是在移动端，经常需要对图片进行缩放（一般是大图缩小，来确保图片的清晰度，很少小图放大使用）。

图片的格式

jpge(jpg)

支持的颜色比较丰富，不支持透明效果，不支持动图。
一般用来显示照片。

gif

支持的颜色比较少，支持简单透明，支持动图。
一般用来显示颜色单一的图片、动图。

png

支持的颜色丰富，支持复杂透明，不支持动图。
一般用来显示颜色丰富、复杂透明图片（专为网页而生）。

webp

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。
它具备其他图片格式的所有优点，而且文件还特别小。
缺点：兼容性不好。

base64

将图片使用base64进行编码，这样可以将图片转换为字符，通过字符的形式来引入图片。
一般都是一些需要和网页一起加载的图片才会使用base64。

使用规则

1、效果一样，用小的；
2、效果不一样，用效果好的，但是文件不能太大。
文件大小和展示效果要综合考虑。