#HTML #前端 #优质博文
真长知识了~
A Few Things About the Anchor Element’s href You Might Not Have Known
author Jim Nielsen
真长知识了~
A Few Things About the Anchor Element’s href You Might Not Have Known
AI 摘要:本文深入探讨了 HTML 锚点 <a> 标签中 href 属性的一些不常见但非常实用的值。文章不仅回顾了 mailto: 、文本片段 (text fragments) 等已知用法,更重点介绍了一些鲜为人知的技巧,例如使用 ""、. 和 ? 对当前页面进行不同方式的重载,以及它们如何处理 URL 的查询参数和哈希。此外,文章还涵盖了 data: URL、媒体片段和 PDF 页面链接等高级应用,为前端开发者提供了更丰富的链接处理知识。
1. 页面导航与重载
• href="#" 或 #top 这两种写法都可以让页面滚动到顶部。特别的是,即使页面中不存在 id="top" 的元素,#top 依然会按规范 (spec) 生效。
• href="": 重新加载当前页面。此操作会保留 URL 中的查询参数,但会移除哈希值(# 及其后的部分)。
• href=".": 重新加载当前页面,同时移除查询参数和哈希值。注意:此行为对 URL 末尾是否有斜杠 / 非常敏感。如果 URL 是 /path,它会导航到父目录 /;如果 URL 是 /path/,它会导航到当前目录 /path/。
• href="?": 重新加载当前页面,移除查询参数和哈希值,但会在 URL 末尾保留一个 ? 字符。与 href="." 不同,此行为不受末尾斜杠的影响。
2. 特殊协议与片段链接
• href="data:": 可以创建指向 data: URL 的链接,将文本、HTML 等小型数据直接编码在链接中,实现不依赖外部资源的导航。
• 媒体片段 (Media Fragments): 允许链接到音视频文件的特定时间段。例如,video.mp4#t=10,20 会从视频的第 10 秒开始播放,到第 20 秒时停止。
• PDF 页面链接: 可以通过 #page=<页码> 的形式,直接链接到 PDF 文件中的某一页,例如 my-file.pdf#page=42。
author Jim Nielsen