图片、链接与相对路径
学员页面通常需要显示头像、跳转到登记页，并在长页面中快速定位内容。本节把上一节的路径知识应用到图片和链接。
在页面中显示图片
使用 img 显示图片：
<img src="./assets/p01/c03_link_image/avatar.svg" alt="默认学员头像"/>预览效果：
常用属性：
| 属性 | 作用 |
|---|---|
src | 图片地址 |
alt | 图片无法显示时的替代文本，也供辅助技术读取 |
width、height | 图片的显示尺寸 |
loading="lazy" | 图片接近可视区域时再加载 |
<img
src="./assets/p01/c03_link_image/avatar.svg"
alt="张三的学员头像"
width="120"
height="120"
loading="lazy"
/>预览效果：
width 和 height 的数字默认按 CSS 像素理解。课程后面会用 CSS 控制复杂尺寸和裁剪。
举例：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<title>卡通学员图片</title>
</head>
<body>
<img src="./assets/p01/c03_link_image/cartoon_student.png" alt="背着书包挥手的卡通学员"/>
</body>
</html>浏览器预览效果如下图所示。
编写 alt 与 title
alt 是替代文本，应根据图片用途编写：
<!-- 内容图片：说明图片表达的信息 -->
<img src="./images/zhang-san.svg" alt="张三的学员头像"/>
<!-- 纯装饰图片：使用空 alt -->
<img src="./images/divider.svg" alt=""/>图片无法显示后，可以看到浏览器会显示 alt的提示文字，
title 只是补充提示，不能替代 alt：
<img
src="./assets/p01/c03_link_image/avatar.svg"
alt="默认学员头像"
title="尚未上传个人头像"
/>预览效果：
根据文件位置推导路径
目录如下：
student-page/
├── index.html
├── pages/
│ ├── register.html
│ └── detail.html
└── images/
└── avatar.svgindex.html 引用头像：
<img src="./images/avatar.svg" alt="默认学员头像"/>pages/detail.html 引用同一张头像：
<img src="../images/avatar.svg" alt="默认学员头像"/>先确定当前 HTML 文件位置，再推导路径，不要机械背诵 ../ 的数量。
创建页面链接
超链接随处可见，可以说是网页中最常见的元素了，例如百度的导航、图片列表等都用到超链接。只要我们轻轻一点，就会跳转到其他页面。
超链接，英文名是 hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。
在 HTML 中，我们可以使用 a 标签来实现超链接。：
<a href="./pages/register.html">登记新学员</a>预览效果（站内链接仅展示外观，需在示例目录中打开才能跳转）：
href 表示跳转地址。链接文字应说明目标，不要只写“点击这里”。
跳转到站内页面
<nav>
<a href="./index.html">学员列表</a>
<a href="./pages/register.html">新增学员</a>
</nav>预览效果：
页面只有一个导航区域时，直接使用 <nav> 即可；如果页面有多个导航区域，应使用不同的 aria-label 说明它们各自的用途。例如，主导航和页面内容导航可以分别写成：
<nav aria-label="主要导航">
<a href="./index.html">学员列表</a>
<a href="./pages/register.html">新增学员</a>
</nav>
<nav aria-label="页面内容">
<a href="#basic-info">基本信息</a>
<a href="#course-info">课程信息</a>
</nav>预览效果：
aria-label 应描述导航区域的职责，不要为了形式统一给每个导航都写相同的标签。
在 pages/register.html 中返回首页：
<a href="../index.html">返回学员列表</a>预览效果：
打开外部网站
<a
href="https://developer.mozilla.org/"
target="_blank"
rel="noopener"
>
查看 MDN Web 文档
</a>预览效果：
target="_blank" 表示在新标签页打开。外部新窗口链接配合 rel="noopener"，避免新页面控制原页面。
a 标签的 target 属性取值有 4 种，如下表所示。
| 属性值 | 说明 |
|---|---|
_self | 默认值，在原来窗口打开链接 |
_blank | 在新窗口打开链接 |
_parent | 在父窗口打开链接 |
_top | 在顶层窗口打开超链接 |
一般情况下，我们只会用到 _blank 这一个值，也只要记住这一个就够了，其他三个值不需要去深究。
邮箱和电话链接
<a href="mailto:student@example.com">student@example.com</a>
<a href="tel:13800000000">13800000000</a>预览效果：
桌面浏览器的具体行为取决于系统应用，手机通常可以直接打开邮件或拨号程序。
把图片作为链接
把图片放在 a 内部，点击图片即可跳转：
<a href="./pages/detail.html">
<img src="./images/avatar.svg" alt="查看张三的详细信息"/>
</a>预览效果：
此时 alt 应描述链接目的，而不只是说“头像图片”。
实现页面内定位
长页面可以跳转到指定 id：
<nav aria-label="页面内容">
<a href="#basic-info">基本信息</a>
<a href="#course-info">课程信息</a>
</nav>
<section id="basic-info">
<h2>基本信息</h2>
<p>填写姓名和手机号。</p>
</section>
<section id="course-info">
<h2>课程信息</h2>
<p>选择班级和学习方向。</p>
</section>预览效果（点击目录可跳到对应内容）：
基本信息
填写姓名和手机号。
课程信息
选择班级和学习方向。
id 在同一个页面中必须唯一。
也可以跳转到另一个页面的指定位置：
<a href="./pages/register.html#course-info">填写课程信息</a>完成学员资料导航
<header>
<h1>张三的学员资料</h1>
<nav aria-label="资料导航">
<a href="#profile">个人资料</a>
<a href="#contact">联系方式</a>
<a href="./register.html">重新登记</a>
</nav>
</header>
<main>
<section id="profile">
<h2>个人资料</h2>
<img
src="../assets/p01/c03_link_image/avatar.svg"
alt="张三的学员头像"
width="120"
height="120"
/>
</section>
<section id="contact">
<h2>联系方式</h2>
<p><a href="tel:13800000000">13800000000</a></p>
</section>
</main>预览效果（站内页面链接仅展示外观）：
张三的学员资料
个人资料
联系方式
小结
src指定图片地址，alt提供替代文本。- 相对路径始终从当前 HTML 文件开始计算。
a可以跳转页面、外部网站、邮箱、电话和页面锚点。- 链接文字和图片替代文本都应说明实际目的。