链接与文件路径

这一节要完成什么

新建“关于我”页面并从主页双向跳转，不再靠猜测修复 404。

先理解：为什么要学它

链接的核心是“从当前文件出发去哪里”。相对路径会随当前文件位置变化；绝对网址包含完整协议和域名。先画文件树，再写路径，比反复试 ../ 更可靠。

跟着做

my-learning-page/ ├─ index.html └─ pages/ └─ about.html

<!-- index.html -->
<a href="pages/about.html">关于我</a>
<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML">查阅 HTML 参考</a>

<!-- pages/about.html -->
<a href="../index.html">返回学习主页</a>

1. 按文件树新建 pages 文件夹和 about.html，复制一份完整文档骨架，不要只写一个 a。
2. 在主页加入第一个链接。当前位置是根目录，所以先进入 pages/。
3. 在 about 页面加入返回链接。.. 表示上一级目录，再找到 index.html。
4. 依次点击两个方向，观察地址栏每一步的文件位置。外部链接则使用完整的 https://...。

关键代码怎么读

• href 是目标地址，链接文字应说明点击后去哪里。避免只写“点击这里”。
• ./ 表示当前目录，../ 表示上一级；普通网站路径区分大小写。
• 如果新窗口确有必要，使用 target="_blank" 时同时加 rel="noopener noreferrer"，但普通导航优先留在当前窗口。

URL 与特殊字符

网址由协议、主机、路径、查询参数和片段组成，例如 https://example.com/search?q=html#result。#result 只跳到页面内对应的 id。在 HTML 文字中，& 开始字符引用，所以需要显示小于号时写 <，显示一个独立的 & 时写 &。浏览器会把它们显示为 < 和 &，不会误当成标签或引用的开头。

常见错误：看到什么，检查什么

自己完成一次

在根目录新建 notes/week-1.html。从主页链接过去，并在笔记页同时提供“返回主页”和“关于我”两个链接。先画树再写 href。

完成检查

• 我的页面出现了本节要求的新内容
• 我能不用看答案解释关键标签或属性
• 我主动制造并修复了至少一个错误