在 HTML 中，插入图片最常用的标签就是 <img> 标签。

✅ 基本语法

<img src="图片地址" alt="图片描述" />

属性说明：

属性含义
src图片的路径（本地路径或网络地址）
alt替代文本，当图片无法显示时会显示此文字，有利于无障碍访问和 SEO
width图片宽度，可以是像素(px)或百分比(%)
height图片高度，可以是像素(px)或百分比(%)

✅ 示例代码

示例 1：引入网络图片

<img src="https://www.example.com/image.jpg" alt="示例图片" width="300">

示例 2：引入本地图片

<img src="images/photo.jpg" alt="我的照片" width="200" height="150">

（注意：确保图片 photo.jpg 存在于 images/ 目录下）

✅ <img> 是单标签（自闭合标签）

无需写结束标签，推荐使用自闭合写法：

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

✅ 其他常用属性（进阶）

属性说明
title鼠标悬停时显示的提示文本
loading="lazy"延迟加载图片（提高性能）
style行内 CSS 样式，例如：style="border:1px solid #ccc;"

✅ 响应式图片（适配不同屏幕）

<img src="photo.jpg" alt="响应式图片" style="max-width: 100%; height: auto;">

✅ 图片作为链接

<a href="https://www.example.com">
  <img src="banner.jpg" alt="点击跳转" />
</a>

下面是一个完整的 HTML 示例页面，展示如何使用 <img> 标签插入图片，并附加一些 CSS 样式（响应式、圆角、阴影、动画等）来美化图片展示效果。

✅ 🌟 HTML 示例：插入并美化图片

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML 插入图片示例</title>
  <style>
    body {
      background-color: #f9f9f9;
      font-family: "Arial", sans-serif;
      text-align: center;
      padding: 50px;
    }

    h1 {
      color: #333;
    }

    .image-container {
      display: inline-block;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .image-container:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    img {
      max-width: 100%;
      width: 300px;
      height: auto;
      border-radius: 15px;
      box-shadow: 0 5px 10px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }

    .caption {
      margin-top: 10px;
      font-size: 16px;
      color: #555;
    }
  </style>
</head>
<body>

  <h1>HTML 插入图片演示</h1>

  <div class="image-container">
    <img src="https://picsum.photos/400/300" alt="随机美图" loading="lazy" title="这是图片提示文字">
    <div class="caption">这是一张漂亮的图片</div>
  </div>

</body>
</html>

✅ 效果说明：

  • 📷 使用 <img> 标签插入网络图片
  • 🎨 使用 CSS 实现：
    • 圆角：border-radius: 15px
    • 阴影：box-shadow
    • 悬停放大：transform: scale(1.05)
    • 响应式：max-width: 100%; height: auto
  • 🕹️ 加了提示文字（title）和图片说明文字（alt, .caption）

📦 如果你想：

  • 替换成本地图片：将 src="your-image.jpg"，放在和 HTML 文件同目录
  • 加载多张图，做轮播图
  • 实现自动切换图片
  • 制作点击图片放大预览