Multimedia and Embedding

到目前為止,我們已經看到了很多文字,但是只使用文字讓人感到無聊。讓我們開始研究如何透過更有趣的內容讓網絡變得活躍起來!本單元探討如何使用 HTML 在你的網頁中包增加媒體,包括可以嵌入圖像的不同方式,以及如何嵌入影片,音訊甚至整個網頁。

預備知識

在此單元開始之前,我們假設你對 HTML 基礎知識 (如HTML 介紹) 已經有一定的了解,如果還沒有,建議你先預習該部分再回來。

備註: 如果你所操作的電腦、平板或裝置環境不允許你建立自己的檔案,你可以在諸如 JSBinGlitch 這樣的網站上嘗試(多數的)範例程式碼。

導覽

本單元包含以下章節,它們將帶你了解在網頁上嵌入多媒體的所有基礎知識。

HTML 中的圖片

可以考慮到的多媒體種類很多,但是從用以將簡單圖像嵌入網頁中不起眼的 img元素開始是很合乎邏輯的。在本文中,我們將研究如何更深入地使用它,包括基礎知識,使用<figure> (en-US)加上標題的註釋以及它與 CSS 背景圖像的關係。

視訊與音訊內容 (en-US)

接著,我們將研究如何使用 HTML5 <video> (en-US)<audio> 元素在頁面上嵌入視訊和音訊,包括基本知識,以提供對不同頁面的訪問文件格式添加到不同的瀏覽器,添加標題和字幕,以及如何為舊版瀏覽器添加後備廣告。

從物件到 iframe — 其他嵌入技巧 (en-US)

在這裡,我們想橫跨一步,著眼於幾個元素,這些元素可以使你將各種內容類型嵌入到網頁中:<iframe> (en-US)<embed> (en-US)<object> (en-US)元素。 <iframe>用於嵌入其他網頁,另外兩個允許你嵌入 PDF,SVG 甚至 Flash(一種即將消逝的技術,但你可能仍會定期看到它)。

為 Web 新增向量圖 (en-US)

向量圖形在某些情況下可能非常有用。 與 PNG / JPG 等常見格式不同,它們在放大時不會失真/像素化-在縮放時可以保持平滑。 本文向你介紹什麼是向量圖,以及如何在網頁中加入流行的SVG格式。

適應性圖片 (en-US)

在本文中,我們將學習適應性圖片 (又稱響應式圖片)的概念。適應性圖片在不同螢幕尺寸,解析度和其他類似功能差異很大的設備上都能很好地運作。我們還會研究 HTML 提供了哪些工具來幫助實現它們。 這有助於提高不同設備之間的性能。 響應式圖片只是響應式設計的一部分,在將來你學習 CSS 的單元中還會有響應式圖片的單元。

評量

以下評量中將測試你對以上指南中介紹的 HTML 基礎的理解:

Mozilla 啟動頁面 (en-US)

在此測驗中,我們將測試你對本區塊文章中討論的一些技術的了解,使你能夠向時髦的啟動頁面添加有關 Mozilla 的一些圖片和視訊!

另見

增加點擊映射到圖片上層 (en-US)

圖像映射提供了一種機制,可以使圖像的不同部分鏈接到不同的位置。(請試想在地圖上點擊每個不同國家/地區以取得更多資訊)此技術有時很有用。

網頁知識基礎 2

一個出色的 Mozilla 基礎課程,探索和測試此多媒體和嵌入單元中討論的一些技能。 深入研究網頁組成,可訪問性設計,共享資源,使用線上媒體和開放性工作的基礎知識(這意味著你的內容可以免費獲得併可以由他人共享)。