HTML 图像

HTML 图像

图像对于网页内容至关重要。<img> 元素允许您将图像嵌入到 HTML 文档中。

HTML 图像语法

图像使用 <img> 标签定义。它是一个空元素，意味着它没有闭合标签。

必需的属性是 src（源）和 alt（替代文本）。

<img src="image.jpg" alt="Description of the image">

• **src 属性：**指定图像文件的路径或 URL。
• **alt 属性：**为图像提供描述性文本。

alt 属性 - 可访问性

alt 属性对于可访问性和 SEO 至关重要：

• **屏幕阅读器：**屏幕阅读器将 alt 文本朗读给视障用户听。
• **损坏的图像：**如果图像加载失败（由于路径错误、网络错误等），浏览器将显示 alt 文本作为替代。
• **搜索引擎：**搜索引擎使用 alt 文本来理解图像内容。
• **上下文：**它为可能禁用图像的用户提供上下文。

好的 alt 文本应该简洁并准确描述图像的内容或功能。

<!-- 好的 alt 文本 -->
<img src="company-logo.png" alt="Example Corp logo">
<img src="chart-sales-q1.png" alt="Bar chart showing Q1 sales figures increasing each month">
<img src="icon-print.png" alt="Print this page">

<!-- 如果图像纯粹是装饰性的，请使用空的 alt 属性 -->
<img src="decorative-border.gif" alt="">

	alt 属性对于 <img> 元素是必需的，以便符合 HTML5 规范。省略它会损害可访问性。

图像大小 - width 和 height

使用 width 和 height 属性指定图像尺寸对于性能和用户体验至关重要：

<img src="photo.jpg" alt="A landscape photo" width="600" height="400">

为什么要指定尺寸？

• **防止布局偏移 (CLS)：**通过提供 width 和 height，浏览器可以在图像加载之前为其预留正确的空间量。这可以防止页面内容在图像加载时发生跳动，从而改善累积布局偏移指标。
• **更快的渲染：**帮助浏览器更快地布局页面。

width 和 height 的值默认解释为像素（不要添加 px）。

**关于 CSS 与 HTML 属性的注意事项：**虽然您也可以使用 CSS（width 和 height 属性）设置图像尺寸，但为了在初始页面加载期间预留空间，仍然建议设置 HTML 属性 width 和 height。然后可以使用 CSS 进行响应式调整（例如 max-width: 100%; height: auto;），而不会失去初始布局稳定性的优势。

图像路径

**同级文件夹：**如果图像与 HTML 文件位于同一文件夹中：

<img src="logo.png" alt="Logo">

**子文件夹：**如果图像位于子文件夹中（例如 images）：

<img src="images/profile.jpg" alt="Profile picture">

**父文件夹：**要向上移动一级：

<img src="../assets/icon.svg" alt="Icon">

**绝对 URL：**链接到另一个服务器上的图像：

<img src="https://www.example.com/images/banner.jpg" alt="Promotional Banner">

动图

您可以使用标准的 <img> 标签嵌入 GIF 或动画 WebP 等动图格式：

<img src="loading-spinner.gif" alt="Loading...">
<img src="animated-diagram.webp" alt="Diagram showing process flow">

考虑文件大小和性能。对于复杂的动画，使用 <video> 元素播放短时循环视频可能更高效。

将图像用作链接

将 <img> 标签嵌套在 <a>（锚点）标签内，使图像可点击：

<a href="https://www.example.com">
  <img src="logo.png" alt="Visit Example Corp" width="150" height="50" style="border: none;">
</a>

	通常的做法是使用 CSS（img { border: none; } 或内联 style="border: none;"）移除浏览器可能为链接图像添加的默认边框。

图像浮动（文本环绕）

使用 CSS 的 float 属性可以使文本环绕图像。

<p>
  <img src="avatar.jpg" alt="User avatar" style="float: left; margin-right: 10px;" width="50" height="50">
  This text will wrap around the image which is floated to the left. Add some margin to prevent text from touching the image directly.
</p>

<p style="clear: left;">This paragraph starts below the floated image because of 'clear: left'.</p>

<p>
  <img src="icon.png" alt="Info icon" style="float: right; margin-left: 10px;" width="30" height="30">
  This text will wrap around the image floated to the right.
</p>

虽然 float 是实现文本环绕的传统方式，但 Flexbox 和 Grid 等现代 CSS 布局技术为一般页面布局提供了更强大的选项，不过 float 对于这种特定的文本环绕效果仍然有用。

图像映射（客户端）

图像映射在单个图像内定义可点击区域，将每个区域链接到不同的目标地址。

使用 <map> 标签（带有 name 属性）及其内部的 <area> 标签。<img> 标签的 usemap 属性将其链接到图像映射。

<img src="world_map.png" alt="World Map with clickable regions" width="800" height="400" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="0,0,200,150" href="north_america.html" alt="North America">
  <area shape="circle" coords="400,200,50" href="africa.html" alt="Africa">
  <area shape="poly" coords="600,100,750,150,700,250,580,200" href="australia.html" alt="Australia">
</map>

<area> 属性：

• shape：定义形状（rect，circle，poly，default）。
• coords：指定定义形状的坐标。
• href：可点击区域的目标 URL。
• alt：提供区域的替代文本（对可访问性很重要）。

由于响应性方面的挑战以及使用 CSS/JavaScript 轻松实现类似效果，图像映射现在不太常用，但它们仍然是有效的 HTML 特性。

本章小结

• 使用 <img> 嵌入图像。
• src 属性指定图像 URL。
• alt 属性提供重要的替代文本，用于可访问性和 SEO。
• 使用 width 和 height 属性防止布局偏移。
• CSS float 可用于文本环绕图像。
• 通过将 <img> 嵌套在 <a> 内，图像可以用作链接。
• <map> 和 <area> 创建具有可点击区域的客户端图像映射。
• 优化用于网络的图像，以确保快速加载。

HTML 图像标签

Tag	Description
	嵌入图像。
	定义客户端图像映射。
	在图像映射内定义可点击区域。