2024-8-10 23:2:3 Author: blog.axiaoxin.com(查看原文) 阅读量:5 收藏
在 Web 开发中，使用 badges 作为展示项目状态、数据统计、或品牌标识的方式非常流行。通常情况下，我们使用<img>标签来显示这些 badges。然而，当需要为 badge 设置点击跳转功能时，简单的<img>标签是不够的。这时，可以使用 HTML 的<object>标签来实现。
本文将详细介绍<object>标签的用法，并说明如何为 Shields.io 生成的 badge 设置正确的跳转链接。
一、HTML <object> 标签概述
1.1 <object> 标签的作用
<object> 标签是一个通用的容器，可以在网页中嵌入各种类型的外部资源，如图片、HTML 文件、PDF、视频等。它相比<img>标签更强大，因为它不仅支持图片，还支持其他媒体类型，同时可以处理资源的交互性。
1.2 <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 设置跳转链接
在 Shields.io 创建 badge 时，可以使用 link 参数设置点击跳转链接。但需要注意的是，link 参数只能在<object>标签中生效，而不能在<img>标签中使用。
2.1 Badge 生成示例
假设你已经生成了如下的 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> 标签。
2.2 在 HTML 中嵌入带有链接的 Badge
下面是如何在 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>
2.3 解析示例代码
<object>标签的data属性指定了 badge 的 URL，其中包含了link参数，该参数设置了点击跳转的链接。type="image/svg+xml"指定了资源的 MIME 类型为 SVG 图片。- 如果浏览器不支持
<object>标签，用户将会看到标签内部的备用内容。
2.4 如何在项目中使用
在你的 HTML 页面或项目中，可以直接将上述<object>标签的代码插入到需要显示 badge 的位置。这样，当用户点击 badge 时，就会跳转到你指定的链接地址。
三、注意事项
- 浏览器支持：
<object>标签虽然功能强大，但并不是所有的浏览器都完全支持其功能，特别是在处理复杂的交互性时。因此，建议在使用前进行兼容性测试。 - 与
<img>的区别：<img>标签仅能用来展示图片，无法处理资源的交互性，因此在需要点击跳转的场景下，<object>标签是更好的选择。 - SVG 图片的 MIME 类型：在使用
<object>标签加载 SVG 图片时，务必确保type属性的值为image/svg+xml。
通过本文的介绍，你应该已经掌握了<object>标签的基本用法，并了解了如何使用它来为 Shields.io 生成的 badge 设置正确的跳转链接。在未来的项目中，你可以利用<object>标签来实现更复杂的资源嵌入和交互效果。
如有侵权请联系:admin#unsafe.sh