前端学习第一周

HTML中的图片

多媒体与嵌入

---

---

前言

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

---

一、HTML中的图片

怎样将一副图片放到网页上？

可以使用<img>元素将图片放在网页上，它是一个空元素（不需要包含文本内容或闭合标签），最少只需要一个src(source)就可生效。
src属性包含了引入图片的路径，可以是相对路径或绝对路径。
例如：如果你有一幅文件名为 dinosaur.jpg 的图片，且它与你的 HTML 页面存放在相同路径下，那么你可以这样嵌入它：

<img src = "dinosaur.jpg">

如果这张图片存储在和 HTML 页面同路径的 images 文件夹下，那么你可以采用如下形式：

<img src = "images/dinosaur.jpg">

当然也可以使用绝对路径：

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

但是这种方式是不被推荐的，这样做只会使浏览器做更多的工作，例如重新通过 DNS 再去寻找 IP 地址。通常我们都会把图片和 HTML 放在同一个服务器上。

备选文本

<img>的属性 alt，它的值对应的是对图片的文字描述，用于图片无法显示的情况。例如将上面的例子进行改进：

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

测试alt 属性最简单的方式就是故意拼错图片文件名，这样浏览器就无法找到该图片从而显示备选的文本。如果我们将上例的图片文件名改为 dinosooooor.jpg，浏览器就不能显示图片，而显示：

宽度和高度

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

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

title 图片标题

可以为图片增加title属性：

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

当鼠标悬停在图片上时会出现title：

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

使用HTML5中的<figure> 和 <figcaption>元素：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。

<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>
</figure>

这个 <figcaption> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure> 元素的内容。
注意：
<figure> 里不一定要是一张图片，只要是一个这样的独立内容单元：

• 用简洁、易懂的方式表达意图。
• 可以置于页面线性流的某处。
• 为主要内容提供重要的补充说明。

<figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。

CSS背景图片

可以使用 CSS 把图片嵌入网站中（JavaScript 也行，不过那是另外一个故事了），这个 CSS 属性 background-image 和另其他 background-* 属性是用来放置背景图片的。比如，为页面中的所有段落设置一个背景图片，你可以这样做：

p {
  background-image: url("images/dinosaur.jpg");
}

总结

提示：这里对文章进行总结：

目前到此为止，我们详细介绍了图片和说明文字，在下篇文章中，我们将进一步看看如何使用 HTML 在网页上嵌入音频和视频。