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 属性，我们应该在哪里以及如何使用此属性！
带有 audio 对象的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>
具有 Video 对象的 Data 属性
考虑到另一种情况，我们将使用带有 object 标签的 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://static.videezy.com/system/resources/previews/000/019/695/original/pointing-pink.mp4"
type="video/mp4"></object>
</body>
</html>
具有 Image 对象的数据属性
让我们看一下以下示例，我们将在其中使用带有 object 标签的 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;
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://www.qikepu.com/static/images/simply-easy-learning.png">
</object>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 是否支持 | Yes | Yes | Yes | Yes | Yes |
