Appearance
5. HTML图片标签（网页插入图片，提升页面丰富度，SEO优化）
5.1 img标签核心属性：src
基本用法
<img> 标签用于在网页中插入图片，是一个自闭合标签。
html
<img src="图片路径" alt="替代文本">src属性
src 属性指定图片的路径，可以是相对路径或绝对路径。
相对路径：相对于当前HTML文件的路径
src="image.jpg"：同一目录下的图片src="images/image.jpg"：子目录下的图片src="../image.jpg"：父目录下的图片
绝对路径：完整的URL路径
src="https://example.com/image.jpg"：外部图片
新手避坑
- 确保图片路径正确，否则图片无法显示
- 检查图片文件是否存在
- 注意路径中的大小写，某些服务器区分大小写
5.2 alt属性（SEO重点）
基本用法
alt 属性为图片指定替代文本，当图片无法加载时显示。
html
<img src="image.jpg" alt="示例图片">SEO重要性
- 提升搜索引擎收录：搜索引擎无法直接识别图片内容，通过
alt属性可以了解图片的含义 - 提高可访问性：屏幕阅读器会读取
alt属性，帮助视力障碍用户理解图片内容 - 图片加载失败时的替代方案：当图片因网络问题或路径错误无法加载时，显示
alt文本
最佳实践
alt属性应该简洁明了，准确描述图片内容- 避免使用"图片"、"照片"等无意义的描述
- 对于装饰性图片，可以使用空的
alt属性：alt=""
5.3 图片尺寸控制
width和height属性
可以使用 width 和 height 属性控制图片的尺寸。
html
<img src="image.jpg" alt="示例图片" width="300" height="200">注意事项
- 最好同时指定
width和height，这样浏览器可以预留空间，避免页面布局跳动 - 如果只指定一个属性，浏览器会保持图片的原始宽高比
- 也可以使用CSS来控制图片尺寸
5.4 图片格式推荐
常用图片格式
| 格式 | 扩展名 | 特点 | 使用场景 |
|---|---|---|---|
| JPEG | .jpg, .jpeg | 有损压缩，文件小 | 照片、复杂图像 |
| PNG | .png | 无损压缩，支持透明 | 图标、徽标、需要透明背景的图像 |
| GIF | .gif | 支持动画 | 简单动画、图标 |
| WebP | .webp | 更高压缩率，支持透明和动画 | 现代浏览器推荐使用 |
选择建议
- 照片：使用JPEG格式
- 图标和徽标：使用PNG格式
- 简单动画：使用GIF格式
- 现代网站：考虑使用WebP格式，提高加载速度
5.5 新手避坑：图片路径错误
常见问题
- 路径拼写错误：检查路径中的拼写和大小写
- 目录结构错误：确认图片文件的位置
- 相对路径使用错误：理解相对路径的表示方法
- 外部图片链接失效：确保外部图片URL有效
解决方案
- 检查路径：确认图片文件的实际位置
- 使用绝对路径：对于外部图片，使用完整的URL
- 测试路径：在浏览器中直接访问图片路径，确认是否可以打开
- 使用相对路径：对于本地图片，使用相对路径时要注意目录结构
5.6 实战：给文章页面插入图片
实战目标
给文章页面插入图片，并优化图片的SEO属性。
代码示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML图片标签实战</title>
</head>
<body>
<h1>如何使用HTML图片标签</h1>
<p>在网页中插入图片可以使内容更加丰富和直观。下面是一个示例图片：</p>
<!-- 插入图片，添加alt属性优化SEO -->
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=web%20development%20workspace&image_size=landscape_16_9" alt="网页开发工作环境" width="600" height="400">
<p>图片标签的基本语法是：</p>
<code><img src="图片路径" alt="替代文本" width="宽度" height="高度"></code>
<h2>图片格式选择</h2>
<p>不同的图片格式有不同的特点和使用场景：</p>
<h3>JPEG格式</h3>
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=photograph%20of%20nature&image_size=landscape_16_9" alt="自然风景照片" width="400" height="300">
<p>适合照片和复杂图像，文件较小。</p>
<h3>PNG格式</h3>
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=logo%20design&image_size=square" alt="公司标志" width="200" height="200">
<p>支持透明背景，适合图标和徽标。</p>
<h3>GIF格式</h3>
<img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=simple%20animation&image_size=square" alt="简单动画" width="200" height="200">
<p>支持动画，适合简单的动态效果。</p>
<h2>SEO优化建议</h2>
<ul>
<li>为每个图片添加有意义的 <code>alt</code> 属性</li>
<li>使用描述性的文件名</li>
<li>优化图片大小，提高加载速度</li>
<li>使用适当的图片格式</li>
</ul>
</body>
</html>小结
HTML图片标签是网页中不可或缺的元素，通过合理使用 src、alt、width 和 height 等属性，可以在网页中插入图片并优化其显示效果。同时，注意SEO优化，为图片添加有意义的 alt 属性，提升页面的搜索引擎排名。