多媒体与嵌入
我们在这门课程中已经见到了很多文本,但是如果只使用文本,网页就会变得非常无聊。让我们开始学习如何在网页中添加更有趣的内容吧!这个模块将探讨如何用 HTML 在网页中包含多媒体,包括不同的图片插入方式,以及如何嵌入视频、音频,甚至整个网页。
预备知识
指南
本模块包含以下文章,将带你了解在网页上嵌入多媒体所需的所有基础知识。
- HTML 中的图片
-
虽然还有很多其他类型的多媒体要考虑,但是从简单的
<img>
元素开始比较符合逻辑,它常常被用来在网页中嵌入简单的图片。在这篇文章中,我们将学习怎样更深入的使用它,包括基础知识,使用<figure>
来为图片增加说明,以及它如何关联到 CSS 背景图片。 - 视频和音频内容
-
接下来,我们将学习怎样在我们的页面上用 HTML 的
<video>
和<audio>
元素来嵌入视频和音频;包括基础知识,向不同的浏览器提供不同文件格式的访问方式,增加标题和副标题,以及增加对过时的浏览器的兼容。 - 从 <object> 到 <iframe>——其他嵌入技术
-
在这一节,我们将来了解一些另辟蹊径的内容,学习一组特殊的元素,你可以用它们在页面中嵌入许多不同类型的内容:
<iframe>
、<embed>
和<object>
元素。<iframe>
用来嵌入其他网页,而另外两者可以帮助你嵌入外部资源(例如 PDF 文件)。 - 在页面中添加矢量图像
-
矢量图像在一些特定场景下非常有用。不同于常见的格式(比如 PNG/JPG),它们不会在放大的时候变得扭曲或者显示出像素格——它们可以在缩放时保持光滑。本文将为你介绍矢量图像,以及如何在网页中添加流行的 SVG 格式图像。
- 响应式图片
-
在这篇文章中,我们将学习响应式图片的概念(即能够适应不同屏幕尺寸、分辨率和其他特性的图片),并且了解 HTML 提供了哪些工具来实现它们。这有助于提高不同设备上的性能。响应式图片只是响应式设计的一部分,你会在之后学习到相关 CSS 主题的内容。
测验
以下测验将测试你对上述指南中涵盖的 HTML 基础知识的理解:
- Mozilla 启动页面
-
在这个测验中,我们将测试你对本模块文章中讨论的一些技巧的了解,让你将一些图像和视频添加到一个关于 Mozilla 的时髦的页面!
参见
- 在图像的顶部添加点阵图
-
图像映射提供了一种机制,使图像的不同部分链接到不同的地方(想想地图,链接到有关你点击的每个不同国家的更多信息。)这种技术有时可能是有用的。
- 网络素质基础 2
-
这是一门优秀的 Mozilla 基金会课程,它探索和测试了本多媒体和嵌入模块中讨论的一些技能。深入了解编写网页、设计无障碍、共享资源、使用在线媒体和开放工作(意味着你的内容可以自由地被其他人获取和分享)的基础知识。