A05 链接与图片

摘要：页面从「一屏文字」变成「可浏览的站点」，靠的是链接与图片两件事。这两类标签的失败率也最高，绝大多数表现为「点了没反应」或「图片显示为破图」，原因几乎都在路径。本文用一张路径解析图讲清相对路径与绝对路径，再给出链接与图片的完整属性清单与四条排错步骤。
关键词：超链接，相对路径，绝对路径，替代文本，懒加载

所属：frontend/html / A-入门 ｜上一篇：A04-文本与段落 ｜下一篇：A06-列表与表格

1 引言

链接与图片都依赖「资源地址」。地址写错时浏览器不会提示错误原因，只表现为点击无反应或显示破图图标，因此排查成本高。

本文说明三件事：地址的解析规则、链接与图片各自的必要属性、以及失败时的定位顺序。范围见表 1-1。

项	本文覆盖	本文不覆盖
链接	`a` 的 href/target/rel、页内锚点	路由与前端导航（JavaScript）
图片	`img` 的 src/alt/宽高/loading、figure	图片压缩与格式选型（后续阶段）
路径	相对路径、绝对路径、根相对路径	服务器重写与 CDN 配置

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器可用	访问 `http://localhost` 有响应
浏览器	Chrome 130+ / Edge 130+	地址栏 `about:version` 查看
目录	`html-practice` 下存在 `assets/images/`	缺目录时新建
素材	任意一张图片，命名为 `avatar.jpg`	文件名全小写，无空格
前置	A04	能用 p、h2 组织内容

3 原理与实现

3.1 路径是如何被解析的

浏览器拿到 href 或 src 后，按「所在文件位置 + 相对路径」拼接出最终地址，如图 3-1 所示。

flowchart LR
    A["index.html<br/>位于 /html-practice/"] --> B["相对路径<br/>assets/images/avatar.jpg"]
    B --> C["拼接结果<br/>/html-practice/assets/images/avatar.jpg"]
    C --> D{"文件存在?"}
    D -->|"是"| E["加载并显示"]
    D -->|"否"| F["破图 / 404"]

图 3-1 相对路径的拼接过程

图上可见：路径永远相对于当前文件所在目录解析，与浏览器地址栏显示的路径无关，这是最常见误判点。

3.2 链接与图片的写法

<!-- 运行环境：Chrome 130+；文件位于 html-practice/index.html -->
<nav>
  <a href="./about.html">关于</a>
  <a href="#contact">联系方式</a>
  <a href="https://developer.mozilla.org/zh-CN/" target="_blank" rel="noopener noreferrer">MDN</a>
</nav>

<h2 id="contact">联系方式</h2>
<p>邮件：<a href="mailto:hello@example.com">hello@example.com</a></p>

<figure>
  <img
    src="./assets/images/avatar.jpg"
    alt="头像：浅色背景下的侧脸照片"
    width="320"
    height="320"
    loading="lazy"
  />
  <figcaption>头像照片，2026 年 8 月摄于苏州。</figcaption>
</figure>

链接与图片的关键属性见表 3-1。

标签 / 属性	作用	必填	写错的表现
`a href`	目标地址	是	点击无反应，光标不变手型
`a target="_blank"`	新标签页打开	否	默认在当前页跳转
`a rel="noopener noreferrer"`	新窗口打开时切断来源引用	建议	存在安全与性能风险
`a href="#id"`	页内锚点	否	点击后页面不滚动，或跳到顶部
`img src`	图片地址	是	显示破图
`img alt`	图片替代文本	是	图片失败时无说明，朗读软件跳过
`img width/height`	预留占位尺寸，减少布局跳动	建议	加载时页面抖动
`img loading="lazy"`	延迟加载可视区外的图片	建议	首屏加载变慢
`figure` / `figcaption`	图文组合与图注	否	图注与图片在结构上无关联

三种路径写法与适用场景见表 3-2。

写法	示例	适用场景	风险
相对路径	`./assets/images/a.jpg`	站内资源，随目录一起移动	文件层级变化后需同步调整
根相对路径	`/assets/images/a.jpg`	站点根目录下的公共资源	本地双击打开时根目录变成磁盘根
绝对地址	`https://example.com/a.jpg`	外部资源	对方下线即失效

规则四条：站内资源一律用相对路径；target="_blank" 必须配 rel="noopener noreferrer"；图片必须写 alt，纯装饰图写 alt=""；页内锚点目标必须有对应 id。

4 验证与讨论

复制示例到 index.html，图片放到 assets/images/avatar.jpg。
刷新页面，确认导航、锚点、图片、图注四项正常。
打开开发者工具 Network 面板，刷新，观察图片请求状态是否为 200。
故意把 src 改为 ./assets/image/avatar.jpg，刷新观察破图与 404，再改回，理解路径敏感度。

检查项	预期结果	不通过时先看
站内链接	跳到 `about.html`	表 3-2 相对路径写法
页内锚点	页面滚动到「联系方式」	目标 `id` 是否一致
外链	新标签页打开 MDN	`target` 与 `rel`
图片	正常显示，下方有图注	Network 面板状态码
图片失败场景	显示替代文本，留有尺寸占位	`alt` 与宽高属性

讨论与局限。 本地图片路径正确但线上失效的典型原因是大小写不一致：Windows 不区分大小写，Linux 与对象存储区分。另外 width/height 只写数值即按像素处理，与 CSS 中的百分比布局混用时会冲突，样式细节留到 CSS 阶段。

5 常见问题

现象	原因	处理
图片破图，Network 为 404	路径层级写错，或文件名大小写不符	按图 3-1 逐段核对，文件名改全小写
点击链接无反应	`href` 为空或写成 `#`	补真实地址，临时占位用 `#` 但不留到发布
新窗口打开后原页面被替换	缺少 `target="_blank"`	补 `target` 与 `rel`
页内锚点跳到顶部	目标 `id` 不存在或拼写不同	用开发者工具搜索 `id` 值
图片变形	只写宽或只写高，比例被破坏	同时给宽高，或交给 CSS 控制

6 结论

序号	结论	依据
1	相对路径按当前文件所在目录解析	图 3-1
2	站内相对路径、公共资源用根相对路径	表 3-2
3	新窗口打开必须配 `rel`	表 3-1
4	`alt` 与宽高是图片的两项底线	表 3-1

参考文献

[1] MDN Web Docs · HTML 中的链接，https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks（访问于 2026-10-29）
[2] MDN Web Docs · img 元素，https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img（访问于 2026-10-29）