HTML 图像标签 (img) 详解

人才程序员

已于 2025-02-18 21:19:20 修改

阅读量4.2k

点赞数 24

分类专栏：前端三件套文章标签： html 前端 json html5 ajax css javascript

于 2025-02-18 21:19:12 首次发布

本文链接：https://blog.csdn.net/m0_62599305/article/details/145663860

版权

前端三件套专栏收录该内容

207 篇文章

订阅专栏

文章目录

HTML 图像标签 (`<img>`) 详解 🖼️

HTML 图像标签 (`<img>`) 详解 🖼️

在网页开发中，图像是不可或缺的元素。HTML 提供了 <img> 标签来插入图片，使网页更加丰富、生动。本文将详细介绍 <img> 标签的基本用法、常见属性、优化技巧以及高级用法。

1. `<img>` 标签的基本语法 ✍️

HTML 中使用 <img> 标签来插入图片，基本语法如下：

<img src="image.jpg" alt="图片描述">

语法解析：

src（source）—— 图片的路径，用于指定图片的来源地址。
alt（alternative text）—— 替代文本，当图片无法加载时显示的文字，提高可访问性。

2. `src` 属性：指定图片路径 🌍

src 是 <img> 标签的必需属性，它可以指向以下类型的图片路径：

2.1 绝对路径

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

👉 图片存放在 远程服务器，需要完整的 URL 地址。

2.2 相对路径

<img src="images/photo.jpg" alt="本地图片">

👉 图片存放在 本地项目 中，src 指向图片文件的相对路径。

3. `alt` 属性：替代文本 📝

alt 用于在图片加载失败时显示替代文本，同时有助于 SEO（搜索引擎优化）和 无障碍访问（如屏幕阅读器）。

<img src="logo.png" alt="公司 Logo">

🔹 如果图片无法加载，页面会显示 “公司 Logo” 文字。
🔹 搜索引擎可以通过 alt 了解图片内容，提高网页排名。

4. 控制图片大小 🖼️

可以使用 width 和 height 控制图片的大小：

<img src="image.jpg" alt="示例图片" width="300" height="200">

📏 单位是像素（px），如果不指定，图片会保持原始大小。
📏 建议只设置 width 或 height，另一项会等比例缩放，避免图片变形。

<img src="image.jpg" alt="示例图片" width="300">

5. 响应式图片 📱

为了适应不同设备（PC、手机、平板），可以使用 CSS 控制图片自适应：

<img src="image.jpg" alt="示例图片" style="max-width: 100%; height: auto;">

🔹 max-width: 100% —— 确保图片不会超出其容器宽度。
🔹 height: auto —— 让高度自动调整，保持原始比例。

6. `title` 属性：鼠标悬停提示 🖱️

title 属性用于在鼠标悬停时显示提示文本：

<img src="icon.png" alt="网站图标" title="点击查看详情">

7. `loading` 属性：优化图片加载 🚀

HTML5 提供 loading="lazy" 让图片 按需加载，提高页面性能。

<img src="large-image.jpg" alt="风景图片" loading="lazy">

✅ 浏览器只会在图片进入视口时加载，提高页面速度！

8. `figure` 与 `figcaption` 组合 🏷️

可以用 <figure> 包裹 <img>，并用 <figcaption> 添加图片说明：

<figure>
    <img src="sunset.jpg" alt="日落美景">
    <figcaption>这是一张美丽的日落照片。</figcaption>
</figure>

9. `srcset` 属性：不同设备加载不同图片 📱🖥️

srcset 允许浏览器根据设备分辨率加载合适的图片，优化性能。

<img 
    src="image-small.jpg" 
    srcset="image-large.jpg 1024w, image-medium.jpg 768w, image-small.jpg 480w" 
    sizes="(max-width: 600px) 480px, (max-width: 1024px) 768px, 1024px" 
    alt="自适应图片">

🔹 浏览器会自动选择合适的图片，提升页面加载速度！

10. 兼容性 & 最佳实践 ✅

属性	作用	是否必需
`src`	图片路径	✅ 是
`alt`	替代文本	✅ 是
`width` / `height`	设置图片大小	❌ 否
`title`	悬停提示	❌ 否
`loading="lazy"`	延迟加载	❌ 否
`srcset`	响应式图片	❌ 否

🎯 最佳实践：

✅ 使用 alt 提高 SEO 和可访问性。
✅ 使用 loading="lazy" 加快页面加载速度。
✅ 用 max-width: 100% 让图片自适应不同设备。
✅ 使用 srcset 提供不同尺寸的图片，优化移动端体验。

11. 完整示例 🎉

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 图像标签示例</title>
    <style>
        img { max-width: 100%; height: auto; display: block; margin: 10px auto; }
    </style>
</head>
<body>

    <h1>HTML `<img>` 标签示例</h1>

    <h2>基本图片</h2>
    <img src="example.jpg" alt="示例图片" width="300">

    <h2>延迟加载图片</h2>
    <img src="large-image.jpg" alt="风景图" loading="lazy">

    <h2>带说明的图片</h2>
    <figure>
        <img src="sunset.jpg" alt="日落美景">
        <figcaption>美丽的日落 🌅</figcaption>
    </figure>

    <h2>响应式图片</h2>
    <img 
        src="image-small.jpg" 
        srcset="image-large.jpg 1024w, image-medium.jpg 768w, image-small.jpg 480w" 
        sizes="(max-width: 600px) 480px, (max-width: 1024px) 768px, 1024px" 
        alt="适应不同设备的图片">

</body>
</html>