如何在 HTML5 中添加外部（非 HTML）应用程序的容器

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

<embed attributes>

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

embed:focus {
   outline: none;
}

属性

现在，让我们看看支持“嵌入”标签的属性：

  • 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://tutorialspoint.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://tutorialspoint.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://tutorialspoint.com/index.htm" width="500" height="200">
</body>
</html>

注意：对于在网页中显示图片，最好使用<img>标签。要显示 HTML，最好使用<iframe>标签。要显示视频或音频，最好使用<video>和<audio>标签。

更新于： 2023年10月6日

249 次浏览

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告