html object标签介绍（用于嵌入外部资源通用标签）（已不推荐使用deprecate ...

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 类型，资助欣赏器识别怎样处理惩罚资源。比方：

• 图像：image/jpeg
  
• 音频：audio/mpeg
  
• 视频：video/mp4
  
• PDF：application/pdf
  

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>

复制代码

- 跨欣赏器差异：主流欣赏器曾使用不同机制加载雷同资源类型，导致兼容性问题。

现代替代方案

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

  复制代码

---

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>

复制代码

新增属性

• form：指定对象所属的表单，允许对象参与表单提交。
  
• usemap：关联客户端图像映射（<map>）。
  

---

总结

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

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