关于锚标签href属性的一些你可能不知道的事情

💡 原文英文,约600词,阅读约需2分钟。
📝

内容提要

文章探讨了锚标签href属性的多种用法,包括常见链接协议(如mailto:、tel:)、协议相对链接和文本片段链接。介绍了不同href值的效果,如href="#"可滚动到顶部,href=""可重新加载页面,href="."和href="?"分别移除搜索和哈希字符串。最后提到数据URL和媒体片段链接的用法。

🎯

关键要点

  • 文章探讨了锚标签href属性的多种用法。
  • 常见链接协议包括mailto:、tel:、sms:和javascript:。
  • 协议相对链接示例为href="//"。
  • 文本片段链接示例为href="#:~:text=foo"。
  • href="#"可以滚动到文档顶部。
  • href=""可重新加载当前页面,保留搜索字符串但移除哈希字符串。
  • href="."可重新加载当前页面,移除搜索和哈希字符串。
  • href="?"可重新加载当前页面,移除搜索字符串但保留路径。
  • href="data:"可创建指向数据URL的链接。
  • 媒体片段链接示例为href="video.mp4#t=10,20",可链接到媒体文件的特定部分。
  • 作者通过浏览器和JavaScript测试了这些用法。

延伸问答

锚标签的href属性有哪些常见的链接协议?

常见的链接协议包括mailto:、tel:、sms:和javascript:。

href="#"的作用是什么?

href="#"可以滚动到文档的顶部。

如何使用href="data:"创建数据链接?

可以使用href="data:text/plain,hello%20world"创建指向数据URL的链接。

href="."和href="?"有什么区别?

href="."会重新加载当前页面并移除搜索和哈希字符串,而href="?"则移除搜索字符串但保留路径。

如何使用href链接到媒体文件的特定部分?

可以使用href="video.mp4#t=10,20"链接到视频的特定时间段,从10秒开始播放到20秒停止。

href=""的作用是什么?

href=""会重新加载当前页面,保留搜索字符串但移除哈希字符串。

➡️

继续阅读