HTML 初学者指南 - 第 6 课 - 图像

10/10/2025, by Ivan

网站上的图片是非常重要的元素，没有图片的网站看起来会灰暗、单调。图片用于装饰网站、展示相册，或者仅仅是为了在页面中添加一些视觉内容。

要插入图片，可以使用 IMG 标签（注意我们写的是 img，而不是完整的 image）。IMG 标签是单标签，即 <img />，没有闭合标签。

IMG 标签的主要属性是 src。它的作用与链接标签的 href 类似，我们需要在 src 属性中指定图片文件的路径。路径可以是相对路径，也可以是绝对路径。

以下是我们 index.html 文件的代码：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>  
    <h1>我的第一个 HTML 文档</h1>
    <p>
      <a href="files/file.html">指向第二个文档的链接</a>
    </p>
  </body>
</html>

现在我们在该文件所在目录旁边创建一个名为 images 的文件夹，并在其中复制一张图片文件。假设图片名为 image.jpg。接下来我们在 index.html 中插入 img 标签：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>  
    <h1>我的第一个 HTML 文档</h1>
    <p>
      <img />
    </p>
    <p>
      <a href="files/file.html">指向第二个文档的链接</a>
    </p>
  </body>
</html>

我们已经插入了标签，现在来写图片路径。使用相对路径，从 ./ 开始：

./

然后添加图片所在的文件夹名：

./images/

最后写上图片文件名：

./images/image.jpg

现在将这个路径添加到 src 属性中：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>  
    <h1>我的第一个 HTML 文档</h1>
    <p>
      <img src="./images/image.jpg" />
    </p>
    <p>
      <a href="files/file.html">指向第二个文档的链接</a>
    </p>
  </body>
</html>

此时，图片会以原始尺寸显示。不过，我们可以通过设置高度和宽度来调整它的大小。

img 标签的宽度属性是 width，高度属性是 height。我们可以只设置宽度、只设置高度，或者同时设置两者。例如：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>  
    <h1>我的第一个 HTML 文档</h1>
    <p>
      <img src="./images/image.jpg" width="200" />
    </p>
    <p>
      <a href="files/file.html">指向第二个文档的链接</a>
    </p>
  </body>
</html>

或者只设置高度：

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>  
    <h1>我的第一个 HTML 文档</h1>
    <p>
      <img src="./images/image.jpg" height="400" />
    </p>
    <p>
      <a href="files/file.html">指向第二个文档的链接</a>
    </p>
  </body>
</html>

如果同时设置高度和宽度，请确保这两个值与原始图片的比例一致，否则网页上的图片会被拉伸变形。

<html>
  <head>
    <title>我的第一个 HTML 文档</title>
  </head>
  <body>  
    <h1>我的第一个 HTML 文档</h1>
    <p>
      <img src="./images/image.jpg" height="400" width="100" />
    </p>
    <p>
      <a href="files/file.html">指向第二个文档的链接</a>
    </p>
  </body>
</html>

额外区块类型 (EBT) - 全新的布局构建器体验❗

❗额外段落类型 (EPT) - 全新的 Paragraphs 体验

HTML 初学者指南 - 第 6 课 - 图像