昨天我們複習了各種文字標籤，讓一個單純的 HTML 頁面變得更有「層次感」。
但老實說，一個只有文字的網站，確實有點單調。想像一下，如果遊戲裡只有文字敘述，沒有角色立繪、沒有背景音樂，整體的沉浸感一定大打折扣。

今天我們就要進入 「圖片與多媒體標籤」 的世界，讓網頁開始「活起來」!

圖片：<img>

在 HTML 中插入圖片的方式非常直觀：

<img src="me.jpg" alt="我的大頭照" width="300">

src：圖片來源 (source)，可以是本地檔案，也可以是網路圖片連結。(圖片來源不同，連結方法不一樣)

alt：替代文字 (alternative text)，當圖片無法顯示，或使用螢幕閱讀器時，會讀出這段文字。這在SEO與 無障礙設計 中非常重要

width / height：控制圖片大小，但實務上我們更常用 CSS 來調整

小提醒：圖片不是越大越好，放上去之前記得壓縮、最佳化，否則整個網站會變超慢ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

影片與音樂：<video>、<audio>

現代網站除了文字與圖片，影音幾乎是必備。HTML5 提供了 <video> 與 <audio>，讓我們不用額外安裝 Flash，就能播放多媒體~

<video controls width="400">
  <source src="demo.mp4" type="video/mp4">
  你的瀏覽器不支援影片播放。
</video>

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  你的瀏覽器不支援音樂播放。
</audio>

• controls：顯示播放、暫停、音量等控制介面
• source：可以放多個檔案格式（mp4、webm、ogg），確保跨瀏覽器支援
• autoplay：自動播放（但多數瀏覽器會阻擋，避免干擾使用者）
• loop：循環播放

響應式圖片 (Responsive Images)

RWD（Responsive Web Design，響應式網頁設計）在現代已經是標配，尤其是圖片，手機螢幕、平板、桌機解析度差異很大，非常重要!!!

想像一下：一張 4K 橫幅圖，如果手機也載入同樣尺寸，光是等待就足以逼退使用者，尤其是在網路不好時。

解法有幾種：

1. 使用百分比寬度

<img src="banner.jpg" alt="橫幅圖片" style="width:100%; height:auto;">

圖片就能跟著版面縮放

2.使用 srcset 與 sizes

<img 
  src="small.jpg" 
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 800px, 1200px"
  alt="RWD 圖片示範">

意思是：「當螢幕寬度小於 600px，用 small.jpg；
介於 600–1200px 時，用 medium.jpg；
超過 1200px 時，就載入大圖 large.jpg。」

告訴瀏覽器：「根據裝置寬度，挑最合適的圖片載入」，不會在手機上硬塞超大圖，也能在桌機上保持清晰。

(o･e･)*這是近幾年網站性能優化的重要技巧，非常推薦熟悉
₍₍ ◝('ω'◝) ⁾⁾ ₍₍ (◟'ω')◟ ⁾⁾

學習心得

今天最大的收穫，是意識到 HTML 不只是放內容，還要考慮「怎麼呈現」與「效能」。
以前再不知道有那麼多種呈現方式時，我會覺得 <img> 很簡單，但當要考慮：

• 不同裝置載入不同大小圖片
• 圖片載入失敗時還要有替代文字
• SEO 與無障礙設計

才發現一張圖片背後其實藏著很多細節。

影片與音樂的部分，也讓我覺得網頁就像一個「小型多媒體平台」，不再只是靜態的文字展示，讓網站更豐富!