介绍
欢迎来到 HTML 链接实验！超链接是万维网的基石，它允许用户在页面和资源之间导航。在 HTML 中，链接是使用 <a> (anchor) 标签创建的。
在本实验中，你将学习创建和管理链接的基本技能。你将从创建一个基本的外部链接开始，然后学习如何让它在新浏览器标签页中打开。之后，你将创建一个内部链接，跳转到同一页面上的另一个部分。最后，你将为链接添加一个工具提示（tooltip），以提升用户体验。
你将在 WebIDE 中使用一个 index.html 文件。你可以通过切换到 LabEx 界面中的“Web 8080”标签页来实时查看你的更改。
让我们开始吧！
添加带有 href 属性的标签以创建外部链接
在此步骤中，你将创建你的第一个超链接。<a> 标签，代表“anchor”（锚点），用于定义一个超链接。<a> 元素最重要的属性是 href，它指定了链接的目标 URL。
让我们添加一个指向 LabEx 网站的链接。
首先，从 WebIDE 左侧的文件浏览器中打开 index.html 文件。
现在，找到 <h2>Section 1</h2> 元素，并在其后的 <p> 标签内添加以下 <a> 标签。
<a href="https://labex.io">Visit LabEx</a>
你的 index.html 文件的 <body> 现在应该看起来像这样。请注意第一个部分内新增的链接。
<body>
<h1>Welcome to the HTML Links Lab</h1>
<p>
This page will be used to practice creating different kinds of HTML links.
</p>
<nav>
<!-- Navigation links will be added here -->
</nav>
<div class="section">
<h2>Section 1</h2>
<p>
<a href="https://labex.io">Visit LabEx</a>
</p>
</div>
<div class="section">
<h2>Section 2</h2>
<p>
This is the section we will link to from the top of the page. It is placed
far down to demonstrate the page jump effect.
</p>
</div>
</body>
添加代码后，保存文件（Ctrl+S 或 Cmd+S）。然后，切换到“Web 8080”标签页以查看你的新链接。点击它将带你到 LabEx 主页。
设置 target 属性为 _blank 以在新标签页中打开
在此步骤中，你将学习如何让链接在新浏览器标签页中打开。默认情况下，链接会在同一标签页中打开。要更改此行为，我们使用 target 属性。
设置 target="_blank" 会指示浏览器在新标签页或窗口中打开链接的文档。这是外部链接的常见做法，因为它能让用户停留在你的网站上，同时允许他们访问外部资源。
让我们修改你在上一步创建的链接。为 <a> 标签添加 target="_blank" 属性。
<a href="https://labex.io" target="_blank">Visit LabEx</a>
你的 index.html 文件第一个部分的更新内容现在应该包含这个修改后的链接：
<div class="section">
<h2>Section 1</h2>
<p>
<a href="https://labex.io" target="_blank">Visit LabEx</a>
</p>
</div>
保存文件并切换到“Web 8080”标签页。现在，当你点击“Visit LabEx”链接时，它应该会在一个新的浏览器标签页中打开，而你的实验环境标签页将保持打开状态。
创建指向 ID 锚点的内部链接
在此步骤中，我们将创建一个内部链接，也称为“页面锚点”或“跳转链接”。这些链接允许用户跳转到同一页面的特定部分，这对于长文档非常有用。
要创建内部链接，你需要将 href 属性设置为一个哈希符号（#），后面跟着你想要链接到的元素的 id。例如，href="#section-name"。
让我们在页面顶部的 <nav> 元素内添加一个将跳转到“Section 2”的链接。
在 <nav> 标签内添加以下行：
<a href="#section2">Jump to Section 2</a>
你的 index.html 文件导航区域现在应该看起来像这样：
<nav>
<!-- Navigation links will be added here -->
<a href="#section2">Jump to Section 2</a>
</nav>
保存文件并检查“Web 8080”标签页。你将在顶部看到新链接。如果你现在点击它，什么也不会发生，因为我们还没有定义目标锚点。我们将在下一步进行此操作。
为元素添加 id 属性以实现锚定
在上一步中，你创建了一个指向 #section2 的链接。现在，你需要为该链接创建目标。这可以通过使用 id 属性来完成。
id 属性为页面上的 HTML 元素提供了一个唯一的标识符。id 的值在 HTML 文档中必须是唯一的。我们的内部链接 href="#section2" 将会查找一个具有 id="section2" 的元素。
让我们为 Section 2 的 <h2> 标签添加这个 id。找到以下行：
<h2>Section 2</h2>
并修改它以包含 id 属性：
<h2 id="section2">Section 2</h2>
你的 index.html 文件第二个部分的更新内容现在应该看起来像这样：
<div class="section">
<h2 id="section2">Section 2</h2>
<p>
This is the section we will link to from the top of the page. It is placed
far down to demonstrate the page jump effect.
</p>
</div>
保存文件并返回“Web 8080”标签页。点击页面顶部的“Jump to Section 2”链接。浏览器现在应该平滑地滚动到“Section 2”标题。
使用 title 属性为链接添加工具提示
在最后一步中，你将学习如何为链接添加工具提示。工具提示提供额外的、非必需的信息，通常在用户将鼠标悬停在元素上时出现。这可以提高可访问性和用户体验。
我们可以使用全局的 title 属性为任何元素添加工具提示，包括链接。
让我们为指向 LabEx 的外部链接添加一个描述性标题。找到你在前两步中创建的链接，并为其添加一个 title 属性。
<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
>Visit LabEx</a
>
你的最终 index.html 文件现在应该包含我们在整个实验中添加的所有元素。第一部分将看起来像这样：
<div class="section">
<h2>Section 1</h2>
<p>
<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
>Visit LabEx</a
>
</p>
</div>
最后一次保存文件。转到“Web 8080”标签页，并将鼠标悬停在“Visit LabEx”链接上。应该会出现一个带有文本“Go to the LabEx homepage”的小框。
总结
恭喜你完成了本次实验！你已经掌握了 HTML 中创建和自定义链接的基础知识。
在本次实验中，你练习了如何：
- 使用带有
href属性的<a>标签创建外部链接。 - 使用
target="_blank"属性在新的标签页中打开链接。 - 使用
href="#id"创建内部页面锚点，以实现单页导航。 - 使用
id属性为内部链接定义目标。 - 使用
title属性为链接添加信息性工具提示，以获得更好的用户体验。
这些技能对于构建可导航且用户友好的网站至关重要。继续练习，以提高你的 HTML 熟练度！
