Articles
HTML 簡介
媒體相關標籤

媒體相關標籤

本文解釋了媒體相關標籤。

説明如何在HTML中描述圖片、影片、音訊等，以及可折疊元素和內嵌框架。

YouTube Video

媒體相關標籤

<img> 標籤

Description of the image 
1<img src="/images/image.jpg" alt="Description of the image" width="200">
  • <img> 標籤用於嵌入圖像。src 屬性指定圖像路徑，而 alt 屬性在圖像無法顯示時提供說明。

<figure> 和 <figcaption> 標籤

A beautiful scenery
A beautiful scenery
1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>
  • <figure> 標籤將媒體內容（如圖像或插圖）與標題一同組合，使用 <figcaption> 標籤提供標題。

<picture> 標籤

Responsive image 
1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

  • <picture> 標籤用於支持響應式圖像，允許根據不同的顯示條件選擇適當的圖像。

  • media 屬性以與 CSS 媒體查詢相同的格式指定條件。

    • 您可以指定條件，例如最小寬度 (min-width)、最大寬度 (max-width) 或螢幕方向 (orientation)。

  • 在此範例中，會根據螢幕寬度顯示以下圖片。

    • 如果螢幕寬度為 800px 或以上，將顯示 large.jpg。
    • 如果螢幕寬度為 400px 或以上但小於 800px，將顯示 medium.jpg。
    • 如果螢幕寬度小於 400px，將顯示 small.jpg（<img> 標籤中的圖片）。

<canvas> 標籤 

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>
  • <canvas> 標籤提供了一個可以使用 JavaScript 繪製動態圖形的區域。

<map> 標籤

Example Map Area 1 
1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>
  • <map> 標籤用於定義圖像映射。地圖中的可點擊區域使用 <area> 標籤定義。這可以使圖像的特定部分成為可點擊的，並導向一個鏈接。
  • 在 <img> 標籤的 usemap 屬性中，指定關聯的地圖元素 (<map> 標籤) 的名稱，並以 # 作為前綴。
  • 通過適當地指定 <area> 標籤的 alt 屬性，可以改善視障使用者的可及性。

<embed> 標籤 

1<embed src="movie.mp4" width="300" height="200">
  • <embed> 標籤用於嵌入外部內容，如 PDF、影片或音頻。

<video> 標籤 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • <video> 標籤用於嵌入影片內容。您可以使用 <source> 標籤指定多種格式。
1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • 屬性 preload 允許您指定在播放開始之前瀏覽器應該加載多少視頻內容。
    • auto 指示瀏覽器預加載整個媒體。它可以減少播放開始時的延遲，但即使用戶未播放媒體，數據也可能會被下載。
    • metadata 僅加載媒體的元數據（例如：時長、軌道信息）。媒體數據本身只有在用戶啟動播放後才會加載。當您需要媒體的概要信息時，這是合適的。
    • none 不會預加載媒體文件。媒體在播放開始之前不會下載資源。當您想要最小化數據使用量時，這是合適的。

<audio> 標籤 

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>
  • <audio> 標籤用於嵌入音頻內容。<source> 標籤支持多種格式。
  • 與 <video> 標籤類似，可以使用 preload 屬性來指定在播放開始之前應加載多少音頻內容。

<track> 標籤 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>
  • <track> 標籤用於指定文本軌道，例如字幕和標註。它可以用在 <audio> 或 <video> 標籤中。
  • kind 屬性允許您指定軌道的用途（例如字幕、標註、章節等）。您可以指定以下值。
    • subtitles 提供翻譯視頻或音頻內容的字幕，或者使其更易於觀眾理解。其主要目的是對音頻進行直接翻譯。
    • captions 除了音頻之外，還為聽力障礙人群提供音樂和音效等額外信息。
    • descriptions 是為視力障礙人士提供的軌道，用於描述視頻的視覺內容，例如動作和場景。
    • chapters 提供章節標記（章節標題）以指示視頻中的特定位置。
    • metadata 提供用於解析或處理媒體的附加信息，但不會向用戶顯示。

<iframe> 標籤 

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>
  • <iframe> 標籤用於將其他 HTML 頁面或外部內容（例如網站、影片或文件）嵌入到當前頁面中。它經常用於在頁面上嵌入 YouTube 影片。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video

與表格相關的標籤表單相關標籤