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.tw/" 
            method="post">
         <input id="myImage" 
               type="image" 
               src=
"https://tutorialspoint.tw/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.tw/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.tw/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.tw/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

列印頁面