HTML - src 属性

HTML src 属性用于表示来自外部或设备资源的页面中的外部资源，例如图像、视频、音频和 URL。

语法


<element src="URL" />

适用对象

下面列出的元素允许使用 HTML src 属性。

元素	描述
<audio>	HTML <audio> 标签用于在网站上嵌入音频文件。
<embed>	HTML <embed>标签用作浏览器无法理解的外部应用程序、多媒体和交互式内容的容器。
<iframe>	HTML <iframe> 标签用于创建内联框架。
<img>	HTML <img> 标签用于将图像嵌入到 HTML 文档中。
<input>	HTML <input> 标签用于指定输入字段。
<script>	HTML <script> 标签用于声明客户端脚本（JavaScript）。
<source>	HTML <source> 标签用于定义各种不同格式的媒体资源，如音频、视频、图片等。
<track>	HTML <track> 标签用于定义媒体文件的基于时间的文本轨道。
<video>	HTML <video> 标签用于将视频媒体播放器嵌入到网站中。

HTML src 属性示例

以下示例将说明 HTML src 属性，我们应该在何处以及如何使用此属性！

在 “input” 标签中使用 src 属性

当我们运行下面的代码时，输出屏幕显示 qikepu logo。单击它后，它会重定向到 qikepu 网站。


<!DOCTYPE html>
<html>

<head>
			<title>HTML src Attribute</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<p>
						Image is clickable. Click to visit qikepu website!
			</p>
			<form action=
"https://qikepu.com/" 
						method="post">
				 <input id="myImage" 
							 type="image" 
							 src=
"https://www.qikepu.com/images/logo.png?v2" 
							 alt="Submit" 
							 width="200" 
							 height="60"/>
			</form>
</body>

</html>

在 “img” 标签中使用 src 属性

当我们运行下面的代码时，输出屏幕显示 qikepu logo。单击它后，它会重定向到 qikepu 网站。


<!DOCTYPE html>
<html>

<head>
			<title>HTML src Attribute</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<img src=
"https://www.qikepu.com/images/logo.png?v2" 
				 alt="logo" />
</body>

</html>

在“video”标签中使用 src 属性

当我们运行下面的代码时，它会根据 src 属性中提供的链接显示视频。


<!DOCTYPE html>
<html>

<head>
			<title>HTML src Attribute</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<video src=
"https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
						width="380" 
						height="220" 
						controls>
	 </video>
</body>

</html>

在“embed”标签中使用 src 属性

输出窗口在执行时显示 qikepu 徽标。


<!DOCTYPE html>
<html>

<head>
			<title>HTML src Attribute</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<embed src=
"https://www.qikepu.com/images/logo.png?v2">
</body>

</html>

在 “audio” 标签中使用 src 属性

输出窗口显示 src 属性中提供的音频和音频控件。


<!DOCTYPE html>
<html>

<head>
			<title>HTML audio src Attribute</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<audio src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
						width="380" 
						height="220" 
						controls>
	 </audio>
</body>

</html>

在“iframe”标签中使用 src 属性

输出窗口在执行时在框架中显示 qikepu 网站。


<!DOCTYPE html>
<html>

<head>
			<title>HTML iframe src Attribute</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<iframe src=
"https://www.qikepu.com/index.htm"
						height=500
						width=600 />
</body>

</html>

在html文档中链接javascript文件

index.js使用 src 属性链接的 javascript 文件。


<!DOCTYPE html>
<html>

<head>
			<title>HTML src Attribute</title>
			<script src="index.js" 
						type="text/script">
			</script>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<p>qikepu</p>
</body>

</html>

index.js 文件


// File Name- index.js 
document.write("You're visiting qikepu!")

在 “source” 标签中使用 src 属性

输出窗口使用 src 属性中提供的链接和视频控件显示视频。


<!DOCTYPE html>
<html>

<head>
			<title>HTML src Attribute</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<video width="250" 
						height="150" 
						controls>
			<source src=
"https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
							 type="video/mp4">
	 </video>
</body>

</html>

在 “track” 标签中使用 src 属性添加字幕

字幕从使用 src 属性链接的 ex1.vtt 文件添加到视频中


<!DOCTYPE html>
<html>

<head>
			<title>Video Player</title>
</head>

<body>
			<h3>HTML src Attribute</h3>
			<video controls>
			<source src=
"https://cdn.pixabay.com/vimeo/830461265/fogging-164360.mp4?widt=1280&hash=f05a9cb58caeefbe7afe937ce7f9a00784d5f219" 
							 type="video/mp4">
			<track  src="ex1.vtt" 
							 kind="captions" 
							 label="English" 
							 srclang="en">
	 </video>
</body>

</html>

字幕文件

保存以下标题文件，名称为“ex1.vtt”

WEBVTT

00:00:00.000 --> 00:00:10.000
Tuotorialspoint

00:00:10.000 --> 00:00:20.000
Simply Easy Learning

00:00:20.000 --> 00:00:30.000
qikepu.com is a dedicated website to provide quality online education

00:00:30.000 --> 00:00:35.000
Global headquarters for QikepuCom is located in Hyderabad,Telangana,India.

00:00:35.000 --> 00:00:41.000
Mohtashim M. is the Founder & Managing Director at QikepuCom .

支持的浏览器

浏览器
是否支持	4.0	9.0	3.5	4.0	10.5

打印本页