一、图片标签
图片标签的基本使用方式：<img src="" alt="" title=""/>
- src 用来指定图片的路径，可使用相对路径或绝对路径；
- alt 用来指定图片无法显示时，浏览器显示的文字；
- title 用来指定将鼠标放在图片上时的提示信息；
有如下代码：
<img
src="https://pics5.baidu.com/feed/42a98226cffc1e17ea273e1a00e82605728de984.jpeg?token=4cbdbe3238d0761dcc71727d73aae348"
alt="哆啦 A 梦"
title="哆啦 A 梦" />
在浏览器中显示为：
在使用图片的过程中，如果是本地图片文件，一般使用相对路径，这样整个文件夹在移动之后，不需要重新配置图片路径。
二、图片格式
在网页中有两种图片格式，即位图和矢量图。
1、位图
位图又被称作“像素图”，是由像素点组成的图片，放大缩小图片后会出现失真。
- jpg（jpeg）：可以很好的处理大面积色调的图片，适合存储颜色丰富的复杂图片，但体积较大，不支持透明；
- png：是一种无损格式，可以无损压缩以保证页面打开速度，并且体积小，支持透明，不适合存储颜色丰富的图片；
- gif：图片效果差，但适合制作动画；
- WebP：具有更优的图像压缩算法，能带来更小的体积和无差别的肉眼观察体验，已在各大互联网公司广泛使用。
2、矢量图
矢量图又被称作“向量图”，它是利用计算机图形学中点、直线或多边形等表示出来的几何图像，其优点是图片放大缩小或旋转都不会使图片失真，缺点是难以表现色彩丰富的图片效果。
- svg：目前首选的矢量图格式，图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑但色彩不够丰富。
- flash：退出历史的重量级网页矢量图格式，图像容量小、图像放大不失真、支持透明背景和半透明色彩、图像边缘光滑、还可以制作动画、可编写交互；但不支持搜索引擎、运行慢、浏览器需要装插件才可支持。
3、位图和矢量图的区别
- 位图用于显示色彩丰富的图片，矢量图不适于显示色彩丰富的图片；
- 位图的组成单位是像素，矢量图的组成单位是数学向量；
- 位图受分辨率影响，放大缩小会失真，矢量图不受分辨率影响，放大缩小不失真；
- 网页中的图片绝大多数都是位图。
