31. 图像 img 标签基础

本节目标：学会用 <img> 标签在网页中插入图片，理解 src、alt、width、height 四个核心属性的作用。

网页没有图片会显得很单调。<img> 标签就是用来在页面里嵌入图像的。

基本语法

<img src="dinosaur.jpg" alt="一具恐龙骨骼标本" />

<img> 是空元素，没有结束标签。必须的属性有两个：

src：图片的路径（URL）
alt：图片的替代文本

src：图片从哪来

src 可以是相对路径或绝对路径，和 <a> 的 href 一样。

<!-- 相对路径：同一目录 -->
<img src="logo.png" alt="网站 Logo" />

<!-- 相对路径：子目录 -->
<img src="images/photo.jpg" alt="风景照片" />

<!-- 绝对路径：完整 URL -->
<img src="https://www.example.com/images/banner.jpg" alt="横幅图片" />

Tip

实际项目中优先用相对路径。换域名时不用一个个改图片地址。

alt：图片的描述

alt 是替代文本（alternative text）。当图片无法显示时，浏览器会显示这段文字。

<img src="cat.jpg" alt="一只橘色的猫趴在沙发上睡觉" />

alt 还有两个重要作用：

无障碍：屏幕阅读器会朗读 alt 文本，让视障用户知道图片内容
SEO：搜索引擎通过 alt 文本来理解图片，影响图片搜索排名

Important

alt 是必填属性。不写的话 HTML 校验会报错，而且对可访问性和 SEO 都有负面影响。

width 和 height：设置尺寸

<img src="photo.jpg" alt="风景" width="800" height="600" />

值的单位是像素（不需要写 px）。写上这两个属性有个好处——浏览器提前知道图片大小，加载时不会把周围内容挤下去。

Note

不要用来缩放图片。如果原图 2000px 宽，你写 width="400"，浏览器会按 400px 显示，但原图还是完整下载了——浪费流量。需要用 CSS 或提前处理图片尺寸。

现代更推荐的做法是让浏览器自动处理缩放：

img {
  max-width: 100%;
  height: auto;
}

title：悬停提示

鼠标悬停在图片上会显示一个小提示。

<img src="museum.jpg" alt="恐龙骨骼标本" title="T-Rex 化石，曼彻斯特大学博物馆藏" />

Note

和链接的 title 一样，title 只有鼠标用户能看到。重要信息别只放 title 里，应该直接写在正文中。

图片链接

把 <img> 放进 <a> 里，图片就变成可点击的链接。

<a href="https://developer.mozilla.org/">
  <img src="logo.png" alt="MDN 官网" width="150" height="50" />
</a>

Tip

图片链接的 alt 文本应该描述链接目标，而不是图片本身。比如写”MDN Web 文档”比写”MDN Logo”更有意义。

响应式图片基础

让图片在小屏幕上自动缩小：

<img src="photo.jpg" alt="风景" style="max-width: 100%; height: auto;" />

这行 CSS 的意思是：图片宽度不超过父容器，高度按比例自动调整。

下一节我们深入学习 srcset 和 <picture> 实现真正的响应式图片。

本章小结

属性	作用	必填
`src`	图片路径	是
`alt`	替代文本（无障碍+SEO）	是
`width`	显示宽度（像素）	否
`height`	显示高度（像素）	否
`title`	鼠标悬停提示	否

下节深入讲 alt 文本的写法和可访问性细节。