链接与图片

互联网的灵魂是"超链接"——点击一个词就能跳到另一个页面。而图片让网页从"纯文字"变成"图文并茂"。这一章讲清链接和图片的所有常用用法。

1. 链接 a 标签

a 是 anchor(锚)的缩写,用来创建超链接。最重要的属性是 href,指定点击后跳到哪:

<!-- 普通链接:href 指定目标地址 -->
<a href="https://example.com">访问 Example</a>

<!-- 在新标签页打开:target="_blank" -->
<a href="https://example.com" target="_blank" rel="noopener">
  新标签打开
</a>

<!-- 邮件链接:点击后调用邮件客户端 -->
<a href="mailto:zhangsan@example.com">发邮件</a>

<!-- 电话链接:手机上点击直接拨号 -->
<a href="tel:+8613800138000">打电话</a>

关于 target 属性:

target="_self"(默认):在当前标签页打开。
target="_blank":在新标签页打开。

配 target="_blank" 时务必加 rel="noopener",这是安全考虑——防止新页面通过 window.opener 操控原页面。现代浏览器默认已经隔离,但写上更稳。

2. 锚点:页内跳转

在很长的页面里,点击"目录"跳到对应位置,这就是锚点。href 写 #id,目标元素要有对应的 id 属性:

<!-- 锚点跳转:跳到本页 id 为 sec2 的元素 -->
<a href="#sec2">跳到第二节</a>

<!-- 目标元素要有对应的 id -->
<h2 id="sec2">第二节</h2>

<!-- 回到页面顶部 -->
<a href="#">回到顶部</a>

<!-- 跳到别的页面的某个锚点 -->
<a href="about.html#team">关于我们 - 团队</a>

这种"返回顶部"按钮就是 href="#" 实现的。注意 id 在同一页面内必须唯一。

3. 绝对路径 vs 相对路径

这是新手最容易混乱的地方,务必搞清楚:

<!-- 绝对路径:完整 URL,跨域跳转用 -->
<a href="https://example.com/page">外站链接</a>

<!-- 相对路径:相对于当前文件 -->
<a href="about.html">同目录</a>
<a href="blog/post.html">子目录</a>
<a href="../index.html">上级目录</a>

<!-- 站内根路径:以 / 开头,从网站根开始 -->
<a href="/about.html">从根开始</a>
<img src="/images/logo.png">

绝对路径:完整 URL,以 http:// 或 https:// 开头,用于跨站跳转。
相对路径:相对当前文件的位置。about.html 表示同目录;blog/post.html 表示子目录;../index.html 表示上级目录(../ 是"上一层")。
站内根路径:以 / 开头,从网站根目录开始算。最稳定,推荐在正式项目里用。

经验:本机开发时用相对路径最方便;上线后用根路径(/about.html)最稳——无论当前在几级目录,路径都不会错。

4. 图片 img 标签

img 是 image(图片)的缩写。src 指定图片路径,alt 是替代文字(图片加载失败或读屏时显示):

<!-- 基本:src 指定路径,alt 写替代文字 -->
<img src="cat.jpg" alt="一只橘猫">

<!-- 推荐同时写宽高,避免布局抖动 -->
<img src="cat.jpg" alt="一只橘猫" width="300" height="200">

<!-- title 属性:鼠标悬停时显示的提示 -->
<img src="cat.jpg" alt="一只橘猫" title="点击查看大图">

几个关键习惯:

必写 alt:既是无障碍(读屏软件读出图片内容),又是 SEO(搜索引擎看不懂图,只读 alt)。装饰性图片可以用空 alt(alt="")表示"可忽略"。
推荐写宽高:浏览器提前预留位置,避免图片加载完导致布局抖动(CLS 指标)。
图片格式:照片用 .jpg;图标、透明图用 .png;动画用 .gif;现代格式 .webp 体积更小、清晰度更高,推荐。

5. 图片路径的几种情况

和链接一样,图片路径也分绝对和相对:

src="cat.jpg":同目录。
src="images/cat.jpg":子目录。
src="../cat.jpg":上级目录。
src="https://cdn.example.com/cat.jpg":外站图片(注意防盗链问题)。

如果图片路径错了,浏览器会显示一个"破碎图标"和 alt 文字。F12 看 Network 面板能看到 404 报错。

6. figure 和 figcaption

插图经常需要配一段说明文字,用 figure(图形容器)+ figcaption(图说明)组合,语义更清晰:

<figure>
  <img src="chart.png" alt="2026 年销售额柱状图">
  <figcaption>图 1:2026 年各季度销售额对比</figcaption>
</figure>
<!-- figure 用于"图 + 标题"组合,
     figcaption 是图的说明文字 -->

搜索引擎和无障碍工具能识别这种结构,知道"这是一张图 + 说明"。

7. 图片优化建议

图片是网页体积的大头,优化好能让网站快很多:

压缩体积:用 TinyPNG、ImageOptim 等工具,体积减小 50% 以上几乎无质量损失。
用现代格式:WebP 比 JPEG 小 30%,AVIF 更小。
响应式:用 srcset 让浏览器根据屏幕大小选不同分辨率的图。
懒加载:加 loading="lazy",图片只在滚动到可视区时才加载,首屏更快。
别用 HTML 缩图:把大图设 width="100" 不会减小体积,该用 Photoshop 等工具真缩。

8. 链接和图片组合

把图片放进 a 里,就变成"点击图片跳转",常见于 logo、相册:

<!-- 普通链接:href 指定目标地址 -->
<a href="https://example.com">访问 Example</a>

<!-- 在新标签页打开:target="_blank" -->
<a href="https://example.com" target="_blank" rel="noopener">
  新标签打开
</a>

<!-- 邮件链接:点击后调用邮件客户端 -->
<a href="mailto:zhangsan@example.com">发邮件</a>

<!-- 电话链接:手机上点击直接拨号 -->
<a href="tel:+8613800138000">打电话</a>

实际就是把 img 替换 a 内的文字内容。点 logo 回首页就是这么做的。

小结

这一章你学会了用 a 创建各种链接(普通链接、新标签、邮件、电话、锚点),用 img 插入图片并写 alt,以及分辨绝对路径和相对路径。下一篇我们看列表与表格——组织多条信息和二维数据的工具。

← 上一篇标题、段落与文本

下一篇列表与表格 →

✈️💬