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