img 标签基础

本节介绍 HTML 中最常用的图片标签 <img>，它是将图像嵌入网页的核心元素。你将学习 <img> 的基本语法、自闭合标签特性，以及如何在页面中正确显示图片。

前置知识

阅读本节前，建议先了解：链接最佳实践

基础概念

<img>（Image）是 HTML 中用于嵌入图片的元素。它属于空元素（Void Element），也称为自闭合标签，意味着它没有子内容，所有信息都通过属性传递。与 <p>、<div> 等双标签不同，<img> 不需要结束标签。

浏览器在解析到 <img> 标签时，会根据 src 属性指定的路径去获取图片资源，并在标签所在的位置渲染图像。图片在 HTML 中默认以行内元素（inline） 的方式显示，与文字在同一行内排列。

语法

基本语法

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>img 标签基础</title>
</head>
<body>
  <h1>img 标签基础用法</h1>

  <!-- 最简单的 img 标签：src 指定图片路径 -->
  <img src="photo.jpg">

  <br>

  <!-- 推荐写法：添加 alt 替代文本 -->
  <img src="photo.jpg" alt="山水风景照片">

  <br>

  <!-- 设置宽度和高度 -->
  <img src="photo.jpg" alt="山水风景照片" width="600" height="400">

  <br>

  <!-- 使用 title 提供悬停提示 -->
  <img src="photo.jpg" alt="山水风景照片" title="点击查看大图">
</body>
</html>

自闭合标签的写法

<img> 是空元素，不需要结束标签。在 HTML5 中，以下两种写法都是合法的：

html

<!-- HTML5 推荐写法：不写斜杠 -->
<img src="photo.jpg" alt="风景">

<!-- XHTML 风格：带自闭合斜杠（也合法） -->
<img src="photo.jpg" alt="风景" />

注意

在 HTML5 中，两种写法效果完全相同。推荐使用不带斜杠的简洁写法，这更符合 HTML5 规范风格。

img 在行内与块级中的表现

<img> 默认是行内元素（inline），它会与文字在同一行显示。但在实际开发中，通常通过 CSS 将其设置为块级元素：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>img 显示模式</title>
  <style>
    /* 默认行内模式：图片与文字同行 */
    .inline-img {
      /* 默认就是 inline，这里仅作说明 */
      display: inline;
    }

    /* 块级模式：图片独占一行 */
    .block-img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h2>行内模式（默认）</h2>
  <p>
    这段文字中嵌入了一张图片
    <img class="inline-img" src="icon.png" alt="图标" width="32" height="32">
    ，图片与文字在同一行显示。
  </p>

  <h2>块级模式</h2>
  <p>下面的图片以块级元素显示，独占一行：</p>
  <img class="block-img" src="landscape.jpg" alt="风景照片" width="800" height="500">
</body>
</html>

详细说明

img 标签核心属性一览

<img> 标签拥有丰富的属性，以下是核心属性的完整说明：

属性	值类型	必需	说明
`src`	URL	是	图片资源的路径，支持相对路径、绝对路径
`alt`	字符串	强烈推荐	图片的替代文本，图片无法显示时展示
`width`	像素值	否	图片的显示宽度（像素），建议设置
`height`	像素值	否	图片的显示高度（像素），建议设置
`loading`	`lazy` / `eager`	否	加载策略，`lazy` 实现懒加载
`decoding`	`async` / `sync` / `auto`	否	图片解码方式
`title`	字符串	否	鼠标悬停时的提示文字
`srcset`	字符串	否	响应式图片候选集
`sizes`	字符串	否	响应式图片尺寸条件
`usemap`	字符串	否	关联图像映射的名称
`ismap`	布尔值	否	指定图片为服务器端图像映射
`crossorigin`	字符串	否	跨域请求设置
`referrerpolicy`	字符串	否	引用来源策略
`fetchpriority`	`high` / `low` / `auto`	否	获取优先级

图片在页面中的位置

图片可以出现在 HTML 文档的几乎所有位置：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片的位置</title>
</head>
<body>
  <!-- 1. 段落中 -->
  <p>
    <img src="icon.png" alt="提示图标" width="16" height="16">
    这是一段包含图片的文字。
  </p>

  <!-- 2. 标题旁 -->
  <h2>
    <img src="logo.svg" alt="Logo" width="24" height="24">
    网站标题
  </h2>

  <!-- 3. 链接中 -->
  <a href="https://example.com">
    <img src="banner.jpg" alt="点击进入网站" width="468" height="60">
  </a>

  <!-- 4. 列表中 -->
  <ul>
    <li><img src="check.png" alt="已完成" width="16" height="16"> 已完成</li>
    <li><img src="pending.png" alt="待处理" width="16" height="16"> 待处理</li>
  </ul>

  <!-- 5. 表格中 -->
  <table border="1">
    <tr>
      <td><img src="avatar.jpg" alt="头像" width="48" height="48"></td>
      <td>张三</td>
    </tr>
  </table>

  <!-- 6. figure 中（推荐用于带说明的图片） -->
  <figure>
    <img src="photo.jpg" alt="风景照片" width="600" height="400">
    <figcaption>这是一张风景照片的说明</figcaption>
  </figure>

  <!-- 7. div 容器中 -->
  <div style="text-align: center;">
    <img src="centered.jpg" alt="居中图片" width="400" height="300">
  </div>
</body>
</html>

图片作为链接

将 <img> 放在 <a> 标签内，就可以让图片成为可点击的链接：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>图片链接</title>
</head>
<body>
  <h1>图片作为链接</h1>

  <!-- 点击图片跳转到目标页面 -->
  <a href="https://example.com">
    <img src="banner.jpg" alt="点击访问示例网站" width="728" height="90">
  </a>

  <!-- 导航菜单中的图标链接 -->
  <nav>
    <a href="/home">
      <img src="home-icon.png" alt="首页" width="32" height="32">
    </a>
    <a href="/profile">
      <img src="user-icon.png" alt="个人中心" width="32" height="32">
    </a>
    <a href="/settings">
      <img src="gear-icon.png" alt="设置" width="32" height="32">
    </a>
  </nav>
</body>
</html>

图片替换文本 alt 的作用

alt 属性在多个场景中发挥重要作用：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>alt 属性</title>
</head>
<body>
  <h1>alt 替代文本的作用</h1>

  <!-- 场景 1：图片加载失败时显示 -->
  <img src="not-exist.jpg" alt="产品展示图片">
  <!-- 浏览器会显示"产品展示图片"文字 -->

  <hr>

  <!-- 场景 2：屏幕阅读器朗读 -->
  <!-- 视障用户使用屏幕阅读器时，会听到 alt 文本 -->
  <img src="chart.png" alt="2024年销售额同比增长15%的柱状图">

  <hr>

  <!-- 场景 3：搜索引擎理解图片 -->
  <img src="product-iphone.jpg" alt="iPhone 15 Pro Max 黑色 256GB">

  <hr>

  <!-- 场景 4：纯装饰性图片使用空 alt -->
  <img src="decorative-line.png" alt="">
  <!-- alt="" 告诉辅助技术"忽略此图片" -->

  <hr>

  <!-- 错误写法：完全没有 alt 属性 -->
  <!-- <img src="photo.jpg"> -->
</body>
</html>

alt 的重要性

缺少 alt 属性会导致：

屏幕阅读器无法告知用户图片内容
图片加载失败时用户看不到任何提示
搜索引擎无法理解图片的语义

即使图片是装饰性的，也应写 alt="" 而不是省略 alt。

实战示例

下面是一个完整的实战页面，展示 <img> 标签的各种用法：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片画廊</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 16px;
    }

    .gallery figure {
      margin: 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
    }

    .gallery img {
      display: block;
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .gallery figcaption {
      padding: 10px;
      text-align: center;
      font-size: 14px;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>自然风光画廊</h1>
  <p>精选世界各地自然风景摄影作品。</p>

  <div class="gallery">
    <!-- 图片 1 -->
    <figure>
      <img src="mountain.jpg"
           alt="雪山在日落时分的壮丽景色"
           width="400" height="300">
      <figcaption>雪山日落</figcaption>
    </figure>

    <!-- 图片 2 -->
    <figure>
      <img src="ocean.jpg"
           alt="碧蓝海面上的浪花"
           width="400" height="300">
      <figcaption>海浪</figcaption>
    </figure>

    <!-- 图片 3 -->
    <figure>
      <img src="forest.jpg"
           alt="秋天的森林，树叶呈现金黄色和红色"
           width="400" height="300">
      <figcaption>秋日森林</figcaption>
    </figure>

    <!-- 图片 4 -->
    <figure>
      <img src="desert.jpg"
           alt="沙漠中的沙丘，蓝天白云"
           width="400" height="300">
      <figcaption>沙漠</figcaption>
    </figure>

    <!-- 图片 5 -->
    <figure>
      <img src="waterfall.jpg"
           alt="从高处倾泻而下的瀑布"
           width="400" height="300">
      <figcaption>瀑布</figcaption>
    </figure>

    <!-- 图片 6 -->
    <figure>
      <img src="aurora.jpg"
           alt="北极上空的绿色极光"
           width="400" height="300">
      <figcaption>北极光</figcaption>
    </figure>
  </div>
</body>
</html>

注意事项

<img> 是空元素，不需要且不应该写结束标签 </img>
在 HTML5 中，自闭合斜杠 / 是可选的，但不应混用风格
<img> 默认是行内元素，底部会有多余的间距（由基线对齐引起），可通过设置 display: block 消除
图片路径错误时，浏览器会显示 alt 文本或一个破碎图标
<img> 标签不能嵌套在另一个 <img> 中
<img> 不能包含子元素，所有信息通过属性传递

最佳实践

始终为 <img> 提供 alt 属性，描述图片的内容和功能
建议同时设置 width 和 height 属性，防止布局偏移（CLS）
使用 CSS 控制图片的实际显示尺寸，HTML 属性仅用于预留空间
装饰性图片使用 alt=""
大图片添加 loading="lazy" 实现懒加载
使用 <figure> 和 <figcaption> 为重要图片添加说明文字
图片路径使用相对路径引用项目内资源，使用绝对路径引用外部资源

继续学习：src 与 alt 属性

img 标签基础 ​

基础概念 ​

语法 ​

基本语法 ​

自闭合标签的写法 ​

img 在行内与块级中的表现 ​

详细说明 ​

img 标签核心属性一览 ​

图片在页面中的位置 ​

图片作为链接 ​

图片替换文本 alt 的作用 ​

实战示例 ​

注意事项 ​

最佳实践 ​

参考链接 ​

img 标签基础

基础概念

语法

基本语法

自闭合标签的写法

img 在行内与块级中的表现

详细说明

img 标签核心属性一览

图片在页面中的位置

图片作为链接

图片替换文本 alt 的作用

实战示例

注意事项

最佳实践

参考链接