# :-: HTML多媒體與嵌入 ## 一、課堂任務： 這個模塊帶你探索如何使用 HTML 在你的網頁里如何包含多媒體信息，包含如何用各種方法包含圖片，以及如何嵌入視頻、音頻，甚至是嵌入其他完整的網頁。 ## 二、課堂設計： 在這份教程中，到目前為止我們已經看到了許多的文字了。真的很多文字。但是網頁除了文本之外什么都沒有，真的非常無聊，所以，讓我們開始看看怎樣讓網頁動起來。用更多有趣的內容！本模塊要探索怎樣用HTML來讓你的網頁包含多媒體，包括可以包含圖像的不同方式，以及怎樣嵌入視頻，甚至是整個其他的網頁。 ### 1、HTML 中的圖片 [https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Images\_in\_HTML](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) 還有其他類型的多媒體要考慮，但是從低調的 元素開始是符合邏輯的，它常常被用來在網頁中嵌入一個簡單的圖片。在這篇文章中，我們要看看怎樣更深入的使用它，包括基礎，用標題注解 ，以及怎樣把它關聯到CSS背景圖片。 ### 2、視頻和音頻內容 [https://developer.mozilla.org/zh\_CN/docs/Learn/HTML/Multimedia\_and\_embedding/Video\_and\_audio\_content](https://developer.mozilla.org/zh_CN/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) 接下來，我們將看看怎樣在我們的頁面上用HTML5的 和元素來嵌入視頻和音頻；包括基礎，提供向不同的瀏覽器提供不同文件格式的訪問方式，增加標題和副標題，以及增加對過時的瀏覽器的兼容。 ### 3、從對象到 iframe — 其他嵌入技術 [https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Other\_embedding\_technologies](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) 在這一節，我們將來了解一些另辟蹊徑的內容，看一組元素，它們可以讓你在頁面中嵌入許多不同類型的內容： , 和 元素。 用來嵌入其他網頁，而另外兩者可以幫助你嵌入 PDF, SVG, 甚至是 Flash — 一種逐漸退出歷史舞臺的技術，不過也許你還是能時不時的看到它。 ### 4、為 Web 新增向量圖 [https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Adding\_vector\_graphics\_to\_the\_Web](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) 矢量圖像在一些特定場景中非常有用。不同于常見的格式，比如PNG/JPG, 它們不會在放大的時候變得扭曲或者顯示出像素格——它們可以在縮放時保持光滑。本文將為你介紹什么是矢量圖像，以及如何在網頁中添加流行的 SVG 格式圖像。 ### 5、自適應圖片 [https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Responsive\_images](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 現在有許多不同的設備類型能夠瀏覽網絡 \- 從手機到臺式電腦 \- 在現代網絡世界中掌握的一個基本概念就是響應式設計。這是指創建可以自動更改其功能以適應不同屏幕尺寸，分辨率等的網頁。稍后將在CSS模塊中詳細介紹這一點，但是現在我們將看看HTML可用于創建響應式圖像的工具，包括元素。 ## 三、課后作業： 作業：Mozilla 醒目頁面 在這個評估中，我們將測試您對本模塊文章中討論的一些技巧的了解，讓您將一些圖像和視頻添加到一個關于Mozilla的時髦的頁面！ [https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia\_and\_embedding/Mozilla\_splash\_page](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page) ## 四、教學總結：