如何在 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.tw/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.tw/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.tw/index.htm" width="500" height="200">
</body>
</html>

注意:對於在網頁中顯示圖片,最好使用<img>標籤。要顯示 HTML,最好使用<iframe>標籤。要顯示影片或音訊,最好使用<video><audio>標籤。

更新於: 2023年10月6日

249 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.