在 Web 开发中,使用 badges 作为展示项目状态、数据统计、或品牌标识的方式非常流行。通常情况下,我们使用<img>
标签来显示这些 badges。然而,当需要为 badge 设置点击跳转功能时,简单的<img>
标签是不够的。这时,可以使用 HTML 的<object>
标签来实现。
本文将详细介绍<object>
标签的用法,并说明如何为 Shields.io 生成的 badge 设置正确的跳转链接。
<object>
标签概述<object>
标签的作用<object>
标签是一个通用的容器,可以在网页中嵌入各种类型的外部资源,如图片、HTML 文件、PDF、视频等。它相比<img>
标签更强大,因为它不仅支持图片,还支持其他媒体类型,同时可以处理资源的交互性。
<object>
标签的基本用法<object data="path/to/resource" type="media_type">
Your browser does not support the object tag.
</object>
data
属性:指定要嵌入的外部资源路径。type
属性:指定资源的 MIME 类型(例如,image/png
,text/html
等)。<object>
标签或加载失败时,将显示这些内容。在 Shields.io 创建 badge 时,可以使用 link
参数设置点击跳转链接。但需要注意的是,link
参数只能在<object>
标签中生效,而不能在<img>
标签中使用。
假设你已经生成了如下的 badge:
https://img.shields.io/badge/%E9%98%BF%E5%B0%8F%E4%BF%A1%E7%9A%84%E5%8D%9A%E5%AE%A2-green?style=for-the-badge&label=%E4%BA%BA%E8%A8%80%E5%85%91&link=https%3A%2F%2Fblog.axiaoxin.com
此 URL 包含了一个点击后跳转到指定链接的 badge,然而要使其生效,必须使用<object>
标签,直接在<img>
标签外包裹<a>
标签是无法正确跳转到<a>
标签指定的链接的。
<a href="https://blog.axiaoxin.com/">
<img alt="Static Badge" src="https://img.shields.io/badge/%E9%98%BF%E5%B0%8F%E4%BF%A1%E7%9A%84%E5%8D%9A%E5%AE%A2-green?style=for-the-badge&label=%E4%BA%BA%E8%A8%80%E5%85%91&link=https%3A%2F%2Fblog.axiaoxin.com">
</a>
通过以上代码,点击图片后是无法跳转到 https://blog.axiaoxin.com/ 的。
那么,正确的方式应该如何实现呢?没错,就是本文讨论的 <object>
标签。
下面是如何在 HTML 页面中使用<object>
标签嵌入这个 badge,并确保点击后正确跳转到指定链接的示例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shields.io Badge Example</title>
</head>
<body>
<h1>人言兑-阿小信的博客</h1>
<object data="https://img.shields.io/badge/%E9%98%BF%E5%B0%8F%E4%BF%A1%E7%9A%84%E5%8D%9A%E5%AE%A2-green?style=for-the-badge&label=%E4%BA%BA%E8%A8%80%E5%85%91&link=https%3A%2F%2Fblog.axiaoxin.com" type="image/svg+xml">
你的浏览器不支持 `<object>` 标签。
</object>
</body>
</html>
<object>
标签的 data
属性指定了 badge 的 URL,其中包含了 link
参数,该参数设置了点击跳转的链接。type="image/svg+xml"
指定了资源的 MIME 类型为 SVG 图片。<object>
标签,用户将会看到标签内部的备用内容。在你的 HTML 页面或项目中,可以直接将上述<object>
标签的代码插入到需要显示 badge 的位置。这样,当用户点击 badge 时,就会跳转到你指定的链接地址。
<object>
标签虽然功能强大,但并不是所有的浏览器都完全支持其功能,特别是在处理复杂的交互性时。因此,建议在使用前进行兼容性测试。<img>
的区别:<img>
标签仅能用来展示图片,无法处理资源的交互性,因此在需要点击跳转的场景下,<object>
标签是更好的选择。<object>
标签加载 SVG 图片时,务必确保 type
属性的值为 image/svg+xml
。通过本文的介绍,你应该已经掌握了<object>
标签的基本用法,并了解了如何使用它来为 Shields.io 生成的 badge 设置正确的跳转链接。在未来的项目中,你可以利用<object>
标签来实现更复杂的资源嵌入和交互效果。