Multimedia and Embedding

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

預備知識

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

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

導覽

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

HTML中的圖片
可以考慮到的多媒體種類很多,但是從用以將簡單圖像嵌入網頁中不起眼的< img>元素開始是很合乎邏輯的。在本文中,我們將研究如何更深入地使用它,包括基礎知識,使用<figure>加上標題的註釋以及它與CSS背景圖像的關係。
視訊與音訊內容
接著,我們將研究如何使用HTML5 <video><audio> 元素在頁面上嵌入視訊和音訊,包括基本知識,以提供對不同頁面的訪問文件格式添加到不同的瀏覽器,添加標題和字幕,以及如何為舊版瀏覽器添加後備廣告。
從物件到 iframe — 其他嵌入技巧
在這裡,我們想橫跨一步,著眼於幾個元素,這些元素可以使您將各種內容類型嵌入到網頁中:<iframe><embed>和 <object>元素。 <iframe>用於嵌入其他網頁,另外兩個允許您嵌入PDF,SVG甚至Flash(一種即將消逝的技術,但您可能仍會定期看到它)。
為 Web 新增向量圖
向量圖形在某些情況下可能非常有用。 與PNG / JPG等常見格式不同,它們在放大時不會失真/像素化-在縮放時可以保持平滑。 本文向您介紹什麼是向量圖,以及如何在網頁中加入流行的SVG格式。
適應性圖片
在本文中,我們將學習適應性圖片 (又稱響應式圖片)的概念。適應性圖片在不同螢幕尺寸,解析度和其他類似功能差異很大的設備上都能很好地運作。我們還會研究HTML提供了哪些工具來幫助實現它們。 這有助於提高不同設備之間的性能。 響應式圖片只是響應式設計的一部分,在將來您學習CSS的單元中還會有響應式圖片的單元。

評量

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

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

另見

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

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