文章最后更新时间：2026年01月04日
TIP
深入浅出多媒体标签的定义 和 最佳实践
1、图片标签 img
TIP
图片标签是实际开发中常用的标签，标准和规范也尤其重要
1.1、语法和基础
TIP
<img>标签用来在网页中插入图片
<img src="images/logo.png" />
img 是 英语单词
image（图片）的缩写src 是 英语单词
source（来源）的缩写"" 中是 图片的 存储目录和完整的文件名
注：
图片必须存放在项目文件夹中，如：images 中
图片只是引入到网页中，本质上没有被插入到网页中
1.2、img 标签的 alt 属性
TIP
alt 属性是英语
alternate（代替者）缩写，对图像的文本描述，不强制若由于某种原因无法加载图像，浏览器会在页面上显示 alt 属性中的备用文本
供视力不方便的用户使用的网页朗读器，也会朗读 alt 中的文本
对于搜索引擎优化友好，告诉搜索引擎图片的含义，利于搜索引擎爬虫抓取
<img src="images/logo.png" alt="老六博客Logo" />
1.3、img 标签的 width、height 属性
width、height 属性设置图片宽度和高度，单位是 PX（像素），可不写
如果省略其中一个属性，则表示按原始比例缩放图片
<img src="images/logo.png" alt="老六博客Logo" width="200" />
1.4、图片标签规范
TIP
PC 端 img 图片必须填写 src、width、height、alt 属性，统称图片标签的四要素
移动端必须填写 alt 属性
alt 不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称
2、网页上支持的图片格式
| 支持格式 | 描述 |
|---|---|
.bmp | Windows 画图软件默认保存的格式，位图 |
.jpeg（.jpg） | 有损压缩图片，通常用于照片显示 |
.png | 便携式网络图像，用于 logo，背景图形等。支持透明和半透明 |
.gif | 动画 ，如：表情包 |
.svg | 矢量图片 |
.webp | 最新的压缩算法，非常优秀的图片格式 |
3、相对路径和绝对路径
TIP
深入相对路径 和 绝对路径本质
3.1、相对路径
从当前网页出发，要找到图片的路径就叫 相对路径
<img src="images/logo.png" /><img src="../images/logo.png" /><img src="../../images/logo.png" />.....
../表示回退上一级目录
./表示当前目录通过
cmd命名行dir命令可查
3.2、绝对路径
描述文件或文件夹的精准完整地址
<img src="D:\web\icoding-web\images\logo.png" /><img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png"/>
文章版权声明：除非注明，否则均为tools工具箱原创文章，转载或复制请以超链接形式并注明出处。
