图片标签
图片标签基础
基本语法与图片格式
html
<img src="image.jpg" alt="描述文本">支持的图片格式：
- 常见格式：JPG/JPEG、PNG、GIF、WebP、SVG、BMP
- 不支持的格式：PSD、AI等设计源文件
现代最佳实践
推荐使用WebP格式，它在保持质量的同时有更好的压缩率
图片路径详解
相对路径 vs 绝对路径
| 类型 | 示例 | 适用场景 |
|---|---|---|
| 相对路径 | ../images/photo.jpg | 项目内部资源 |
| 绝对路径(本地) | C:/project/images/photo.jpg | 本地开发(不推荐) |
| 绝对路径(网络) | https://example.com/image.jpg | 外部资源引用 |
路径解析示例：
项目结构：
├── index.html
├── assets/
│├── images/
││└── logo.png
│└── css/
└── about/
└── team.htmlhtml
<!-- 从team.html引用logo.png -->
<img src="../assets/images/logo.png" alt="公司Logo">路径注意事项
- 避免使用本地绝对路径，会导致其他设备无法访问
- 网络路径要确保URL稳定可用
- 路径区分大小写(尤其在Linux服务器)
核心属性解析
基本属性表
| 属性 | 说明 | 示例 | 是否必需 |
|---|---|---|---|
| src | 图片源 | src="logo.png" | 是 |
| alt | 替代文本 | alt="公司标志" | 强烈推荐 |
| width | 宽度(px) | width="200" | 可选 |
| height | 高度(px) | height="100" | 可选 |
| title | 悬停提示 | title="点击查看大图" | 可选 |
现代替代方案
已废弃属性替代方案：
| 废弃属性 | CSS替代方案 | 示例 |
|---|---|---|
| align | float/text-align | float: left |
| border | border | border: 1px solid #ccc |
| hspace | margin | margin: 0 10px |
| vspace | margin | margin: 10px 0 |