多媒體和嵌入

在本課程中，我們已經學習了很多文字內容，但如果 Web 僅使用文字，就會非常乏味。讓我們開始瞭解如何使用更有趣的內容使 Web 變得生動起來！本模組探討了如何使用 HTML 在網頁中包含多媒體內容，包括包含影像的不同方法，以及如何嵌入影片、音訊，甚至整個網頁。

先決條件

在開始本模組之前，您應該對 HTML 的基礎知識有合理的瞭解，如之前在HTML 簡介中所述。如果您尚未學習過此模組（或類似內容），請先學習，然後再回來！

注意：如果您在無法建立自己檔案的計算機/平板電腦/其他裝置上工作，可以嘗試在 JSBin 或 Glitch 等線上編碼程式中試用（大部分）程式碼示例。

指南

本模組包含以下文章，它們將帶您瞭解在網頁上嵌入多媒體內容的所有基礎知識。

HTML 中的影像: 還有其他型別的多媒體需要考慮，但從簡單的<img>元素開始是合理的，該元素用於在網頁中嵌入簡單的影像。在本文中，我們將更深入地瞭解如何使用它，包括基礎知識、使用<figure>新增標題註釋，以及它與 CSS 背景影像的關係。
影片和音訊內容: 接下來，我們將瞭解如何使用 HTML <video> 和 <audio> 元素在頁面上嵌入影片和音訊，包括基礎知識、向不同瀏覽器提供對不同檔案格式的訪問許可權、新增字幕和隱藏式字幕，以及如何為舊版瀏覽器新增後備方案。
從 <object> 到 <iframe> — 其他嵌入技術: 在這一點上，我們想稍微偏離一下，看看幾個允許您將各種內容型別嵌入網頁中的元素：<iframe>、<embed> 和 <object> 元素。<iframe> 用於嵌入其他網頁，另外兩個允許您嵌入外部資源，例如 PDF 檔案。
向 Web 新增向量圖形: 向量圖形在某些情況下非常有用。與 PNG/JPG 等常規格式不同，它們在放大時不會失真/畫素化——它們在縮放時可以保持平滑。本文向您介紹了向量圖形是什麼以及如何在網頁中包含流行的SVG格式。
響應式影像: 在本文中，我們將學習響應式影像的概念——在具有截然不同的螢幕尺寸、解析度和其他此類功能的裝置上都能正常工作的影像——並瞭解 HTML 提供了哪些工具來幫助實現它們。這有助於提高不同裝置上的效能。響應式影像只是響應式設計的一部分，這是您將來需要學習的 CSS 主題。

評估

以下評估將測試您對以上指南中涵蓋的材料的理解。

Mozilla 啟動頁面: 在本評估中，我們將測試您對本模組文章中討論的一些技術的瞭解，讓您將一些影像和影片新增到一個關於 Mozilla 的有趣首頁中！

另請參閱

在影像頂部新增熱圖: 影像地圖提供了一種機制，可以使影像的不同部分連結到不同的位置。（想象一下，一張地圖連結到您單擊的每個不同國家/地區的更多資訊。）這種技術有時可能很有用。
Web 素養基礎 II: 一個優秀的 Mozilla 基金會課程，探討並測試了本多媒體和嵌入模組中討論的一些技能。更深入地瞭解網頁創作、可訪問性設計、資源共享、使用線上媒體和開放式工作（意味著您的內容可供他人自由使用和共享）的基礎知識。