IGCSE ICT (0417) 学习笔记：HTML 导航（网站制作）
你好！欢迎阅读这份关于掌握网站制作（Website Authoring）中导航（Navigation）功能的指南。导航是任何网站的支柱——它告诉用户接下来可以去哪里。把它想象成为你网站绘制地图并设置路标的过程！
在 IGCSE ICT 实践考试中，你需要证明自己能够使用 HTML 创建功能性的超链接（hyperlinks）和内部跳转点（bookmarks）。别担心，一旦理解了基本的标签，操作起来非常简单！
1. 理解超链接与锚点（基础知识）
超链接（Hyperlink）是一个元素（通常是文本或图像），点击后会带你进入另一个位置。这个位置可以是另一个页面、不同的网站，甚至是同一页面内的另一个位置。
用于导航的核心 HTML 标签是锚标签（Anchor Tag）：<a>
锚标签 (<a>)
锚标签使用一个至关重要的属性，称为 href（超文本引用）。该属性指定了目标地址。
<a href="...">：这是你点击的实际链接。- 放置在开始标签和结束标签之间的文本或图像，就是用户看到并点击的内容。
示例：
<a href="homepage.html">返回首页</a>
当用户点击“返回首页”时，浏览器会跳转到名为“homepage.html”的文件。
什么是锚点/书签（Anchor/Bookmark）？
锚点或书签是网页内部一个特定的命名位置。如果你有一个很长的页面，并且想要一个“回到顶部”的按钮，你就需要在页面顶部设置一个书签。
- 书签通过在现有的 HTML 元素（如
<h1>或<p>标签）上使用id属性来创建。 - 单个页面上的每个
id都必须是唯一的。
类比： 把超链接想象成你要寄出的信件，而书签（ID）就是大型建筑物上特定的信箱编号。
如何创建书签（锚点目标）
在你希望链接跳转到的元素上使用 id 属性。
示例：创建一个名为“section1”的书签：
<h4 id="section1">主题 1 开始</h4>
超链接（Hyperlink）：可点击的元素（使用 <a href="...">）
书签/锚点（Bookmark/Anchor）：目标跳转点（使用 id="..."）
2. 不同类型的超链接（教学大纲清单）
你必须能够创建指向四种主要目标类型的链接。
2.1 链接到同一页面上的书签
这用于内部跳转（例如，从页面底部跳回到顶部）。href 属性必须以 #（井号）开头，紧随其后的是目标 id 名称。
示例（链接到上面创建的书签）：
<a href="#section1">跳转到主题 1</a>
记忆窍门： 如果你在 href 中看到 # 符号，就意味着这个链接是要去 #（同一个）页面内的某个地方！
2.2 链接到本地存储的其他网页
这是网站制作任务中最常见的链接类型。你链接到存储在同一文件夹或目录结构中的另一个 HTML 文件。这使用的是相对文件路径（Relative File Path）。
示例：
<a href="products.html">查看我们的产品</a>
2.3 链接到外部网站（URL）
此链接将用户带离你的网站，前往互联网上的其他网站。这需要绝对文件路径（Absolute File Path）。
- 链接必须包含完整的协议，通常是
http://或https://。
示例：
<a href="https://www.google.com">搜索 Google</a>
2.4 链接到电子邮件地址 (Mailto)
在 href 中使用 mailto: 协议，会打开用户的默认电子邮件客户端，并预填好收件人地址。
示例：
<a href="mailto:manager@site.org">向我们发送咨询</a>
2.5 使用图像作为超链接
你可以点击图像进行导航，而不是点击文字。要实现这一点，只需将 <img> 标签放置在 <a> 标签内部即可。
示例：
<a href="index.html"><img src="home_icon.jpg" alt="首页" /></a>
小贴士： 请务必记得为图像包含 alt 属性！如果图像加载失败，这对于可访问性非常重要。
3. 文件路径：绝对路径 vs. 相对路径
这是一个常见的混淆点，但对于你的实践操作至关重要，特别是在提交文件以供评分时。
3.1 相对文件路径（用于本地文件）
相对路径是文件相对于当前位置的地址。它假设浏览器已经知道你网站的根文件夹在哪里。
- 使用场景： 在你网站内的页面之间进行链接（例如，从 index.html 到 about.html）。
- 为什么要用？ 当考官将你的整个网站文件夹复制到他们的电脑上时，相对链接仍然有效，因为文件之间保持着正确的相对位置。
- 示例：
href="products/summer.html"（进入“products”文件夹并找到“summer.html”）
3.2 绝对文件路径（用于外部网站）
绝对路径是完整的、全路径地址，就像 GPS 坐标一样，从根目录或域名开始。
- 使用场景： 链接到你项目之外的网站（例如 Google、Wikipedia）。
- 关键特征： 它总是以协议（
http://或https://）开头。 - 示例：
href="https://www.example.com/page.html"
永远不要在本地电脑上使用绝对路径来链接自己的文件（例如：C:/Users/Student/Desktop/ICT/index.html）。当文件移动到考官的电脑上时，链接就会失效！对于本地链接，请务必坚持使用相对路径。
4. 控制链接目标（页面打开的方式）
有时你不希望用户完全离开当前页面；你可能希望链接的页面在新的标签页中打开。我们通过 <a> 标签内的 target 属性来控制这一点。
教学大纲要求你掌握如何在同一窗口、新窗口或指定的命名窗口中打开链接。
关键的目标值（Target Values）：
1. 同一窗口（默认行为）
这是默认行为。链接文档会在同一个浏览器窗口或标签页中替换当前文档。
代码（通常不需要指定，但也可以写）： target="_self"
2. 新窗口/标签页
这会强制链接文档在全新的、未命名的浏览器窗口或标签页中打开。这对于外部链接非常有用，这样用户就不会丢失你的网站。
代码： target="_blank"
示例：
<a href="https://externalsite.com" target="_blank">访问外部网站</a>
3. 指定的命名窗口
这通常用于使用框架（frames，尽管现在不太常见）时，或考试任务有明确要求时。如果已经存在同名的窗口，内容就会加载到那里；如果没有，则会创建一个名为该名称的新窗口。
代码： target="window_name"（其中 window_name 是你选择的任何名称，例如 info_popup 或 main_content）
示例：
<a href="data.html" target="info_frame">打开数据表</a>
1. 超链接使用 <a href="...">。
2. 书签使用 id="..."。
3. 网站内的文件始终使用相对路径。
4. 使用 target="_blank" 在新标签页中打开链接。