HTML - data 屬性

HTML 的 **data** 屬性用於與 object 標籤一起嵌入外部資源，例如使用 URL 的影像、影片、文件或其他網頁。

如果您的系統中有影像、音訊或影片檔案，您可以透過將它的資源地址指定為 data 屬性的值來訪問它並在網頁上顯示它。

需要注意的是，data 屬性僅適用於 **<object>** 標籤，並且必須在 <object> 標籤中至少定義一個 data 屬性和 type 屬性。

語法

<object data = "value"></object>

應用於

以下列出的元素允許使用 HTML data 屬性

元素	描述
<object>	HTML <object> 用於在網頁上顯示多媒體，包括音訊、影片、圖片、網站、PDF 和 Flash。

HTML data 屬性示例

下面的示例將說明 HTML data 屬性，以及我們應該在哪裡以及如何使用此屬性！

帶有音訊物件的 data 屬性

在下面的程式中，我們在 <object> 標籤中使用 HTML 'data' 屬性來指定資源（即音訊檔案）的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'data' attribute</title>
   <style>
      object {
         width: 300px;
         height: 150px;
         display: grid;
         place-items: center;
         background-color: aqua;
      }
   </style>
</head>
<body>
   <!--HTML 'data' attribute-->
   <p>Example of the HTML 'data' attribute</p>
   <object 
   data="https://samplelib.com/lib/preview/mp3/sample-6s.mp3" 
   type="audio/mp3">
   </object>
</body>
</html>

帶有影片物件的 data 屬性

考慮另一種情況，我們將使用 data 屬性和 object 標籤來指定影片的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'data' attribute</title>
   <style>
      object {
         width: 300px;
         height: 150px;
         display: grid;
         place-items: center;
         background-color: aqua;
      }
   </style>
</head>
<body>
   <!--HTML 'data' attribute-->
   <p>Example of the HTML 'data' attribute</p>
   <object data=
"https://static.videezy.com/system/resources/previews/000/019/695/original/pointing-pink.mp4" 
      type="video/mp4"></object>
</body>
</html>

帶有影像物件的 data 屬性

讓我們看一下下面的示例，我們將使用 data 屬性和 object 標籤來指定影像 URL。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'data' attribute</title>
   <style>
      object {
         width: 300px;
         height: 150px;
         display: grid;
         place-items: center;
         background-color: aqua;
         border: 4px solid black;
      }
   </style>
</head>
<body>
   <!--HTML 'data' attribute-->
   <p>Example of the HTML 'data' attribute</p>
   <h3>Resource image: </h3>
   <object data=
"https://tutorialspoint.tw/static/images/simply-easy-learning.png">
</object>
</body>
</html>

支援的瀏覽器

屬性
Data	是	是	是	是	是

html_attributes_reference.htm

列印頁面