多媒體（Video / Audio）

影片（<video>）

<video src="movie.mp4"
       width="640" height="360"
       controls                   <!-- ← 顯示控制列 -->
       autoplay                   <!-- ← 自動播放（通常需要 muted） -->
       muted                      <!-- ← 靜音（autoplay 需要） -->
       loop                       <!-- ← 循環播放 -->
       poster="thumbnail.jpg"     <!-- ← 載入前顯示的預覽圖 -->
       preload="metadata">        <!-- ← 預載入：none/metadata/auto -->
    你的瀏覽器不支援影片播放。     <!-- ← 後備文字 -->
</video>

<!-- 多格式後備 -->
<video controls width="640">
    <source src="movie.webm" type="video/webm">  <!-- 優先用 WebM -->
    <source src="movie.mp4" type="video/mp4">    <!-- 後備用 MP4 -->
    <p>你的瀏覽器不支援 HTML5 影片。</p>
</video>

音訊（<audio>）

<audio src="song.mp3" controls>
    你的瀏覽器不支援音訊播放。
</audio>

<!-- 多格式 -->
<audio controls>
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
</audio>

嵌入外部內容（<iframe>）

<!-- YouTube 影片 -->
<iframe width="560" height="315"
        src="https://www.youtube.com/embed/VIDEO_ID"
        title="影片標題"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write;
               encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen
        loading="lazy">
</iframe>

<!-- Google Maps -->
<iframe src="https://www.google.com/maps/embed?..."
        width="600" height="450"
        style="border:0"
        allowfullscreen
        loading="lazy">
</iframe>

⚠️ iframe 安全性注意：

<!-- sandbox 限制 iframe 的權限 -->
<iframe src="..." sandbox="allow-scripts allow-same-origin"></iframe>

Canvas（畫布）

<canvas id="myCanvas" width="400" height="300">
    你的瀏覽器不支援 Canvas
</canvas>

<script>
    let canvas = document.getElementById("myCanvas");
    let ctx = canvas.getContext("2d");

    // 畫一個紅色矩形
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 100, 50);

    // 畫文字
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.fillText("Hello Canvas", 10, 100);
</script>

SVG（向量圖）

<!-- 內嵌 SVG -->
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40"
            stroke="#333" stroke-width="2"
            fill="#61DAFB" />
</svg>

<!-- 用 img 載入 SVG -->
<img src="icon.svg" alt="圖示" width="24" height="24">

<!-- SVG 的優點 -->
<!-- 1. 縮放不模糊（向量圖） -->
<!-- 2. 可用 CSS 改顏色 -->
<!-- 3. 檔案通常比 PNG 小 -->