在HTML中，<img>标签用于嵌入图片。它是一个自闭合标签，意味着它没有结束标签。<img>标签的属性可以控制图片的显示方式和来源。以下是<img>标签的使用和属性的详细介绍。
<img>标签的基本用法
基本的<img>标签只需要src属性来指定图片的路径。
<img src="image.jpg" alt="描述性文字">
<img>标签的属性
src
指定图片的URL地址。
alt
提供图片的替代文本，用于图片无法显示时显示，同时对搜索引擎优化（SEO）有帮助。
title
提供图片的额外信息，通常以工具提示的形式显示。
width和height
指定图片的宽度和高度，可以是像素或百分比。
style
允许直接在HTML中使用CSS样式来控制图片的显示。
常用网页图片格式
JPG
适用于颜色丰富的照片，有损压缩，文件体积小。
PNG
支持透明度，无损压缩，适合图标和背景透明图片。
GIF
支持动画，颜色数量有限，适合简单动画。
BMP
位图格式，通常文件体积较大，不常用于网页。
WEBP
由Google开发，支持无损和有损压缩，适合高质量的图片。
Base64
一种编码方法，可以将图片直接嵌入HTML或CSS中。
SVG
矢量图格式，适合图标和图形，可无限放大不失真。
图片路径
相对路径
相对于当前页面的路径。
<img src="./images/picture.jpg" alt="图片描述">
绝对路径
完整的URL地址，可以是本地的也可以是网络上的。
<img src="http://www.example.com/images/picture.jpg" alt="图片描述">
本地图片
存储在本地服务器上的图片。
<img src="/images/picture.jpg" alt="图片描述">
网页图片
存储在其他网站上的图片。
<img src="https://www.qianduange.cn/upload/article/picture.jpg" alt="图片描述">
Base64编码示例
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64编码的图片">
结语
正确使用<img>标签和它的属性可以增强网页的视觉吸引力和用户体验。了解不同图片格式的特点和使用场景，以及如何指定图片路径，是每个前端开发者的必备技能。希望这篇博客能帮助你更好地掌握<img>标签的使用。
这篇博客详细介绍了HTML中的`<img>`标签的使用和属性，以及常用网页图片格式和路径的相关知识。希望这能帮助你更好地理解如何在网页中嵌入和使用图片。
