HTML 零基础教程

HTML 链接：绝对 URL

在上一章节里，我们探索了如何使用相对路径在同一个网站内部的页面之间进行链接。

现在，我们将学习如何链接到外部网站（比如链接到 Google 或 百度）。这则需要使用绝对 URL。

它能让你的用户轻松访问你自己网站以外的资源，构建起真正的互联网。

1. 理解绝对 URL

绝对 URL（Absolute URL），也称为完整 URL，提供了互联网上某个资源的完整地址。

无论你的链接放在哪一页，绝对 URL 都包含定位该资源所需的所有信息。这与相对 URL 形成对比，后者只指定相对于当前页面的路径。

1.1 绝对 URL 的解剖结构

一个典型的绝对 URL 包含以下几个部分：

  1. 协议 (Scheme)：指示访问资源所使用的协议（例如 https:// 或 http://）。
    1. https:// 是 HTTP 的安全版本，现在几乎所有网站都首选使用它。
  2. 域名 (Domain)：网站的名称（例如 www.example.com）。这是托管网站的服务器的人类可读地址。
  3. 路径 (Path)：资源在网站文件系统中的具体位置（例如 /about 或 /products/shoes）。
  4. 查询参数 (Query Parameters)(可选)：传递给服务器的额外信息（例如 ?search=HTML）。它们跟在问号 ? 后面。
  5. 片段标识符 (Fragment Identifier)(可选)：指定目标页面内的特定部分（例如 #introduction）。点击链接时，浏览器会自动滚动到该部分。

1.2 URL 结构示例

https://www.example.com/products/shoes?color=blue#size-chart

在这个例子中：

  • https:// 是 协议。
  • www.example.com 是 域名。
  • /products/shoes 是 路径。
  • ?color=blue 是 查询参数（指定颜色为蓝色）。
  • #size-chart 是 片段标识符（指向页面上标记为 "size-chart" 的部分）。

2. 使用绝对 URL 创建链接

要创建指向外部网站的链接，你依然使用 <a> 标签和 href 属性。

唯一的区别是：href 属性里填写的必须是完整的绝对 URL。

2.1 基础示例

链接到某个网站的首页。

<a href="https://www.example.com">访问 Example.com</a>

点击后，用户将跳转到 example.com 的主页。

2.2 链接到特定路径

链接到某个网站的具体页面。

<a href="https://www.example.com/about">了解更多关于我们</a>

点击后，用户将跳转到 example.com 的 "about"（关于）页面。

2.3 带查询参数的链接

链接到搜索结果页。

<a href="https://www.example.com/search?q=HTML+tutorial">搜索 HTML 教程</a>

注意：URL 中的空格通常被编码为 + 或 %20。

2.4 带片段标识符的链接（锚点）

链接到页面上的特定位置。

<a href="https://www.example.com/documentation#installation">跳转到安装说明</a>

点击后，页面不仅会跳转，还会自动滚动到 ID 为 installation 的部分。

3. 最佳实践

在使用绝对 URL 时，请遵循以下建议：

  1. 总是包含协议 (https://)：虽然有些现代浏览器可能会尝试猜测，但明确写出 https://是最好的做法，也是为了安全。
  2. 仔细检查 URL：确保 URL 正确且目标网站存在。拼写错误是导致“死链”（Broken Links）的常见原因。
  3. 使用描述性文字：链接文字应该清楚地告诉用户他们将去哪里。避免使用 "点击这里"。
  4. 考虑用户体验：思考是否需要在新标签页打开外部链接（我们在下一课会讲 target 属性）。
  5. 警惕链接失效：外部网站可能会改版或关闭。定期检查你的网站，修复失效的链接。