HTML object 标签用法详解:为你的Shields.io Badge设置链接
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/pngtext/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>标签指定的链接的。

比如:Static Badge

<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 时,就会跳转到你指定的链接地址。

三、注意事项

  1. 浏览器支持<object>标签虽然功能强大,但并不是所有的浏览器都完全支持其功能,特别是在处理复杂的交互性时。因此,建议在使用前进行兼容性测试。
  2. <img>的区别<img>标签仅能用来展示图片,无法处理资源的交互性,因此在需要点击跳转的场景下,<object>标签是更好的选择。
  3. SVG 图片的 MIME 类型:在使用<object>标签加载 SVG 图片时,务必确保 type 属性的值为 image/svg+xml

通过本文的介绍,你应该已经掌握了<object>标签的基本用法,并了解了如何使用它来为 Shields.io 生成的 badge 设置正确的跳转链接。在未来的项目中,你可以利用<object>标签来实现更复杂的资源嵌入和交互效果。



文章来源: https://blog.axiaoxin.com/post/html-object-badge-click-link/
如有侵权请联系:admin#unsafe.sh