在网页开发中，图像是最重要的内容载体之一。HTML5引用图像主要依赖<img>标签，但要把图片用对、用好，还需要理解路径规则、属性含义以及相关的语义化标签。本文将从基础用法、路径技巧、响应式加载等多个角度，系统讲解HTML5中引用图像的完整知识。
一、img标签的基本用法与核心属性
<img>是一个自闭合的行内元素，它不会真正把图片嵌入HTML文件，而是通过src属性指向一个图片资源地址，浏览器在解析到该标签时再去加载对应的文件。最简单的用法如下：
<img src="images/photo.jpg" alt="一张风景照片">
src是source的缩写，它决定了图片的来源，可以是相对路径、绝对路径，也可以是一个完整的网络URL。如果src指向的地址错误，图片就无法显示，页面通常会出现一个裂图图标。
alt属性同样不可省略。它用于描述图片内容，当图片加载失败或者用户使用屏幕阅读器时，alt文本会代替图片呈现。搜索引擎抓取图片时也主要依赖alt文本来理解图片内容，因此合理编写alt不仅关乎无障碍体验，也直接影响SEO效果。对于纯装饰性的图片，可以将alt设为空字符串。
width和height属性建议显式声明。HTML5允许直接在这两个属性中写数字，单位默认为像素：
<img src="images/photo.jpg" alt="风景照" width="800" height="400">
提前指定宽高可以让浏览器在图片加载完成前预留好空间，避免页面布局抖动，提升用户体验和性能评分。现代浏览器会自动按属性比例缩放图片，配合CSS的max-width: 100%即可实现等比自适应。
二、图片路径的引用技巧
路径是图片引用中最容易出错的部分。相对路径指的是相对于当前HTML文件的位置，例如images/photo.jpg表示同级目录下的images文件夹中的图片，../images/photo.jpg则表示上一级目录。这种方式便于项目整体迁移，是最常用的写法。
绝对路径有两种形式。一种是服务器根路径，以斜杠开头，例如/static/images/photo.jpg，它表示从网站根目录出发查找文件，不受当前页面所在层级影响。另一种是完整的URL地址，例如https://ipipp.com/images/photo.jpg，适合引用其他站点上的图片资源，也就是通常所说的外链。
使用外链图片需要注意跨域和防盗链问题。有些网站通过HTTP Referer检测来禁止图片被外部引用，表现为本地打开正常、发布到线上后图片全部失效。排查时可以通过F12开发者工具的Network面板查看图片请求的状态码：404表示地址错误，403通常意味着被防盗链拦截。解决办法是将图片下载到自己的服务器上引用，或使用支持外链的图床服务。
还需要注意文件名的大小写和空格问题。Linux服务器对路径大小写敏感，本地Windows环境正常显示的Photo.JPG上传后可能因为写成photo.jpg而报404。文件名中包含中文或空格也可能在某些环境下引发问题，建议统一使用小写英文加数字的命名方式。
三、将图片变成可点击链接
让图片成为超链接，只需要把<img>标签嵌套在<a>标签内部即可：
<a href="https://ipipp.com/gallery" target="_blank" title="查看相册">
<img src="images/cover.jpg" alt="相册封面" width="300" height="200">
</a>点击图片后浏览器会跳转到href指定的地址。加上target="_blank"可以在新标签页打开链接，title属性则提供鼠标悬停时的提示文字。这种图片热点链接在导航横幅、产品列表缩略图等场景中应用广泛。
默认情况下，链接内的图片可能带有蓝色边框或底部空隙。边框问题可以通过CSS的img { border: 0; }解决，底部空隙则是img作为行内元素与文本基线对齐造成的，设置display: block或vertical-align: middle即可消除。
如果希望一张图片的不同区域点击后跳转到不同地址，可以使用图像映射技术，配合<map>和<area>标签定义热区坐标，这在地图导航类页面中仍然常见，但响应式适配较差，现代项目更多采用叠加透明按钮的方案替代。
四、响应式图片与语义化包装
不同屏幕尺寸加载同一张大图会浪费流量。HTML5新增的<picture>元素允许根据条件提供多个候选图源，浏览器自动选择最合适的一个：
<picture>
<source media="(min-width: 1024px)" srcset="images/banner-large.jpg">
<source media="(min-width: 600px)" srcset="images/banner-medium.jpg">
<img src="images/banner-small.jpg" alt="响应式横幅">
</picture>注意<picture>内部必须保留一个<img>标签作为兜底，不支持source的旧浏览器以及所有条件都不满足时会加载它。此外，srcset配合sizes属性还能根据屏幕像素密度选择不同分辨率的图片，在Retina屏幕上呈现更清晰的效果。
在文章或教程类页面中，建议用<figure>和<figcaption>包装图片及其说明文字，这样在文档结构上明确了图片与图注的从属关系：
<figure>
<img src="images/chart.png" alt="季度销量统计图" width="600" height="400">
<figcaption>2024年第一季度销量统计</figcaption>
</figure>这种方式符合HTML5的语义化理念，对搜索引擎理解页面结构也有帮助。此外，懒加载也是现代图片优化的标配，只需给img添加loading="lazy"属性，浏览器就会在图片即将进入可视区域时才发起请求，显著减少首屏加载时间。
总结来说，HTML5引用图像的核心是写对src路径、写好alt文本、预留宽高避免布局偏移，再根据场景选用picture实现响应式、figure实现语义化、loading实现懒加载。掌握这些要点后，无论是简单的静态页面还是复杂的动态网站，都能规范高效地处理图片资源的引用与展示。