<img> 元素的基本语法
<img src="url" alt="description">
其中：src 属性指定图像文件的地址（URL）
alt 属性提供替代文本，在图像无法加载时显示
这是最基本的使用方式。示例：
<img src="logo.jpg" alt="代码号logo">
当图像文件与HTML文件位于同一目录时，只需提供文件名即可。其他情况下，可能需要使用相对路径或绝对路径。
图像文件的组织管理
网站开发中通常会将所有图像资源集中存放在名为"images"的文件夹中，便于统一管理。引用方式如下：
<img src="images/morning.jpg" alt早安图片">
如果图像存储在其他磁盘或目录中，需要提供完整路径：
<img src="/project/assets/images/nature.png" alt="自然风景" height="180" width="300">
注意：如果 src 属性中的URL地址拼写错误或无效，浏览器将显示破损图像图标并展示替代文本。
<img> 元素的核心属性
1. src（源地址）这个必需属性定义了图像资源的位置，可以是：
相对路径："/images/logo.png"
绝对路径："https://www.ebingou.cn/skin/ymxz/static/images/logo.png"
（这两个概念一定要牢记）
示例：
<img src="https://www.ebingou.cn/skin/ymxz/static/images/logo.png" alt="代码号logo">
2. alt（替代文本）当图像无法加载时显示此文本内容，对于辅助功能（如屏幕阅读器）至关重要，同时也有利于搜索引擎优化。
<img src="xuexihtml.jpg" alt="学习HTML">
图像尺寸设置
3. width 和 height这些属性以像素为单位定义图像的显示尺寸。也可以使用CSS进行更灵活的样式控制。
HTML属性方式：
<img src="xuexihtml.jpg" width="300" height="180" alt="学习html">
CSS样式方式：
<img src="animal.jpg" alt="动物图片" style="width:300px; height:180px;">
建议：始终指定图像的宽度和高度属性，以避免页面加载时的布局偏移和视觉闪烁。
图像样式设置
4. title（标题文本）当用户将鼠标悬停在图像上时显示的工具提示信息。
<img src="logo.png" alt="网站标志" title="示例网站标志">
5. border（边框）为图像添加边框效果。虽然在HTML中已不推荐使用，但仍然可用：
<img src="photo.jpg" alt="示例图片" border="2">
更标准的做法是使用CSS：
<img src="photo.jpg" alt="示例图片" style="border: 2px solid #000;">
图像对齐方式
6. align（对齐）用于设置图像相对于周围文本的对齐方式。虽然现已不推荐使用，但在旧代码中可能遇到。
<img src="picture.jpg" alt="侧边图片" align="right">
现代替代方案是使用CSS：
<img src="picture.jpg" alt="侧边图片" style="float: right;">
图像间距控制
7. hspace 和 vspace分别在图像周围添加水平和垂直间距。这些属性已过时，建议使用CSS margin属性替代。
传统方式：
<img src="photo.jpg" alt="带间距图片" hspace="20" vspace="30">
目前CSS方式：
<img src="photo.jpg" alt="带间距图片" style="margin: 30px 20px;">
图像链接功能
通过将 <img> 元素嵌套在 <a> 元素内，可以将图像作为超链接使用：
<a href="https://www.ebingou.cn/biancheng/">
<img src="https://www.ebingou.cn/skin/ymxz/static/images/logo.png" alt="代码号logo" width="300" height="100">
</a>
这种技术在图片库或需要预览放大图像的场景中特别有用。
动画图像（GIF）
相同的 <img> 标签可用于嵌入动画图像：
<img src="smiley.gif" alt="笑脸动画" style="width: 200px; height: 200px;">
响应式图像实现使用 srcset 和 sizes 属性可以根据屏幕尺寸或分辨率提供不同的图像资源：
<img
src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(max-width: 640px) 100vw, 50vw"
alt="响应式图像示例">
这有助于提升移动设备上的性能表现，根据需要加载适当尺寸的图像。
图像加载控制
8. loading（加载方式）此属性指定浏览器的图像加载行为，支持两种模式：
lazy：仅在图像进入视口时加载
eager：立即加载图像
<img src="ebingou.jpg" alt="横幅图像" loading="lazy">
图文混排效果使用 float 属性可以实现文本环绕图像的效果：
<p>
<img src="ebingou.gif" alt="笑脸表情" style="float:right;width:42px;height:42px;">
这段文字将环绕在图像的左侧，形成图文混排效果。
</p>
常见图像格式对比
| 格式 | 类型 | 后缀 |
|---|---|---|
| JPEG格式 | 摄影图像 | .jpg、.jpeg |
| 巴布亚新几内亚 | 透明图像 | .png |
| GIF 动图 | 动画/有限颜色 | .gif |
| SVG格式 | 可缩放的矢量图形 | .svg |
| ICO的 | 图标/网站图标 | .ico，.cur |
| APNG | 动画 PNG | .apng |
合规与性能优化
在使用图像时应遵循实践，确保网站在性能和可访问性方面达到优化标准。建议先对图像进行适当压缩和优化，避免因大尺寸图像导致页面加载延迟。始终提供具有描述性的替代文本，这不仅有助于屏幕阅读器用户理解内容，也能为搜索引擎提供有意义的上下文信息。
需要注意图像使用的版权问题，建议使用自主创作、已购买授权或明确允许使用的图像资源，以避免侵权风险。在可行的情况下，将图像托管在本地服务器或可信的CDN服务上，确保图像的稳定交付。
浏览器兼容性
| 浏览器 |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| img | 支持 | 支持 | 支持 | 支持 | 支持 |
HTML在属性和CSS样式方面提供了充分的灵活性，无论是展示静态图像还是动画内容。开发目标应始终聚焦于编写规范的代码和提供包容性用户体验，确保所有用户都能正常访问和理解图像内容。
