HTML - data 属性_HTML 菜鸟教程

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

<< HTML - coords 属性 HTML - datetime 属性 >>