什麼是多媒體標籤?
多媒體標籤就是用來在網頁上「放圖片、影片、音樂」的標籤:
- 圖片 - 讓網頁更美觀
- 影片 - 展示動態內容
- 音樂 - 播放背景音樂或音效
接下來一個一個教你怎麼用!
1. <img> - 圖片
是什麼: 在網頁上插入一張圖片。
怎麼用:
<img src="cat.jpg" alt="一隻可愛的小貓" width="300">
重要屬性:
| 屬性 | 說明 | 必填? |
|---|---|---|
src |
圖片路徑 (檔案位置或網址) | ✅ 必填 |
alt |
替代文字 (圖片掛掉或視障朋友用) | ✅ 必填 |
width |
寬度 (像素) | 選填 |
height |
高度 (像素) | 選填 |
loading |
"lazy" 延遲載入 (節省流量) | 選填 |
範例圖片
小提醒:
- alt 一定要寫!描述圖片內容
- 裝飾用的圖片寫
alt=""(空的) - 圖片路徑可以是「相對路徑」或「網址」
2. <picture> - 響應式圖片
是什麼: 讓網頁在「不同螢幕大小」顯示「不同圖片」。
怎麼用:
<picture>
<source media="(min-width: 800px)" srcset="big.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="響應式圖片">
</picture>
使用時機:
- 電腦顯示大圖,手機顯示小圖 (省流量)
- 不同螢幕顯示不同裁切的圖片
試著調整視窗大小,圖片會改變!
3. <figure> & <figcaption> - 圖片+說明
是什麼: 把圖片和圖片說明包在一起。
怎麼用:
<figure>
<img src="sunset.jpg" alt="夕陽" width="400">
<figcaption>美麗的夕陽</figcaption>
</figure>
4. <video> - 影片
是什麼: 在網頁上播放影片。
怎麼用:
<video controls width="560" poster="cover.jpg">
<source src="movie.mp4" type="video/mp4">
您的瀏覽器不支援影片播放。
</video>
重要屬性:
| 屬性 | 說明 |
|---|---|
controls |
顯示播放控制按鈕 |
autoplay |
自動播放 (要搭配 muted) |
loop |
循環播放 |
muted |
靜音 |
poster |
封面圖片 (影片載入前顯示) |
playsinline |
在手機上內嵌播放 (不全螢幕) |
小提醒:
- 自動播放一定要加
muted,不然會被瀏覽器擋掉 - 手機上要加
playsinline才不會跳出全螢幕
5. <audio> - 音訊
是什麼: 在網頁上播放音樂或音效。
怎麼用:
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的瀏覽器不支援音訊播放。
</audio>
常用屬性:
| 屬性 | 說明 |
|---|---|
controls |
顯示播放控制按鈕 |
autoplay |
自動播放 |
loop |
循環播放 |
muted |
靜音 |
6. <source> - 多格式來源
是什麼: 提供「多個格式」的影片或音訊,瀏覽器會自動選一個支援的。
怎麼用:
<video controls>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
您的瀏覽器不支援影片。
</video>
為什麼要多格式?
- 不同瀏覽器支援的格式不同
- 提供多個格式可以確保大家都能播放
- 瀏覽器會從上到下找,用第一個支援的格式
7. <track> - 字幕
是什麼: 為影片加上「字幕」或「說明文字」。
怎麼用:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文字幕">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
重要屬性:
| 屬性 | 說明 |
|---|---|
src |
字幕檔案路徑 (.vtt 格式) |
kind |
"subtitles" (字幕) 或 "captions" (說明) |
srclang |
語言代碼 (zh, en, ja...) |
label |
顯示名稱 (使用者看到的) |
小提醒: 字幕檔案要用 .vtt 格式 (WebVTT)
8. <iframe> - 嵌入其他網頁
是什麼: 把「其他網站的內容」嵌入到你的網頁,像 YouTube 影片、Google 地圖。
怎麼用:
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/影片ID"
title="YouTube 影片"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
常見用途:
- 嵌入 YouTube 影片
- 嵌入 Google 地圖
- 嵌入其他網站的內容
9. <embed> - 嵌入外部內容
是什麼: 嵌入 PDF、Flash (已淘汰)、插件等外部內容。
怎麼用:
<embed src="document.pdf" type="application/pdf" width="600" height="400">
小提醒:
- 現在較少用,主要用來嵌入 PDF
- 大部分情況用
<iframe>更好
10. <object> - 嵌入物件
是什麼: 更進階的嵌入方式,可以嵌入圖片、影片、PDF、其他網頁等。
怎麼用:
<object data="document.pdf" type="application/pdf" width="600" height="400">
<p>您的瀏覽器不支援 PDF,<a href="document.pdf">請點此下載</a></p>
</object>
object vs iframe vs embed:
<iframe>- 嵌入網頁 (最常用)<embed>- 嵌入 PDF、插件 (簡單)<object>- 嵌入任何東西 (進階、可以有備案)
完整範例:做一個影音相簿!
<article>
<h1>我的暑假回憶</h1>
<!-- 圖片區 -->
<figure>
<img src="beach.jpg" alt="在海邊玩" width="600" loading="lazy">
<figcaption>在海邊玩得好開心!</figcaption>
</figure>
<!-- 影片區 -->
<h2>精彩片段</h2>
<video controls width="600" poster="video-cover.jpg">
<source src="summer.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
</video>
<!-- YouTube 影片 -->
<h2>更多影片</h2>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/影片ID"
allowfullscreen>
</iframe>
</article>
快速小抄
| 標籤 | 用途 | 必填屬性 |
|---|---|---|
<img> |
圖片 | src, alt |
<picture> |
響應式圖片 | - |
<figure> |
圖片+說明 | - |
<video> |
影片 | - |
<audio> |
音訊 | - |
<source> |
多格式來源 | src, type |
<track> |
字幕 | src, kind |
<iframe> |
嵌入網頁 | src |
<embed> |
嵌入外部內容 | src |
<object> |
嵌入物件 | data |