HTML 图像

图像是网页内容的重要组成部分，可以极大地增强页面的吸引力和信息传达能力。HTML 使用 <img> 标签来在页面上嵌入图像。

<img> 是一个空元素，它只包含属性，没有结束标签。

src 属性 - 指定图像源

src (source) 属性是 <img> 标签最重要的属性，它指定了要显示的图像的路径或 URL。

<img src="image_url">

• 相对路径: 指向网站内部的图片。

  <img src="images/my-cat.jpg">

• 绝对路径: 指向另一个网站上的完整 URL。

  <img src="https://www.example.com/images/logo.png">

alt 属性 - 提供替代文本

alt (alternative text) 属性为图像提供了替代文本。它有两个至关重要的作用：

1. 可访问性 (Accessibility): 屏幕阅读器会朗读 alt 文本，帮助视觉障碍用户理解图像内容。
2. 容错性: 如果图像因任何原因（如路径错误、网络中断）无法加载，浏览器将显示 alt 属性中的文本。

一个 alt 属性写得好的 <img> 标签是必不可少的。

<img src="programming_cat.jpg" alt="一只戴着眼镜、正在认真敲代码的猫">

如果图片加载失败，用户会看到 "一只戴着眼镜、正在认真敲代码的猫" 这段描述。

width 和 height 属性 - 控制图像尺寸

你可以使用 width 和 height 属性来指定图像的宽度和高度（以像素为单位）。

<img src="logo.png" alt="网站Logo" width="500" height="150">

为什么指定尺寸很重要？

当浏览器加载页面时，如果 <img> 标签指定了 width 和 height，浏览器会立即为该图像预留出相应的空间。这样，即使图像还没有完全下载完成，页面的整体布局也不会因为图像的载入而发生跳动（这被称为布局偏移 (Layout Shift)），从而提供了更好的用户体验。

注意: 虽然可以直接用属性设置尺寸，但在响应式设计中，更常见的做法是使用 CSS 来灵活地控制图像大小（例如，使用百分比宽度）。

将图像用作链接

要将图像变成一个可点击的链接，只需将 <img> 标签嵌套在 <a> 标签内部即可。

<a href="https://www.example.com">
  <img src="logo.png" alt="点击访问我们的网站">
</a>

常见的图像格式

• JPEG/JPG: 最适合照片。它是一种有损压缩格式，可以在保持可接受的图像质量的同时，大幅减小文件大小。
• PNG: 最适合需要透明背景的图像（如图标、Logo）或包含文本、线条的图形。它是一种无损压缩格式。
• GIF: 支持动画。适用于简单的动画表情或图标。
• SVG: 可缩放矢量图形 (Scalable Vector Graphics)。它基于 XML，无论如何缩放都不会失真，非常适合 Logo 和图标。