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


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

<embed attributes>

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

embed:focus {
   outline: none;
}

属性

现在,让我们看看支持“embed”标签的属性:

  • type − 在<embed>标签中使用的type属性定义文件的MIME类型,这意味着它指定Internet媒体类型。

<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日

250 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.