URL地址中的#符号使用说明

2023年6月11日上午8:14 • JavaScript

当我们访问网页时，常常会注意到 URL 地址中包含 # 符号。这个 # 符号在 URL 中有什么作用呢？下面我将详细讲解 “URL地址中的#符号使用说明”，希望能对大家有所帮助。

什么是 URL？

首先让我们来了解一下 URL 是什么。URL（Uniform Resource Locator），中文称统一资源定位符，是互联网上每个文件以及其他资源的唯一地址。URL 网络地址由协议（如 http、ftp 等）、服务器名称或 IP 地址（如 www.example.com 或 192.52.201.12）、端口号、路径和文件名（如 /path/to/myfile.html）组成。

URL 中的 # 符号

在 URL 中，我们常常可以看到 # 符号的存在，例如：http://example.com#section，其中 # 后面的字符串叫作 URL 锚点（也叫 fragment identifier）。锚点可以用在 HTML 文档中的特定元素上，以便通过 URL 直接定位到文件中的某个位置。

URL 锚点的使用方法

如下代码是一个经典的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Page Title</title>
</head>

<body>
<h1>Example Page Header</h1>
<p>This is the first paragraph of the page.</p>
<p>This is the second paragraph of the page.</p>

<p id="section1">Here's the section I want to link to.</p>
<p>This is the last paragraph of the page.</p>
</body>
</html>

在上面的 HTML 代码中，可以看到某个段落获得了一个 id 属性（ id="section1"）。由于此段落拥有唯一的 id，我们可以在 URL 中使用 # 符号直接引用它。例如，http://example.com#section1 将会转到页面中的这个段落，并将它展示在浏览器窗口视口中。这在长页面的开发中非常有用，因为它可以直接链接到页面的某个特定部分，而无需用户进行手动滚动查找。

   > [Example Page Header]
   > This is the first paragraph of the page.
   > This is the second paragraph of the page.
   >
   > Here's the section I want to link to.
   >
   > This is the last paragraph of the page.