HTML - src 属性_HTML 菜鸟教程

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

语法


<element src="URL" />

适用对象

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

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

HTML src 属性示例

以下示例将说明 HTML src 属性如何使用。

<input>标签 src 属性示例

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


<!DOCTYPE html>
<html>

<head>
	<title>HTML src 属性</title>
</head>

<body>
	<h3>HTML src Attribute</h3>
	<p>图像可点击。点击访问启科普网站！</p>
	<form action="https://www.qikepu.com/" method="post">
		<input id="myImage" type="image" src="https://www.qikepu.com/images/logo.png" alt="Submit" width="200" height="60"/>
	</form>
</body>

</html>

<img>标签 src 属性示例

下面代码显示 qikepu logo。


<!DOCTYPE html>
<html>

<head>
	<title>HTML src 属性</title>
</head>

<body>
	<h3>HTML src 属性</h3>
		<img src="https://www.qikepu.com/images/logo.png" alt="启科普logo" />
</body>

</html>

<video>标签 src 属性示例

下面会根据 src 属性提供的链接显示视频。


<!DOCTYPE html>
<html>

<head>
	<title>HTML src 属性</title>
</head>

<body>
	<h3>HTML src 属性</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 属性</title>
</head>

<body>
	<h3>HTML src 属性</h3>
	<embed src="https://www.qikepu.com/images/logo.png">
</body>

</html>

<audio>标签 src 属性示例

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


<!DOCTYPE html>
<html>

<head>
	<title>HTML audio src 属性</title>
</head>

<body>
	<h3>HTML src 属性</h3>
	<audio src="https://samplelib.com/lib/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/" height=500 width=600 />
</body>

</html>

链接 .js 文件 src 属性示例

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


<!DOCTYPE html>
<html>

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

<body>
	<h3>HTML src 属性</h3>
	<p>启 科 普教程 src 属性示例</p>
</body>

</html>

index.js 文件


// 文件名称 - index.js 
document.write("欢迎你浏览qikepu教程网站！")

<source>标签 src 属性示例

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


<!DOCTYPE html>
<html>

<head>
	<title>HTML src 属性</title>
</head>

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

</html>

<track>标签 src 属性示例

使用 src 属性将 ex1.vtt 字幕文件链接到视频：


<!DOCTYPE html>
<html>

<head>
	<title>视频播放</title>
</head>

<body>
	<h3>HTML src 属性</h3>
	<video controls>
	<source src="https://cdn.pixabay.com/vimeo/fogging-164360.mp4" 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
qikepu.com教程

00:00:10.000 --> 00:00:20.000
简单易学的教程

00:00:20.000 --> 00:00:30.000
qikepu.com是一个在线学习各类技术的免费网站。

00:00:30.000 --> 00:00:35.000
Qikepu。Com的服务器位于中国广东的深圳。

00:00:35.000 --> 00:00:41.000
qikepu.com启科普Web开发在线教程是一个在线学习技术的启蒙网站。

支持浏览器

属性
src	4.0	9.0	3.5	4.0	10.5

<< HTML - sizes 属性 HTML - span 属性 >>