【HTML】多媒体与嵌入

此系列文章是以MDN网站为参考的学习笔记

一、概述

本模块要探索怎样用HTML来让你的网页包含多媒体，包括可以包含图像的不同方式，以及怎样嵌入视频，甚至是整个其他的网页。

二、HTML中的图片

img元素

可以用<img> 元素来把图片放到网页上。它是一个空元素（不需要包含文本内容或闭合标签），最少只需要一个 src （一般读作其全称 source）来使其生效。
src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对URL，就像 元素的 href 属性一样。

<img src="dinosaur.jpg">
<img src="images/dinosaur.jpg">
<img src="https://www.example.com/images/dinosaur.jpg">

像<img>和<video>这样的元素有时被称之为替换元素，因为这样的元素的内容和尺寸由外部资源（像是一个图片或视频文件）所定义，而不是元素自身。

alt属性

下一个我们讨论的属性是 alt ，它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

宽度和高度

可以用宽度和高度属性来指定你的图片的高度和宽度

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">

然而如果你需要改变图片的尺寸，你应该使用CSS而不是HTML。

图片标题

类似于超链接，你可以给图片增加title属性来提供需要更进一步的支持信息。

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

这会给我们一个鼠标悬停提示，看起来就像链接标题。

通过为图片搭配说明文字的方式来解说图片

可以选择<p>来为图片添加说明，但是当图片和文字变多时，无法分辨某一张图片的说明文字是哪一段
所以这里介绍HTML5的<figure>和<figcaption>元素：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。
这个 <figcaption> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure> 元素的内容.

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</f