HTML 图像

网页不能只有文字，图片能让页面更生动直观。HTML 用 <img> 标签在页面中插入图像，它不需要闭合标签，配合 src、alt、width 等属性即可满足绝大多数图片需求，是每个网页都会用到的基础元素。

图像标签与 src 属性

<img> 标签本身不含图像内容，它通过 src（来源 source）属性告诉浏览器到哪里加载图片。src 既可以是相对路径，也可以是完整的网络地址（URL）。

<img src="boat.jpg">   <!-- 相对路径：与本页面同目录 -->
<img src="https://example.com/images/logo.png">  <!-- 绝对 URL -->

在浏览器中显示为：第一张加载本地 boat.jpg，第二张加载网络上的 logo 图片。若 src 写错或图片不存在，页面会出现一个"破图"图标，因此务必核对路径。

alt 替代文本

alt 属性为图片提供一段替代文字：图片加载失败时浏览器会显示它；屏幕阅读器等辅助工具也会朗读它，对视障用户和无障碍访问非常重要，建议每张图片都写上。

<img src="boat.jpg" alt="海面上行驶的一艘小船">

在浏览器中显示为：正常情况下显示小船图片；若 boat.jpg 丢失，则显示文字"海面上行驶的一艘小船"。

设置图像宽高

width 和 height 属性可指定图像的显示尺寸，单位默认为像素（px）。可以只给其中一个值，另一个按图片原始比例自动缩放，避免变形。

<img src="boat.jpg" alt="小船" width="300" height="200">
<img src="boat.jpg" alt="小船" style="width:50%;">

在浏览器中显示为：第一张固定为 300×200 像素；第二张宽度为页面的一半、高度按比例自适应。更推荐用 CSS（style）控制尺寸，兼容性更好。

图像用作链接

把 <img> 放进 <a> 标签内部，图片就变成可点击的链接，点击后跳转到目标地址，这是制作 Logo 链接、广告图常用的做法。

<a href="https://example.com">
  <img src="logo.png" alt="网站首页">
</a>

在浏览器中显示为：一张可点击的 logo 图片，点击后跳转到同类教程首页。

易错点提示

• 只写了 src 而忘记 alt，或 src 路径写错，是最常见的两类错误。
• 尺寸属性应尽量交给 CSS 控制，HTML 里的 width/height 属于旧式写法。
• 引用网络图片要注意版权；若对方服务器不可用，图片会突然消失。

小结

用 <img> 插入图像只需 src 与 alt 两个关键属性，宽高可用属性或 CSS 控制。掌握它们，你的页面就有了"图文并茂"的基础。