在 HTML 中插入和样式化图片

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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


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 文档中嵌入图片。它有两个关键属性:

  1. src(source):指定图片文件的路径
  2. 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 文件的信息。

LabEx logo dark version

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

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

打开你在上一步中创建的 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> 标签及其关键属性(如 srcalt)添加图片,以确保图片的正确显示和可访问性。学习者探索了通过 widthheight 属性控制图片尺寸的方法,理解了这些设置如何影响页面布局和性能。

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

您可能感兴趣的其他 HTML 教程