Multimedia and embedding

先決條件

在開始此模塊之前，您應(yīng)該了解HTML的基本知識，如 HTML簡介所述。 如果你沒有通過這個模塊(或類似的東西)，先通過它，然后回來！

指南

此模塊包含以下文章，將帶您了解在網(wǎng)頁上嵌入多媒體的所有基本知識。

Images in HTML

There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. In this article we'll look at how to use it in depth, including basics, annotating it with captions using <figure>, and how it relates to CSS background images.

Video and audio content

Next, we'll look at how to use the HTML5 <video> and <audio> elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.

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.

評估

以下評估將測試您對上述指南中HTML基礎(chǔ)知識的理解。

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!

也可以看看

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

一個優(yōu)秀的Mozilla基礎(chǔ)課程，探索和測試在多媒體和嵌入模塊中討論的一些技能。 深入了解撰寫網(wǎng)頁的基礎(chǔ)知識，設(shè)計無障礙功能，共享資源，使用在線媒體和開放工作。