qidao123.com技术社区-IT企服评测·应用市场

标题: html object标签介绍（用于嵌入外部资源通用标签）（已不推荐使用deprecated，发起使用img、video、audio标签） [打印本页]
作者: 泉缘泉    时间: 6 天前
标题: html object标签介绍（用于嵌入外部资源通用标签）（已不推荐使用deprecated，发起使用img、video、audio标签）
HTML <object> 标签详解

根本语法与核心属性

<object> 标签是 HTML 中用于嵌入外部资源的通用机制。其核心功能是通过 data 和 type 属性加载资源，并通过参数（<param>）传递配置信息。以下是其底子语法：
  1. <object data="resource_url" type="MIME_type" width="width" height="height">
  2.   <!-- 回退内容（fallback content） -->
  3.   <p>您的浏览器不支持嵌入此资源。</p>
  4. </object>
复制代码
关键属性剖析

1. data

指定资源的 URL，支持相对路径或绝对路径。比方：
  1. <object data="image.jpg" type="image/jpeg"></object>
复制代码
2. type

界说资源的 MIME 类型，资助欣赏器识别怎样处理惩罚资源。比方：

3. width & height

设置嵌入资源的尺寸，支持像素或百分比。比方：
  1. <object data="video.mp4" type="video/mp4" width="600" height="400"></object>
复制代码
4. name

为对象命名，便于 JavaScript 调用。比方：
  1. <object name="myVideo" data="video.mp4" type="video/mp4"></object>
复制代码
嵌入不同类型的资源

1. 嵌入图像

  1. <object data="image.jpg" type="image/jpeg" width="300" height="200">
  2.   <p>无法加载图像。</p>
  3. </object>
复制代码
2. 嵌入音频

  1. <object data="audio.mp3" type="audio/mpeg" width="100%" height="50">
  2.   <param name="autoplay" value="true"> <!-- 自动播放 -->
  3.   <param name="loop" value="true">     <!-- 循环播放 -->
  4.   <p>请安装音频播放器。</p>
  5. </object>
复制代码
3. 嵌入视频

  1. <object data="video.mp4" type="video/mp4" width="640" height="360">
  2.   <param name="controller" value="true"> <!-- 显示控制栏 -->
  3.   <p>请安装视频播放器。</p>
  4. </object>
复制代码
4. 嵌入 PDF

  1. <object data="document.pdf" type="application/pdf" width="100%" height="600">
  2.   <p>您的浏览器不支持 PDF 查看器。</p>
  3. </object>
复制代码
参数传递与回退内容

参数（<param>）的使用

通过 <param> 标签向嵌入资源传递参数，常用于配置播放器举动。比方：
  1. <object data="video.mp4" type="video/mp4" width="640" height="360">
  2.   <param name="autoplay" value="true">  <!-- 自动播放 -->
  3.   <param name="volume" value="0.5">     <!-- 初始音量 -->
  4.   <p>请安装视频播放器。</p>
  5. </object>
复制代码
回退内容（Fallback Content）

当欣赏器不支持资源类型或加载失败时，显示回退内容。比方：
  1. <object data="unsupported-resource.abc" type="application/unknown">
  2.   <p>此资源无法加载，请尝试以下链接：<a href="unsupported-resource.abc">下载资源</a></p>
  3. </object>
复制代码
兼容性与替代方案

汗青配景与兼容性问题

- IE 与 ActiveX：旧版 IE 依赖 classid 和 codebase 属性加载 ActiveX 控件。比方：

  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400">
  2.   <param name="movie" value="flash_movie.swf">
  3.   <param name="quality" value="high">
  4.   <embed src="flash_movie.swf" quality="high" width="550" height="400"></embed>
  5. </object>
复制代码
- 跨欣赏器差异：主流欣赏器曾使用不同机制加载雷同资源类型，导致兼容性问题。

现代替代方案


HTML5 中的变化

弃用属性

HTML5 废弃了部分旧属性，如 align、hspace、vspace 等。比方：
  1. <!-- HTML4 -->
  2. <object align="middle" hspace="10" vspace="10" ...></object>
  4. <!-- HTML5 -->
  5. <object style="display: block; margin: 10px auto;" ...></object>
复制代码
新增属性


总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4