href 属性可以使用的几种值
我之前曾撰文介绍过如何仅使用 HTML 重新加载文档，但这让我开始思考：<a>标签的 href 属性可以包含哪些值？
于是，我查阅了相关资料。我发现了一些我已经知道的内容，例如：
- 链接协议，如
mailto:、tel:、sms:和javascript:，这些协议用于处理特定类型的链接。 - 协议相对链接，例如
href=“//” - 文本片段 用于链接到页面上的特定文本片段，例如
href=“#:~:text=foo”
但我还发现了一些我之前不知道（或只模糊了解）的内容，因此我将它们记录下来以备记忆。
href=””#
滚动到文档顶部。我已经知道这一点。
但我写下这一点是因为，如果文档中不存在另一个具有 id=“top” 的元素，那么 #top 也会滚动到顶部。我不知道这一点。
（规范: “如果 decodedFragment 是字符串 top 的 ASCII 大小写不敏感匹配，则返回文档的顶部。”）
更新：HTeuMeuLeu 在 Mastodon 上指出，你可以使用 #page= 深度链接到 PDF 中的特定页面，例如 my-file.pdf#page42 将跳转到文件的第 42 页。
href=””
重新加载当前页面，保留搜索字符串但移除哈希字符串（如果存在）。
| URL | href=“” 解析为 |
|---|---|
/path/ |
/path/ |
/path/#foo |
/path/ |
/path/?id=foo |
/path/?id=foo |
/path/?id=foo#bar |
/path/?id=foo |
href=”.”
重新加载当前页面，同时移除搜索字符串和哈希字符串（如果存在）。
注意：如果你使用 href=“.” 作为当前页面的链接，请确保你的 URL 末尾有斜杠，否则可能会出现意外的导航行为。路径被解释为文件，因此 “.” 解析为当前位置的父目录。
| URL | href=“.” 解析为 |
|---|---|
/path |
/ |
/path#foo |
/ |
/path?id=foo |
/ |
/path/ |
/path/ |
/path/#foo |
/path/ |
/path/?id=foo |
/path/ |
/path/index.html |
/path/ |
href=”?”
重新加载当前页面，移除搜索和哈希字符串（如果存在）。然而，它保留 ? 字符。
注意：与 href=“.” 不同，尾随斜杠无关紧要。搜索参数将被移除，但路径将保持原样。
| URL | href=“?” 解析为 |
|---|---|
/path |
/path? |
/path#foo |
/path? |
/path?id=foo |
/path? |
/path?id=foo#bar |
/path? |
/index.html |
/index.html? |
href=”data:”
您可以创建跳转到 数据 URL 的链接。这种超可读的版本是：
<a href="data:text/plain,hello world">
View plain text data URL
</a>但您可能希望将 data: URL 进行编码，以避免意外行为，例如：
<a href="data:text/plain,hello%20world">
View plain text data URL
</a>不妨试试看（备注：可能在您的用户代理中无法正常工作）。以下是一个纯文本文件和一个 HTML 文件。
href=”video.mp4#t=10,20″
媒体片段 允许链接到媒体文件的特定部分，如音频或视频。
例如，video.mp4#t=10,20 链接到一个视频。它从 10 秒开始播放，并在 20 秒停止。
（支持 目前有限。）
亲自验证
我在浏览器和 JavaScript 中测试了这些功能。我认为这些都正确无误。
得益于 JavaScript 的 URL 构造函数（以及传递 base URL 的能力），我可以程序化地探索这些 href 如何解析。
以下是我编写的测试代码片段。你可以将这些代码复制粘贴到控制台中，它们都应该通过测试 🤞
