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 属性

运行以下代码时，输出屏幕会显示 tutorialspoint 徽标。单击它后，它会跳转到 tutorialspoint 网站。

<!DOCTYPE html>
<html>

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

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

</html>

在 "img" 标签中使用 src 属性

运行以下代码时，输出屏幕会显示 tutorialspoint 徽标。单击它后，它会跳转到 tutorialspoint 网站。

<!DOCTYPE html>
<html>

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

<body>
      <h3>HTML src Attribute</h3>
      <img src=
"https://tutorialspoint.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 属性

执行后，输出窗口会显示 tutorialspoint 徽标。

<!DOCTYPE html>
<html>

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

<body>
      <h3>HTML src Attribute</h3>
      <embed src=
"https://tutorialspoint.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 属性

执行后，输出窗口会在框架中显示 tutorialspoint 网站。

<!DOCTYPE html>
<html>

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

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

</html>

在 html 文档中链接 javascript 文件

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

<!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>TutorialsPoint</p>
</body>

</html>

index.js 文件

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

在 "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
Tutorialspoint.com is a dedicated website to provide quality online education

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

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

支持的浏览器

属性
src	4.0	9.0	3.5	4.0	10.5

html_attributes_reference.htm

打印页面