HTML 图片嵌入

HTMLHTMLBeginner
立即练习

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

介绍

HTML <img> 标签用于在网页中嵌入图像。它是一个空标签,这意味着它没有闭合标签。src 属性是必需的,用于指定图像的路径或 URL。其他可选属性包括 alttitleheightwidth 等。在本实验中,你将学习如何使用 HTML <img> 标签将图像插入网页。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) 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/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/charset("`Character Encoding`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/MultimediaandGraphicsGroup -.-> html/img_maps("`Image Maps`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70777{{"`HTML 图片嵌入`"}} html/head_elems -.-> lab-70777{{"`HTML 图片嵌入`"}} html/charset -.-> lab-70777{{"`HTML 图片嵌入`"}} html/layout -.-> lab-70777{{"`HTML 图片嵌入`"}} html/doc_flow -.-> lab-70777{{"`HTML 图片嵌入`"}} html/multimedia -.-> lab-70777{{"`HTML 图片嵌入`"}} html/img_maps -.-> lab-70777{{"`HTML 图片嵌入`"}} html/inter_elems -.-> lab-70777{{"`HTML 图片嵌入`"}} html/custom_attr -.-> lab-70777{{"`HTML 图片嵌入`"}} end

设置你的项目

第一步是创建一个名为 "html-img-tag-lab" 的新目录,并在其中创建一个名为 "index.html" 的文件。在代码编辑器中打开该文件,并将以下代码添加到 <head> 部分:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

向网页添加图片

要向网页添加图片,你需要一个图片文件。在这个示例中,假设你在根目录下的一个名为 "images" 的文件夹中有一个名为 "logo.png" 的图片。要使用 <img> 标签将此图片添加到网页中,请将以下代码添加到 <body> 部分:

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

在这段代码中,src 属性指定了图片文件的路径。alt 属性提供了在图片因某些原因无法加载时显示的替代文本。

为图片添加额外属性

你可以为图片添加多个额外属性来控制其外观和行为。以下是一个示例,展示了如何使用一些最常见的属性:

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

在这段代码中,widthheight 属性控制图片的尺寸。title 属性在用户将鼠标悬停在图片上时提供工具提示。

使用图像映射

图像映射(image map)是一种定义了可点击区域(即“热点”)的图像,这些区域可以链接到不同的目标。要创建图像映射,你需要定义每个热点的坐标及其链接的 URL。以下是一个图像映射的示例:

<img src="images/worldmap.gif" alt="World map" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="North America"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="South America"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europe"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asia"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Africa"
  />
</map>

在这段代码中,usemap 属性指定了映射的名称,该映射通过 <map> 标签定义。每个 <area> 标签通过指定其形状(例如 "rect" 表示矩形)、坐标及其链接的 URL 来定义一个热点。

将图片设置为背景

你也可以将图片用作 HTML 元素的背景,例如网页的 body 部分。以下是一个示例:

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

在这段代码中,background-image 属性指定了图片文件的路径,background-repeat 属性设置为不重复。background-size 属性将图片缩放以覆盖整个背景。

总结

恭喜!你已经成功学会了如何使用 HTML <img> 标签向网页中添加图片。你还学会了如何使用一些常见属性来控制图片的尺寸和外观,以及如何创建图像映射并将图片用作背景。

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