当前位置: 首页 > news >正文

html object标签介绍(用于嵌入外部资源通用标签)(已不推荐使用deprecated,建议使用img、video、audio标签)

文章目录

  • HTML `<object>` 标签详解
    • 基本语法与核心属性
      • 关键属性解析
        • 1. **`data`**
        • 2. **`type`**
        • 3. **`width` & `height`**
        • 4. **`name`**
    • 嵌入不同类型的资源
      • 1. **嵌入图像**
      • 2. **嵌入音频**
      • 3. **嵌入视频**
      • 4. **嵌入 PDF**
    • 参数传递与回退内容
      • **参数(`<param>`)的使用**
      • **回退内容(Fallback Content)**
    • 兼容性与替代方案
      • **历史背景与兼容性问题**
        • - **IE 与 ActiveX**:旧版 IE 依赖 `classid` 和 `codebase` 属性加载 ActiveX 控件。例如:
        • - **跨浏览器差异**:主流浏览器曾使用不同机制加载相同资源类型,导致兼容性问题。
      • **现代替代方案**
    • HTML5 中的变化
      • **弃用属性**
      • **新增属性**
    • 总结

HTML <object> 标签详解

基本语法与核心属性

<object> 标签是 HTML 中用于嵌入外部资源的通用机制。其核心功能是通过 datatype 属性加载资源,并通过参数(<param>)传递配置信息。以下是其基础语法:

<object data="resource_url" type="MIME_type" width="width" height="height"><!-- 回退内容(fallback content) --><p>您的浏览器不支持嵌入此资源。</p>
</object>

关键属性解析

1. data

指定资源的 URL,支持相对路径或绝对路径。例如:

<object data="image.jpg" type="image/jpeg"></object>
2. type

定义资源的 MIME 类型,帮助浏览器识别如何处理资源。例如:

  • 图像:image/jpeg
  • 音频:audio/mpeg
  • 视频:video/mp4
  • PDF:application/pdf
3. width & height

设置嵌入资源的尺寸,支持像素或百分比。例如:

<object data="video.mp4" type="video/mp4" width="600" height="400"></object>
4. name

为对象命名,便于 JavaScript 调用。例如:

<object name="myVideo" data="video.mp4" type="video/mp4"></object>

嵌入不同类型的资源

1. 嵌入图像

<object data="image.jpg" type="image/jpeg" width="300" height="200"><p>无法加载图像。</p>
</object>

2. 嵌入音频

<object data="audio.mp3" type="audio/mpeg" width="100%" height="50"><param name="autoplay" value="true"> <!-- 自动播放 --><param name="loop" value="true">     <!-- 循环播放 --><p>请安装音频播放器。</p>
</object>

3. 嵌入视频

<object data="video.mp4" type="video/mp4" width="640" height="360"><param name="controller" value="true"> <!-- 显示控制栏 --><p>请安装视频播放器。</p>
</object>

4. 嵌入 PDF

<object data="document.pdf" type="application/pdf" width="100%" height="600"><p>您的浏览器不支持 PDF 查看器。</p>
</object>

参数传递与回退内容

参数(<param>)的使用

通过 <param> 标签向嵌入资源传递参数,常用于配置播放器行为。例如:

<object data="video.mp4" type="video/mp4" width="640" height="360"><param name="autoplay" value="true">  <!-- 自动播放 --><param name="volume" value="0.5">     <!-- 初始音量 --><p>请安装视频播放器。</p>
</object>

回退内容(Fallback Content)

当浏览器不支持资源类型或加载失败时,显示回退内容。例如:

<object data="unsupported-resource.abc" type="application/unknown"><p>此资源无法加载,请尝试以下链接:<a href="unsupported-resource.abc">下载资源</a></p>
</object>

兼容性与替代方案

历史背景与兼容性问题

- IE 与 ActiveX:旧版 IE 依赖 classidcodebase 属性加载 ActiveX 控件。例如:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400"><param name="movie" value="flash_movie.swf"><param name="quality" value="high"><embed src="flash_movie.swf" quality="high" width="550" height="400"></embed>
</object>
- 跨浏览器差异:主流浏览器曾使用不同机制加载相同资源类型,导致兼容性问题。

现代替代方案

  • <img> 标签:优先用于图像嵌入,而非 <object>
  • <video><audio>:HTML5 提供的专用标签,简化了多媒体嵌入。例如:
    <video controls src="video.mp4" width="640" height="360"></video>
    

HTML5 中的变化

弃用属性

HTML5 废弃了部分旧属性,如 alignhspacevspace 等。例如:

<!-- HTML4 -->
<object align="middle" hspace="10" vspace="10" ...></object><!-- HTML5 -->
<object style="display: block; margin: 10px auto;" ...></object>

新增属性

  • form:指定对象所属的表单,允许对象参与表单提交。
  • usemap:关联客户端图像映射(<map>)。

总结

<object> 标签提供了灵活的资源嵌入机制,但其复杂性和兼容性问题限制了现代应用。开发者应优先使用语义化标签(如 <video><audio>),并在必要时通过 <object> 提供回退方案。理解 <param> 和回退内容的使用,有助于构建更健壮的网页体验。

相关文章:

html object标签介绍(用于嵌入外部资源通用标签)(已不推荐使用deprecated,建议使用img、video、audio标签)

文章目录 HTML <object> 标签详解基本语法与核心属性关键属性解析1. **data**2. **type**3. **width & height**4. **name** 嵌入不同类型的资源1. **嵌入图像**2. **嵌入音频**3. **嵌入视频**4. **嵌入 PDF** 参数传递与回退内容**参数&#xff08;<param>&a…...

专题练习1

优化: 找101-200的质数: 开发验证码: 解密数字 抽奖 优化 彩票...

Uniapp编写微信小程序,使用canvas进行绘图

一、canvas文档&#xff1a; https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial 二、数据绘制&#xff08;单位是像素&#xff09;&#xff1a; 1、绘制文本&#xff1a; 文字的长度超过设置的最大宽度&#xff0c;文字会缩在一起 ① 填充文本&#xf…...

Java高频基础面试题

Java高频基础面试题 Java基础 Java的特点是什么&#xff1f; 面向对象平台无关性&#xff08;“一次编写&#xff0c;到处运行”&#xff09;支持多线程自动内存管理&#xff08;垃圾回收&#xff09;安全性丰富的类库 JDK、JRE和JVM的区别 JDK (Java Development Kit): Java…...

U9C-SQL-采购订单视图

U9C-SQL-采购订单视图 SELECTpo.ID,CONVERT ( VARCHAR ( 10 ), po.CreatedOn, 23 ) AS 签订日期,org.Name AS 甲方,po.DocNo AS 单号,item.Code AS 料号,item.Name AS 品名,item.SPECS AS 规格,item.DescFlexField_PrivateDescSeg1 AS 图号,item.DescFlexField_PrivateDescSeg2…...

HTML字符串转换为React元素实现

HTML字符串安全转换为React元素的实现 一、背景介绍 介绍HTML字符串在Web开发中的常见场景。说明React中直接使用HTML字符串的局限性。提出将HTML字符串转换为React元素的需求。 二、首先必备的两个npm库&#xff1a;html-react-parser和dompurify 导入&#xff1a; pnpm i…...

全局异常未能正确捕获到对应的异常

自定义Validation验证器遇到的问题 抛出的异常没有能被指定的TaskValidException.class方法拦截到。故写这个原因 全局异常拦截只能拦截相同的异常。只能通过解析转入自定义的异常。自定义的异常继承的异常要是一家子的。如TaskValidException和ValidationException。这样就能在…...

LeetCode 解题思路 47(最长回文子串、最长公共子序列)

解题思路&#xff1a; dp 数组的含义&#xff1a; dp[i][j] 是否为回文子串。递推公式&#xff1a; dp[i][j] s.charAt(i) s.charAt(j) && dp[i 1][j - 1]。dp 数组初始化&#xff1a; 单字符 dp[i][i] true&#xff0c;双字符 dp[i][i 1] s.charAt(i) s.charA…...

P11369 [Ynoi2024] 弥留之国的爱丽丝(操作分块,DAG可达性trick)

真的神仙题。感觉学到了很多。 题意&#xff1a; 给你一张 n n n 个结点 m m m 条边的有向图&#xff0c;点编号为 1 , 2 , … , n 1,2,\dots,n 1,2,…,n。每条边的颜色为黑色或白色。一开始所有 m m m 条边都是黑色的。 你需要进行 q q q 次操作&#xff0c;有两种操作…...

NAT穿越

概述 IPSec协商是通过IKE完成--->ISAKMP协议完成--->由UDP封装&#xff0c;源目端口均为500。 NAT--->NAPT&#xff0c;同时转换IP和端口信息。 对端设备会查验收到的数据报文中的源IP和源端口&#xff0c;其中源IP可以设定为NAT转换后的IP&#xff0c;但是源端口无法…...

不黑文化艺术学社首席艺术家孙溟㠭浅析“雪渔派”

孙溟㠭浅析“雪渔派” 何震 字主臣 &#xff0c;长卿&#xff0c;号雪渔&#xff0c;安徽婺源&#xff08;今江西&#xff09;人&#xff0c;是明代著名的篆刻家和书法家&#xff0c;与文彭独树一帜&#xff0c;实现书法与刀法的统一。 云中白鹤 笑谭间气吐霓虹 边款 其篆刻吸…...

【Linux操作系统】第一弹——Linux基础篇

文章目录 &#x1f4a1; 一. Linux的基本常识&#x1fa94; 1.1 linux网络连接三种方式&#x1fa94;1.2 虚拟机的克隆&#x1fa94;1.3 虚拟机的快照&#x1fa94;1.4 虚拟机的迁移和删除&#x1fa94;1.5 vmtools工具 &#x1f4a1;二. Linux的目录结构&#x1fa94;2.1 Linu…...

“ES7+ React/Redux/React-Native snippets“常用快捷前缀

请注意&#xff0c;这是一个常用的列表&#xff0c;不是扩展提供的所有前缀。最完整和最新的列表请参考扩展的官方文档或在 VS Code 中查看扩展的详情页面。 React (通常用于 .js, .jsx, .ts, .tsx): rfce: React Functional Component with Export Defaultrafce: React Arro…...

selenium替代----playwright

安装 好处特点&#xff1a;这个东西不像selenium需要固定版本的驱动 pip config set global.index-url https://mirrors.aliyun.com/pypi/simplepip install --upgrade pippip install playwright playwright installplaywright install ffmpeg (处理音视频的)验证&#x…...

2025年社交APP安全防御指南:抵御DDoS与CC攻击的实战策略

2025年&#xff0c;社交APP的用户规模与业务复杂度持续增长&#xff0c;但随之而来的DDoS与CC攻击也愈发隐蔽和智能化。攻击者通过AI伪造用户行为、劫持物联网设备&#xff0c;甚至利用区块链漏洞发起混合攻击&#xff0c;对平台稳定性与用户数据安全构成严峻挑战。本文将结合最…...

PHP会话技术

第十六章-PHP会话技术 PHP会话技术是构建动态、个性化Web应用的核心机制之一&#xff0c;它通过跟踪用户在网站上的连续操作状态&#xff0c;实现了网页间的数据持久化交互。无论是电商平台的购物车信息保存、社交媒体的用户登录状态维持&#xff0c;还是表单数据的跨页面传递…...

QT聊天项目DAY10

1.封装redis操作类 头文件 #ifndef REDISMANAGE_H #define REDISMANAGE_H#include "Singletion.h" #include "GlobalHead.h"class RedisManage : public Singletion<RedisManage> {friend class Singletion<RedisManage>; public:~RedisMana…...

5.0.5 变换(旋转、缩放、扭曲)

WPF变换可以产生特殊效果,如平移、旋转、扭曲。 变换类 描述TranslateTransform沿着X轴和Y轴平移ScaleTransform 沿着定义的中心点缩放RotateTransform沿着定义的中心点旋转SkewTransform 扭曲元素MatrixTransfrom提供3x3矩阵,用于定义一个自定义变换 1…...

matlab转python

1 matlab2python开源程序 https://blog.csdn.net/qq_43426078/article/details/123384265 2 网址 转换网址&#xff1a;https://app.codeconvert.ai/code-converter?inputLangMatlab&outputLangPython 文件比较网址&#xff1a;https://www.diffchecker.com/text-comp…...

什么是直播美颜SDK?跨平台安卓、iOS美颜SDK开发实战详解

时下&#xff0c;尤其在社交、娱乐、电商等应用场景中&#xff0c;一个流畅且效果自然的美颜功能往往能直接影响用户的留存率和平台的营收。要实现这些效果&#xff0c;美颜SDK是核心工具。那么&#xff0c;什么是直播美颜SDK&#xff1f;它的功能有哪些&#xff1f;如何进行跨…...

大尺寸PCB如何重塑通信与新能源产业格局

在5G通信基站与新能源电站的机房内&#xff0c;一块块面积超过600mm600mm的PCB板正悄然推动着技术革命。作为电子设备的核心载体&#xff0c;大尺寸PCB凭借其高密度集成与复杂工艺&#xff0c;成为通信、能源等领域的“隐形功臣”。以猎板PCB为代表的厂商&#xff0c;凭借宽幅曝…...

JavaSE核心知识点02面向对象编程02-04(包和导入)

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 JavaSE核心知识点02面向对象编程02-04&#…...

【漫话机器学习系列】249.Word2Vec自然语言训练模型

【自然语言处理】用 Word2Vec 将词语映射到向量空间详解 一、背景介绍 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;我们常常需要将文本信息转化为机器能够理解和处理的形式。传统的方法&#xff0c;如 one-hot编码&#xff0c;虽然简单&#xff0c;但存在严重…...

CSS transition过渡属性

transition 是 CSS 中用于创建平滑动画效果的属性&#xff0c;它允许元素在两个状态之间平滑过渡&#xff0c;而不是立即改变。通过定义过渡的属性、持续时间和速度曲线&#xff0c;你可以实现丰富的交互体验&#xff0c;如悬停效果、状态切换动画等。 核心作用 平滑过渡&…...

U9C对接飞书审批流完整过程

U9C虽然很强大&#xff0c;但是移动办公和审批流功能并不好用&#xff0c;为了弥补U9C这种不足&#xff0c;很多的企业在使用U9C的同时再开通钉钉、飞书、企业微信这种OA管理系统&#xff0c;两套系统并行使用&#xff0c;就需要考虑U9C和OA系统数据同步的问题&#xff0c;最简…...

阿里云 SLS 多云日志接入最佳实践:链路、成本与高可用性优化

作者&#xff1a;裘文成&#xff08;翊韬&#xff09; 摘要 随着企业全球化业务的扩展&#xff0c;如何高效、经济且可靠地将分布在海外各地的应用与基础设施日志统一采集至阿里云日志服务 (SLS) 进行分析与监控&#xff0c;已成为关键挑战。 本文聚焦于阿里云高性能日志采集…...

从0开始学习大模型--Day04--大模型的框架以及基本元素

Agent框架与策略分析 计划与执行&#xff08;planning-and-Execute&#xff09; 该框架侧重于先规划一系列的行动&#xff0c;然后执行。这个框架可以使大模型能够先综合考虑任务的多个方面&#xff0c;然后按照计划进行行动&#xff0c;比较适合应用在较复杂的项目管理中或者…...

FPGA实战项目2———多协议通信控制器

1. 多协议通信控制器模块 (multi_protocol_controller) 简要介绍 这是整个设计的顶层模块,承担着整合各个子模块的重要任务,是整个系统的核心枢纽。它负责协调 UART、SPI、I2C 等不同通信协议模块以及 DMA 模块的工作,同时处理不同时钟域之间的信号交互,确保各个模块能够…...

strings.Builder 使用详解

目录 1. 官方包 2. 支持版本 3. 官方说明 官方示例 方法 func (b *Builder) Cap() int func (b *Builder) Grow(n int) func (b *Builder) Len() int func (b *Builder) Reset() func (b *Builder) String() string func (b *Builder) Write(p []byte) (int, error)…...

数巅智能携手北京昇腾创新中心深耕行业大模型应用

当前&#xff0c;AI技术正在加速向各行业深度渗透,成为驱动产业转型和社会经济发展的重要引擎。构建开放协作的AI应用生态体系、推动技术和应用深度融合&#xff0c;已成为行业发展的重要趋势。 近日&#xff0c;数巅智能与北京昇腾人工智能计算中心&#xff08;北京昇腾创新中…...

【嵌入式系统设计师(软考中级)】第二章:嵌入式系统硬件基础知识——⑤电源及电路设计

文章目录 7. 嵌入式系统电源分类及管理7.1 嵌入式系统电源分类7.2 电源管理技术7.3 电源完整性设计 8. 电子电路设计8.1 电子电路设计基础知识8.1.1 电子电路设计原理8.1.2 电子电路设计方法及步骤8.1.3 电子电路可靠性设计 8.2 PCB设计基础知识8.2.1 PCB设计原理8.2.2 PCB设计…...

排序算法-希尔排序

希尔排序是插入排序的改进版&#xff0c;通过将原始数组分成多个子序列进行间隔插入排序&#xff0c;逐步缩小间隔直至为1&#xff0c;最终完成整体排序。它也被称为缩小增量排序。 希尔排序步骤 选择增量序列&#xff08;Gap Sequence&#xff09;&#xff1a;确定一个递减的…...

JAVA继承中变量和方法的存储和方法中访问变量的顺序

一、变量归属与内存位置 static 变量&#xff1a;属于类&#xff0c;只存在一份&#xff0c;保存在方法区&#xff08;或元空间&#xff09;。 实例变量&#xff08;非static&#xff09;&#xff1a;属于对象&#xff0c;每个对象单独一份&#xff0c;保存在堆内存中。 二、…...

【PhysUnits】3.3 SI 基础量纲单位(units/base.rs)

一、源码 这段代码定义了一系列基础物理量纲的类型别名&#xff0c;并使用标记 trait Canonical 来表示它们是国际单位制&#xff08;SI&#xff09;中的基本单位。 use crate::Dimension; use typenum::{P1, Z0};/// 标记特质&#xff0c;表示基础量纲单位 pub trait Canoni…...

stm32F103芯片 实现PID算法控制温度例程

目录 硬件需求 软件需求 步骤 1. 配置STM32CubeMX 2. 编写PID控制代码 3. 编译和烧录 4. 测试 注意事项 要在STM32F103芯片上实现PID算法控制温度,首先需要确保你有一套完整的硬件和软件开发环境。这里,我将给你一个简化的例程,展示如何使用PID控制算法来调节一个假…...

Java学习手册:微服务设计原则

一、单一职责原则 每个微服务应该专注于一个特定的业务功能&#xff0c;具有清晰的职责边界。这有助于保持服务的简洁性&#xff0c;降低服务之间的耦合度&#xff0c;提高服务的可维护性和可扩展性。例如&#xff0c;可以将用户管理、订单管理、支付管理等功能分别设计为独立…...

【挑战项目】 --- 微服务编程测评系统(在线OJ系统)(二)

三十二、Swagger介绍&使用 官网:https://swagger.io/ 什么是swagger Swagger是一个接口文档生成工具,它可以帮助开发者自动生成接口文档。当项目的接口发生变更时,Swagger可以实时更新文档,确保文档的准确性和时效性。Swagger还内置了测试功能,开发者可以直接在文档中…...

Unity背景随着文字变化而变化

组件结构&#xff1a; 背景&#xff08;父&#xff09;需要添加如下两个组件 根据具体情况选择第一个组件水平还是垂直&#xff0c;一般垂直用的比较多 效果展示&#xff1a; 此时在文本框中改变内容背景图都会随着变化&#xff0c;动态的...

Elasticsearch内存管理与JVM优化:原理剖析与最佳实践

#作者&#xff1a;孙德新 文章目录 一、Elasticsearch缓存分类1、Node Query Cache&#xff1a;2、Shard Request Cache&#xff1a;3、Fielddata Cache&#xff1a; 三、内存常见的问题案例一案例二案例三案例四 四、内参分配最佳实践1、jvm heap分配2、将机器上少于一半的内…...

快速开发-基于Gin框架搭建web应用

一、概述 Go 语言的 Gin 框架是一个用 Go (Golang) 编写的 Web 框架&#xff0c;它旨在提供一种快速、简洁且高效的方式来构建 Web 应用程序。Gin 框架以其高性能和易用性而闻名&#xff0c;非常适合构建 API 服务、Web 服务和其他需要高性能的 Web 应用。 二、Gin框架…...

【RAG】RAG系统——langchain 的用法(说人话版与专业版)

说人话版&#xff1a; RAG就是一句话&#xff1a;对数据设置索引&#xff0c;用问题去检索&#xff0c;用llm生成回答 首先&#xff0c;做本地知识库 注意: py 3.10以上 配置环境变量&#xff0c;安装库 load外部数据&#xff0c;存储到本地的一个index里&#xff08;这是最…...

pycharm无法直接识别wsl

原因是我的2020 无法支持这个版本的wsl 我就换成2024版 添加中可以看到 on wsl 如果你想切到自己创建的虚拟环境 你在下面这个界面选择conda就好 这样就可以切换成你想要的环境了...

数据结构每日一题day17(链表)★★★★★

题目描述&#xff1a;假设有两个按元素值递增次排列的线性表&#xff0c;均以单链表形式存储。请编与算法将这两个单链表归并为一个按元素值依次递减排列的单链表,并要求利用原来两个单链表的结点存放归并后的单链表。 算法思想&#xff1a; 1.初始化&#xff1a; 创建一个新…...

遗传算法(GA)

基本原理 算法介绍 遗传算法&#xff08;Genetic Algorithm&#xff0c;简称GA&#xff09;是一种基于自然选择和遗传学原理的搜索和优化技术。它模拟了生物进化过程&#xff0c;通过选择、交叉&#xff08;重组&#xff09;和变异等操作&#xff0c;逐步优化问题的解。 遗传…...

EPS三维测图软件

EPS三维测图软件EPS2016...

设计模式-命令模式

写在前面 Hello&#xff0c;我是易元&#xff0c;这篇文章是我学习设计模式时的笔记和心得体会。如果其中有错误&#xff0c;欢迎大家留言指正&#xff01; 一、什么是命令模式&#xff1f; 命令模式是行为模式中的一种&#xff0c;通过将请求封装成对象&#xff0c;使开发者可…...

深入理解主从数据库架构与主从复制

目录 前言1. 主从数据库概述1.1 什么是主从数据库&#xff1f;1.2 主从数据库的应用场景 2. 主从数据库的工作原理2.1 主从数据库的读写分离2.2 数据同步机制2.3 异步与同步复制模式 3. 主从复制的实现步骤3.1 配置主库3.2 配置从库 4. 主从数据库架构的优缺点4.1 优点4.2 缺点…...

【C】初阶数据结构15 -- 计数排序与稳定性分析

本文主要讲解七大排序算法之外的另一种排序算法 -- 计数排序 目录 1 计数排序 1&#xff09; 算法思想 2&#xff09; 代码 3&#xff09; 时间复杂度与空间复杂度分析 &#xff08;1&#xff09; 时间复杂度 &#xff08;2&#xff09; 空间复杂度 4&#xff09; 计…...

@PostConstruct @PreDestroy

PostConstruct 是 Java EE&#xff08;现 Jakarta EE&#xff09;中的一个注解&#xff0c;用于标记一个方法在对象初始化完成后立即执行。它在 Spring 框架、Java Web 应用等场景中广泛使用&#xff0c;主要用于资源初始化、依赖注入完成后的配置等操作。 1. 基本作用 执行时…...

2025数维杯数学建模A题完整限量论文:空中芭蕾——蹦床运动的力学行为分析

2025数维杯数学建模A题完整限量论文&#xff1a;空中芭蕾——蹦床运动的力学行为分析 &#xff0c;先到先得 A题完整论文https://www.jdmm.cc/file/2712067/ 蹦床&#xff08; Trampoline &#xff09;是一项运动员利用蹦床的反弹&#xff0c;在空中展示技能 技巧的竞技运动&…...