XHTML 链接和导航

2025 年 2 月 14 日 | 阅读 8 分钟

正如你可能知道的，网络是一个庞大的、相互链接的文件系统，而正是这些链接将这个网络连接在一起。链接和导航是 XHTML 中不可或缺的部分，它们帮助用户轻松地从一个网页跳转到另一个网页，或者在页面内的不同区域之间跳转。掌握在 XHTML 中创建和管理链接的技巧是构建结构良好且用户友好的网站的基础。

XHTML 中的链接是什么？

链接，或称为超链接，是网页的元素，当单击时，会将用户传输到另一个文档、同一文档的另一个部分，甚至执行其他基于 Web 的操作，例如下载文件。XHTML 中的链接是使用 `` 元素构建的；否则，它被称为锚元素。

链接的基本结构

XHTML 中超链接的基本结构非常简单：

`` 元素： 这是定义链接的实际锚点标签。

`href` 属性： 此属性代表“超文本引用”，并反映链接指向的 URL。

单行文本： 这将是显示在网页上可单击的链接文本。

假设您想链接到一个网站，例如“https://www.example.com”。您将编写：

值得注意的是，`href` 属性在确定此链接的去向方面起着核心作用。

XHTML 中的链接类型

根据其去向，XHTML 中大致有以下类型的链接：

外部链接
内部链接
锚点链接
电子邮件链接
文件链接

让我们详细了解一下这些。

1. 外部链接

外部链接是指指向当前域之外的另一个网站或任何其他资源的链接。你可能已经知道，这类链接对于提供补充信息、引用或将用户重定向到另一个重要网站至关重要。

示例

单击此链接将转到外部网站 Wikipedia。

2. 内部链接

内部链接是指链接到同一网站上另一个页面的链接。这些对于导航目的、在您网站的不同部分之间移动非常有用。

示例

在这种情况下，该链接指向同一网站内的“about.html”。

3. 锚点链接

锚点链接是一种特殊的内部链接，它允许用户跳转到同一页面的特定部分。这在处理长文档或包含多个不同部分的页面时非常有用。

锚点链接的创建过程是先使用 `id` 属性定义锚点，然后链接到该锚点。

示例

<!-- Anchor Point -->
<h2 id="contact">Contact Us</h2>

<!-- Anchor Link -->
<a href="#contact">Go to Contact Section</a>

正如你所看到的，锚点链接的 `href` 属性引用了目标部分的 `id`。

4. 电子邮件链接

电子邮件链接允许访问者通过单击链接直接发送电子邮件。它在 `href` 属性中使用 `mailto:` 前缀来触发默认的电子邮件客户端。

示例

这将打开用户计算机上的电子邮件应用程序，并将新电子邮件发送到“info@example.com”。

5. 文件链接

文件链接允许用户从您的网页下载文件。这些可以是 PDF、图像或文档。

示例

这将从给定目录下载名为“sample.pdf”的文件。

链接中的 `target` 属性

`target` 属性指定链接的文档将在何处打开。它是一个可选属性，如果使用得当，可以极大地增强用户体验——特别是当您希望某些链接表现不同于其他链接时。此处列出了 `target` 属性的常见值：

`_self`： 当前窗口或标签页；这是默认值。

`_blank`： 在新窗口或标签页中打开链接的文档。

`_parent`： 在父框架中打开链接的文档。

`_top`： 在窗口的整个主体中打开链接的文档。

正如您可能从代码中猜到的，这将在新标签页中打开链接，从而使用户在浏览外部资源时仍留在您的网站上。

XHTML 中的导航栏

导航栏是位于网站每个页面顶部的可见内容条或块，为用户提供导航到不同部分或页面的链接。因此，导航栏最简单的形式就是一组被样式化成按钮或菜单的内部链接。

创建简单的导航栏

以下是如何使用 XHTML 创建基本的水平导航栏：

<div class="navbar">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="services.html">Services</a>
    <a href="contact.html">Contact</a>
</div>

这将生成包含指向您网站不同页面的链接的导航栏。使用 CSS 可以轻松地为这些链接设置样式，以构建按钮或标签页。

导航列表

使用无序列表 (`

`) 来构建导航菜单也很常见，这在样式和语义结构方面更加灵活。

示例

<ul class="navbar">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

可以使用 CSS 将此列表变成水平或垂直导航栏，具体取决于您的网站设计。

链接和导航技巧

正如您可能已经知道的，链接和导航不仅仅是构建功能性元素；它们是用户体验和可访问性的重要组成部分。以下是应遵循的最佳实践：

描述性的链接文本： 确保您的链接文本能够自我描述，让用户能够知道链接将带他们去哪里。避免使用“点击此处”等通用文本。

明智地使用锚点链接： 锚点链接在上下滚动非常长的页面时非常有用，但过度使用可能会使内容杂乱，并引起用户的困惑。

在新标签页中打开外部链接： 提供外部链接时，最好包含 `target="_blank"` 以在新标签页中打开链接。这样，当用户访问链接内容时，他们仍留在您的网站上。

一致的导航： 导航的结构应在所有页面上保持一致。这使得用户可以轻松地在您的网站上移动，并形成积极的用户体验。

可访问性注意事项： 通过文本描述您的链接，而不是颜色。换句话说，避免仅依赖颜色来区分链接与常规文本，以使您的链接可供所有用户访问。

SEO 友好链接： 确保为链接使用描述性和相关的文本，并尽量使其尽可能详细，以利于 SEO。这将帮助搜索引擎将您的链接与正确的上下文相关联，并有助于排名。

XHTML 中的可访问导航

您可能知道，Web 开发中的可访问性是一个至关重要的因素。它应该确保每个用户都能有效地使用您的网站，即使是残障人士。就导航而言，这意味着提供易于所有人使用的链接和导航结构，特别是那些依赖屏幕阅读器等辅助技术的人。

ARIA 在导航中的作用

ARIA (Accessible Rich Internet Applications) 规范通过提供额外的元数据，使 Web 内容和 Web 应用程序更具可访问性。您可以通过指定 ARIA 属性和角色，使您的可导航 XHTML 更具可访问性，特别是对于那些与辅助技术一起使用它们的人。

例如，为了让屏幕阅读器清楚地知道一组链接构成了一个导航栏，您可以使用如下的角色属性：

<nav role="navigation">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

这向辅助技术明确了这是一个导航，因此用户更容易理解其预期用途。

跳过链接

另一个非常重要的可访问性功能是跳过链接。这些链接可以绕过重复的内容（如导航），让用户直接跳转到页面上的主内容。对于使用键盘或屏幕阅读器进行导航的用户来说，这非常有用。

<a href="#main-content" class="skip-link">Skip to Main Content</a>
<!-- Navigation -->
<nav role="navigation">
    <!-- Navigation links here -->
</nav>
<!-- Main Content -->
<div id="main-content">
    <h1>Welcome to Our Website</h1>
    <p>Here is where the main content begins...</p>
</div>

这说明当用户单击“跳至主内容”链接时，他们将被自动带到主内容区域，从而提高了页面的整体可用性。

高级链接技术

除了上述简单的链接类型外，XHTML 中还有一些高级技术，可以通过这些技术增强网站的功能和交互性。

链接到媒体文件

虽然我们已经讨论了链接到可下载文件，但链接到媒体文件（如图像、视频和音频）可以真正为您的网站交互性开辟新途径。这些媒体文件可以在新窗口中打开，直接嵌入到页面中，甚至由用户下载。

例如，如果您要链接到一个视频文件：

这个简单的链接将允许用户单击并下载视频，或在浏览器媒体播放器中打开视频，具体取决于他们的设置配置。

创建图像链接

图像也可以代表链接；这就是按钮的制作方式，或者更常见的是图形导航组件，如图像菜单。这通过将 `` 元素嵌套在 `` 元素内来完成。

<a href="index.html">
    <img src="images/logo.png" alt="Home">
</a>

在此示例中，徽标图像是链接到主页的链接。在这种情况下，`alt` 属性非常关键，因为它将为屏幕阅读器提供描述性文本，从而确保链接对无法看到图像的用户是可访问的。

链接到 JavaScript 函数

您还可以创建执行 JavaScript 函数的链接，从而为您的网站带来一些动态行为。当链接需要执行除了实际链接到某处之外的操作时，这种情况很常见。

示例

<a href="#" onclick="showAlert()">Click Me</a>
<script type="text/javascript">
    function showAlert() {
        alert('You clicked the link!');
    }
</script>

该示例将在单击链接时创建 JavaScript 警告，这表明链接的用途不仅仅是简单的导航。