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.com/static/images/simply-easy-learning.png">
</object>
</body>
</html>

支持的浏览器

属性
Data	是	是	是	是	是

html_attributes_reference.htm

打印页面