如何在 HTML5 中为外部(非 HTML)应用程序添加容器

htmlfront end technologyweb development更新于 2026/1/15 23:40:17

要在 HTML5 中为外部应用程序添加容器，我们使用 <embed> 标签。它定义或嵌入外部资源(例如网页、媒体播放器、图片或插件应用程序)的容器。以下是 HTML 中 embed 标签的用法 −

<embed attributes>

它没有结束标签。支持 embed 标签的浏览器包括 Google Chrome、Internet Explorer、Firefox、Apple Safari 和 Opera。它支持 HTML 中的全局属性和事件属性。大多数浏览器使用默认 CSS 设置显示 <embed> 元素，例如

embed:focus {
    outline: none;
}

属性

现在，让我们看看支持"embed"标签的属性 −

type − <embed> 标签中使用的 type 属性定义了文件的 MIME 类型，这意味着它指定了互联网媒体类型。

<embed type="media_type">

src − <embed> 标签中使用的 src 属性指定要嵌入的外部文件的 URL。

<embed src="URL">

width − <embed> 标签中使用的 width 属性定义对象的宽度。

<embed width="pixels">

height − <embed> 标签中使用的 height 属性定义了对象的高度。

<embed height ="pixels">

示例

以下示例演示了如何在 HTML5 中为外部(非 HTML)应用程序添加容器 −

<!DOCTYPE html>
<html>
<head>
   <title> Add a container for an external (non-HTML) application in HTML5 </title>
   <style>
      q {
         color: red;
         font-style: italic;
      }
   </style>
</head>
<body>
   <br>
   <embed src="https://www.cainiaomax.com/images/logo.png?v2" type="image/jpg">
</body>
</html>

示例

以下是另一个添加容器的示例。这里我们设置容器的宽度和高度 −

<!DOCTYPE html>
<html>
<body>
   <h1>Using embed text, src, height and width attributes</h1>
   <embed type="image/jpg" src="https://www.cainiaomax.com/images/english-tutorials_icon.svg" width="150" height="200">
</body>
</html>

示例

以下是在 HML 文件中嵌入视频的示例 −

<!DOCTYPE html>
<html>
<body>
   <h1> Sample Video embed into HTML File</h1>
   <embed type="video/webm" src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="400" height="300">
</body>
</html>

示例

以下示例演示如何在源文件中嵌入另一个 HTML 文件 −

<!DOCTYPE html>
<html>
<body>
   <h1>The embed element</h1>
   <embed type="text/html" src="https://www.cainiaomax.com/index.htm" width="500" height="200">
</body>
</html>

注意 −:在网页中显示图片时，建议使用 <img> 标签。显示 HTML 时，建议使用 <iframe> 标签。显示视频或音频时，建议使用 <video> 和 <audio> 标签。