MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Multimedia and embedding

这篇翻译不完整。请帮忙从英语翻译这篇文章

在这份教程中,到目前为止我们已经看到了许多的文字了。真的很多文字。但是网页除了文本之外什么都没有,真的非常无聊,所以,让我们开始看看怎样让网页动起来。用更多有趣的内容!本模块要探索怎样用HTML来让你的网页包含多媒体,包括可以包含图像的不同方式,以及怎样嵌入视频,甚至是整个其他的网页。

预备知识

在你开始本模块之前,你应该已经拥有了关于HTML基础的合理知识,就是之前在HTML简介中所述。如果你还没有看过那个模块(或者类似的),先去看看,然后再回来吧!

提示: 如果你在电脑/平板电脑/其他设备上不能创建你自己的代码文件,你可以尝试在在线代码编辑网站例如JSBin或者Thimble来运行(大部分的)代码示例。

指南

本模块包含以下的文章,它们将会让你了解所有在网页上关于嵌入多媒体的基础方面。

HTML中的图片
还有其他类型的多媒体要考虑,但是从humble<img>元素开始是符合逻辑的,它常常被用来在网页中嵌入一个普通的图片。在这篇文章中,我们要看看怎样更深入的使用它,包括基础,用标题注解<figure>,以及怎样把它和CSS背景图片链接起来。
视频和音频内容
接下来,我们将看看怎样在我们的页面上用HTML5的 <video><audio>元素来嵌入视频和音频;包括基础,提供向不同的浏览器提供不同文件格式的访问方式,增加标题和副标题,以及增加对过时的浏览器的兼容。
From <object> to <iframe> — other embedding technologies
At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the <iframe><embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology that is on the way out, but which you'll still see semi-regularly.
Adding vector graphics to the Web
Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixellate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are, and how to include the popular SVG format in web pages.
Responsive images
With so many differerent device types now able to browse the Web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now we'll look at the tools HTML has available to create responsive images, including the <picture> element.

Assessments

The following assessments will test your understanding of the HTML basics covered in the guides above.

Mozilla splash page
In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!

See also

Add a hitmap on top of an image
Image maps provide a mechanism to make different parts of an image link to different places (think of a map, linking through to further information about each different country you click on.) This technique can sometimes be useful.
Web literacy basics 2

An excellent Mozilla foundation course that explores and tests some of the skills talked about in the Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open.

文档标签和贡献者

 此页面的贡献者: HashubWang, chrisdavidmills
 最后编辑者: HashubWang,