关于锚标签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=""会重新加载当前页面,保留搜索字符串但移除哈希字符串。
➡️