用链接和图片连接内容
上一章完成了首页文字，但四个页面之间还不能跳转，页面也没有视觉内容。这一章解决两个实际问题：怎样写可靠的相对路径，以及怎样让图片即使加载失败也仍然有意义。
先把文件放在可预测的位置
在项目中创建 images 文件夹，并准备三张你有权使用的图片。文件名尽量使用小写英文字母、数字和连字符，不要混用空格。
files
city-walk/
├── index.html
├── routes.html
├── schedule.html
├── contact.html
└── images/
├── river-walk.jpg
├── old-town.jpg
└── park.jpg路径是从“当前文件所在位置”出发寻找目标文件。因为四个 HTML 文件在同一层，所以从 index.html 到 routes.html 的路径就是 routes.html；从 index.html 到河岸图片则是 images/river-walk.jpg。
用 a 元素创建页面导航
链接的基本写法是：
html
<a href="routes.html">查看漫游路线</a>href 保存目标地址，开始标签和结束标签之间是可点击的链接文字。链接文字应该说明点击后会到哪里，尽量少写没有上下文的“点这里”。
把同一组导航暂时加入四个页面的 <body> 顶部：
html
<p>
<a href="index.html">首页</a>
<a href="routes.html">路线</a>
<a href="schedule.html">行程</a>
<a href="contact.html">报名</a>
</p>保存四个文件，再逐个点击链接。相对路径只有在实际目录结构中检查才可靠。
区分三种常见地址
同级文件使用相对路径：
html
<a href="routes.html">路线</a>站外页面使用完整 URL：
html
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">查阅 HTML 文档</a>页面内部跳转使用 # 加目标元素的 id：
html
<a href="#canal-route">跳到运河路线</a>
<h2 id="canal-route">运河路线</h2>如果外部链接必须在新标签页打开，可以加 target="_blank"，同时加上 rel="noopener noreferrer"：
html
<a
href="https://example.com/weather"
target="_blank"
rel="noopener noreferrer"
>
查看天气
</a>不要让所有链接都强制新开标签页。用户通常更熟悉普通链接的行为。
用 img 放入有替代文本的图片
在 routes.html 中加入第一张图片：
html
<h2 id="canal-route">运河慢行线</h2>
<img
src="images/river-walk.jpg"
alt="傍晚的河岸步道，右侧有连续的石栏杆"
width="960"
height="640"
>几个属性各自解决不同问题：
src是图片文件的路径。alt在图片无法显示时提供替代说明，也会被屏幕阅读器读取。width和height给浏览器预留正确比例的空间，减少加载时页面跳动。请填写图片真实尺寸或与真实比例一致的数值。
替代文本应该表达图片在当前页面中的作用。若照片在说明路线入口，alt="运河慢行线入口，左侧是红色游客中心指示牌" 比 alt="图片" 更有用。纯装饰图片可以使用空替代文本 alt=""，但不能直接省略 alt。
alt 不是图片标题，也不用写“这是一张……的图片”。直接描述用户错过的关键信息即可。
用 figure 组合图片和说明
当图片需要可见说明时，使用 <figure> 和 <figcaption>：
html
<figure>
<img
src="images/old-town.jpg"
alt="青石路两侧保留着木结构店铺"
width="960"
height="640"
>
<figcaption>老街南段，上午人少，适合作为路线起点。</figcaption>
</figure>figcaption 是所有人都能看到的说明，alt 是图片的替代内容。两者可以互相补充，不必逐字重复。
为不同屏幕准备图片来源
如果你有同一画面的不同尺寸，可以使用 srcset 和 sizes：
html
<img
src="images/river-walk-960.jpg"
srcset="
images/river-walk-480.jpg 480w,
images/river-walk-960.jpg 960w,
images/river-walk-1440.jpg 1440w
"
sizes="(max-width: 600px) 100vw, 960px"
alt="傍晚的河岸步道，右侧有连续的石栏杆"
width="960"
height="640"
>浏览器会结合屏幕宽度、像素密度和缓存情况选择合适文件。初学项目只有一张图时，先写好普通 src、alt、width 和 height，不要为了“高级”而制造不存在的图片文件。
完成路线页的第一版
把 routes.html 的 <body> 改成下面的版本。图片尺寸按你的真实文件调整：
html
<body>
<p>
<a href="index.html">首页</a>
<a href="routes.html">路线</a>
<a href="schedule.html">行程</a>
<a href="contact.html">报名</a>
</p>
<h1
故意把一个 src 文件名改错，刷新并观察 alt 如何成为替代信息，然后再改回来。下一章我们会把目前用段落堆起来的导航和路线步骤，改成语义明确的列表。