在 HTML 中插入和样式化图片 - 完整指南

介绍

在本实验中，你将学习如何使用各种技术和属性在 HTML 中有效地插入和样式化图片。实验涵盖了基本技能，例如使用源文件和替代文本添加基本图片、设置固定图片尺寸、对齐图片以及创建信息丰富的工具提示。通过逐步的指导，你将获得操作图片元素以增强网页设计和改善用户体验的实践经验。

通过动手实践，你将探索不同的 HTML 属性，如 src、alt、width、height 和 title，以控制图片的展示和可访问性。这些技能对于希望创建视觉吸引力强且响应式网页的 Web 开发人员来说至关重要，能够确保图片的集成和样式化得当。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} html/para_br -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} html/layout -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} html/multimedia -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} html/img_maps -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} html/embed_media -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} html/inter_elems -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} html/custom_attr -.-> lab-452362{{"在 HTML 中插入和样式化图片"}} end

使用 src 和 alt 属性添加基本图片

在这一步中，你将学习如何使用 <img> 标签及其基本属性向 HTML 页面添加基本图片。图片是网页设计的重要组成部分，能够使网页更具视觉吸引力和信息量。

首先，让我们创建一个 HTML 文件来进行操作。打开 WebIDE，在 ~/project 目录下创建一个名为 images.html 的新文件。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Images</title>
  </head>
  <body>
    <!-- 我们将在这里添加图片 -->
  </body>
</html>

<img> 标签是一个自闭合标签，用于在 HTML 文档中嵌入图片。它有两个关键属性：

src（source）：指定图片文件的路径
alt（alternative text）：提供图片的文本描述

让我们向 HTML 文件中添加一张图片：

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

src 属性指向图片的 URL，而 alt 属性提供了以下功能：

如果图片加载失败，则会显示该描述
帮助屏幕阅读器为视障用户描述图片
通过为搜索引擎提供上下文来提升 SEO

保存文件并在网页浏览器中打开以查看图片。

注意：了解更多关于如何在 WebIDE 中预览 HTML 文件的信息。

使用 Width 和 Height 设置固定图片尺寸

在这一步中，你将学习如何使用 HTML 中的 width 和 height 属性来控制图片的大小。这些属性允许你指定图片的精确尺寸，从而有助于改善页面布局和加载性能。

打开你在上一步中创建的 images.html 文件。我们将修改现有的图片并添加更多图片，以演示不同的尺寸设置技术。

HTML 提供了两个属性来设置图片尺寸：

width：以像素为单位设置图片宽度
height：以像素为单位设置图片高度

让我们更新之前的图片并添加一些新的示例：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- 原始图片，带有固定尺寸 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- 另一个图片，带有不同尺寸 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- 仅指定宽度的图片 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

关于图片尺寸的关键点：

尺寸以像素为单位指定
你可以设置宽度、高度或两者
如果仅指定一个尺寸，图片会按比例缩放
设置尺寸有助于防止图片加载时页面布局发生偏移

在网页浏览器中查看示例输出，将显示三个不同尺寸的图片。

使用已弃用的 Align 属性对齐图片

在这一步中，你将学习如何使用 HTML 中已弃用的 align 属性来定位图片。虽然现代网页设计使用 CSS 进行布局，但了解这种历史性的图片对齐方法仍然很重要。

打开之前步骤中的 images.html 文件，并修改它以演示不同的图片对齐方式：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- 左对齐图片 -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      这段文本将围绕左对齐的图片流动。
    </p>

    <p>
      <!-- 右对齐图片 -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      这段文本将围绕右对齐的图片流动。
    </p>

    <p>
      <!-- 居中对齐图片 -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      这段文本与图片的中间对齐。
    </p>
  </body>
</html>

align 属性支持三个主要值：

left：将图片左对齐，文本围绕其流动
right：将图片右对齐，文本围绕其流动
middle：将图片与文本基线垂直对齐

重要说明：

align 属性在 HTML5 中已被弃用
现代网页设计使用 CSS 的 float 或 flexbox 进行布局
保留此属性是为了历史理解

示例输出将显示图片在段落中的不同位置。

注意：Labby 对话框可能会遮挡右对齐的图片。

使用 Title 属性添加工具提示信息

在这一步中，你将学习如何使用 title 属性为图片添加工具提示信息。工具提示在用户将鼠标悬停在元素上时提供额外的上下文或描述。

打开之前步骤中的 images.html 文件，并修改它以演示工具提示的用法：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- 带有简单工具提示的图片 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- 带有更详细工具提示的图片 -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- 多个带有不同工具提示的图片 -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

关于 title 属性的关键点：

在悬停在图片上时提供额外信息
适用于图片、文本和大多数 HTML 元素
通过提供上下文帮助改善用户体验
当鼠标悬停在元素上时，会显示在一个小弹出框中

当你在网页浏览器中悬停在这些图片上时，你将看到工具提示文本出现。

总结

在本实验中，参与者通过掌握图片嵌入和样式化的关键技术，学习了如何在 HTML 中有效地处理图片。实验涵盖了基本技能，例如使用 <img> 标签及其关键属性（如 src 和 alt）添加图片，以确保图片的正确显示和可访问性。学习者探索了通过 width 和 height 属性控制图片尺寸的方法，理解了这些设置如何影响页面布局和性能。

实践练习引导学生掌握了各种图片操作技术，包括设置固定图片尺寸、使用 title 属性添加工具提示信息，以及尝试不同的图片对齐策略。通过动手操作 HTML 图片元素，参与者获得了创建视觉吸引力强且响应式网页设计的宝贵经验。