Adding Images in CSS

我们会在互联网上扫描有趣的教育内容，这些内容通常是纯文本。HTML 提供了增强这些简单文本的方法，包括插入富媒体（图片、音频文件和电影）和内联框架（来自其他网站的内容）。

网站一直支持嵌入照片、音乐文件、电影和内联框架。内联框架和图片通常具有良好的浏览器支持。此外，即使向网站添加电影和音频文件已经可能很长时间了，但这个过程一直有点困难。幸运的是，随着 HTML 的直接支持，这个过程得到了改进并变得更简单。

如今，我们可以无限制地使用照片、音乐、视频和内联框架，因为它们与许多主流浏览器兼容。

添加图片

图片使用内联元素添加到页面上。该元素是空的或自包含的，意味着它以单个标签存在，并且不包含任何其他内容。该元素必须提供一个 src 属性及其值，以标识图片的来源才能正常工作。src 属性的值是 URL，通常指向托管网站的服务器。

alt（替代文本）元素应该与 src 属性一起使用，该元素描述了图片的内容。搜索引擎和辅助技术使用 alt 属性值来帮助传达图片的目的。如果图片不可用，则会显示 alt 文本。

丢失的图片已被替代文本“一只戴着头巾的黑、棕、白色的狗”替换。

可接受的图片格式

图片有多种文件格式，不同的浏览器可能支持（或不支持）不同的格式。GIF、JPG 和 PNG 格式的图片通常是在线最广泛接受的格式。如今，jpg 和 png 是最常用的文件类型。为了更快的加载时间，jpeg 格式以合理的图片大小提供了高质量、色彩丰富的图片。颜色数量少或具有透明度的图片在 PNG 格式中效果很好。JPG 图片通常代表照片，而 PNG 图片代表图标和背景图案。

调整图片大小

图片的大小至关重要，因为它会告诉浏览器在页面打开之前图片应该有多大，从而允许浏览器预留空间并更快地渲染页面。图片可以通过几种不同的方式调整大小，以便在网站上正确显示。一种方法是在 HTML 元素中使用 width 和 height 属性。

CSS 的 width 和 height 属性也可以用来调整图片大小。在使用 CSS 属性的同时使用 HTML 属性时，CSS 属性将首先被使用。

当指定一个维度时，另一个维度将自动更改以保持图片的纵横比。例如，如果我们希望图片高度为 200 像素，但对其宽度不太担心，我们可以将图片高度设置为 200 像素，宽度将随之匹配。调整图片的宽度和高度也可以工作，但这样做可能会损坏图片的纵横比。

虽然在 HTML 中直接使用 width 和 height 元素识别图片的原始尺寸会增加一些语义价值，但管理需要全部相同尺寸的多张图片可能会很困难。在这种情况下，使用 CSS 调整图片大小是标准的做法。

定位图片

我们可以使用几种方法在网页上排列照片。默认情况下，图片被定位为行内级元素，但您可以使用 CSS 调整它们的位置。具体来说，您可以使用 float、display 和 box model 属性，其中包括 padding、border 和 margin 来更改图片的位置。

行内定位图片

该元素默认是行内级元素。当图片被添加到网站而没有任何样式时，它将与周围的内容显示在同一行。当图片出现时，它也可能导致行内出现较大的垂直间隙，因为行的高度将调整为匹配图片的高度。

Gatsby 是一只混种猎犬幼犬，拥有黑、棕、白色的毛皮，喜欢被挠肚子并对消防车大喊大叫。尽管它大部分时间都在睡觉，但它不会放过任何一只从它面前经过的鸟。

块级定位的图片

当给图片添加 display 属性并将其值设置为 block 时，图片默认就成为一个块级元素。这允许周围的信息可以定位在图片之上和之下，使其出现在自己的行上。

语法

此部分标记为“teaser col-1-3”> <h5>演讲者</h5> <a href="speakers.html"> <img src="assets/images/home/speakers.jpg" alt="专业演讲者"> <h3>顶级演讲者</h3> </a> <p>二十多位杰出的演讲者将从世界各地加入我们，讲述他们的故事。<p> </section>

将图片定位在左侧或右侧

将图片显示为内联块或甚至只是内联块并不总是理想的。图片可以定位在其包含元素的左侧或右侧，而其他信息则根据需要围绕它进行包装。要做到这一点，我们使用带有 left 或 right 值的 float 属性。

正如我们在第 5 课“内容定位”中所记得的，float 属性最初是为了将图片定位在包含元素的左侧或右侧。现在我们将它用于其预期目的。

单独浮动的图片是一个不错的起点，但其他所有内容都会与之对齐。我们将使用 margin 属性在图片周围显示一些距离。如果需要，我们还可以使用 padding、border 和 background 属性创建一个图片框。

何时使用背景图片与图片元素

• 网页可以通过两种主要方法添加图片。一种方法是利用此处讨论的 HTML 中的元素。另一种为元素添加背景图片的方法是使用 CSS 中的 background 或 background-image 属性。这两种选择都可以实现，但它们各有不同的应用。
• 当图片具有语义意义，并且其内容与页面内容相关时，使用 HTML 中的元素是更好的选择。
• 当图片融入页面设计或用户体验时，建议的选择是使用 CSS 中的 background 或 background-image 属性。因此，它与页面内容没有直接关系。
• 该元素被广泛使用，并且它被添加到 HTML 标准中永远改变了网站开发的基础。

实践中

现在我们知道了如何在页面上添加和排列图片，让我们来看看我们的 Styles Conference 网站，看看在哪里可以添加一些图片。

让我们先用几张图片来增强我们的主页。更具体地说，我们将在每个摘要部分包含一张宣传我们几个页面的图片。

但首先，让我们在“assets”文件夹中创建一个名为“images”的新文件夹。接下来，我们在“images”文件夹中创建一个名为“home”的新文件夹，仅用于主页的照片。将三个文件添加到“home”文件夹：speakers.jpg、schedule.jpg 和 venue.jpg。（您可以将这些图片下载为 zip 文件作为参考。）

然后，我们 index.html 文件中的每个摘要部分都有一个包含 <a> 元素的 <section> 元素和一个 <h3> 元素。让我们将 <h3> 元素移到 <a> 元素之上，并在其位置添加一个新元素。每个 <img> 元素都将有一个 alt 属性值来描述每张图片的内​​容，src 属性值将匹配我们设置的文件夹结构和文件名。

此部分标记为“teaser col-1-3”> <h5>演讲者</h5> <a href="speakers.html"> <img src="assets/images/home/speakers.jpg" alt="专业演讲者"> <h3>顶级演讲者</h3> </a> <p>二十多位杰出的演讲者将从世界各地加入我们，讲述他们的故事。<p> </section>

在主页添加几张图片后，我们必须确保它们与页面布局匹配并整理好它们的样式。

让我们将摘要部分中的图片转换为块级元素，因为它们默认是行内级元素。为了确保它们不会比其列的宽度更宽，我们还将它们的 max-width 设置为 100%。更改此宽度数字至关重要，以便我们的图片可以调整大小以适应列的宽度。

最后，为了给图片留出一些空间，让我们将角落稍微圆化，并添加 22 像素的底部边距。

当我们使用 teaser 类作为元素的限定选择器将这些新样式合并到我们当前的首页样式中时，我们的 CSS 将如下所示。

语法

音频回退和多源

目前，不同的浏览器支持三种最常见的音频文件类型：ogg、MP3 和 WAV。我们需要采用一些音频回退，这些回退将插入到 <audio> 元素的开始和结束标签内，以提供最佳的浏览器兼容性。

首先，我们将 src 属性从 <audio> 元素中移除。相反，我们将使用 <audio> 元素内的 <source> 元素，并使用 src 属性指定一个新源。

通过使用 <source> 元素和 src 属性，可以按顺序一一列出每种音频文件类型。我们将使用 type 属性来帮助浏览器快速确定哪些音频类型可用。当浏览器检测到文件格式时，它会加载一个音频文件并忽略所有其他文件。

并非所有浏览器都可能支持 <audio> 元素，因为它最初是在 HTML5 中引入的。我们可以在 <audio> 元素内的任何 <source> 元素后提供下载音频文件的链接。

为了确保音频播放器在支持该元素的浏览器中可见，<audio> 元素的前面代码中包含了 controls 布尔属性。<audio> 元素包含三个不同的 <source> 组件，而不是 src 属性。每个 <source> 元素有两个属性：一个 type 属性，表示音频文件的类型，以及一个 src 属性，指向不同的音频文件格式。如果浏览器无法检测到任何音频文件类型，则下载元素的锚点链接将作为最后的手段显示。

<video> 元素与 <audio> 元素一样，在 HTML5 中被添加，它们非常相似。

添加视频

在 HTML5 中，添加音频和视频非常相似。我们使用 <video> 元素而不是 <audio> 元素。相同的回退和属性（source、autoplay、controls、loop 和 preload）也适用。

如果 controls 布尔属性为空，则不显示 <audio> 元素的音频剪辑。如果 controls 的布尔属性未指定，则会显示视频。然而，除非还应用了 autoplay 布尔功能，否则观看有点困难。总的来说，除非有充分的理由阻止用户开始、暂停或重复播放视频，否则最好添加 controls 布尔功能。

视频会占用页面空间，所以指定其尺寸并无坏处。在 CSS 中，width 和 height 属性最常用于此。这使得控制视频大小更加容易，并使其保持在页面建议布局内。与照片一样，给出尺寸也使浏览器能够更快地生成视频，并允许显示视频所需的适当空间。

包含视频演示

出于速度原因，此视频演示是本地托管的，但您仍然可以在 CodePen 上学习和修改代码。

自定义音频和视频控件

默认情况下，各个浏览器会设置 <audio> 和 <video> 元素的控件。根据网站的设计，可能对媒体播放器的外观和感觉有更大的控制权。如果是这样，那么应该可以创建一个自定义播放器。但是，这需要一些 JavaScript 才能工作。

此外，alt 属性的值应表明图像是控件，并且需要适当的交互才能使其正常工作，如果自定义播放器使用 <img> 元素作为控件。

Poster 属性

poster 属性是另一个可以应用于 <video> 元素的属性。使用 poster 功能，我们可以指定一个图像（作为 URL），该图像将在电影开始前显示。下面示例中的 Earth 视频海报是从视频中截取的屏幕截图。

视频回退

与 <audio> 元素一样，也需要视频回退。在 <video> 元素内，使用相同的标记语法，为每种文件类型使用多个 <source> 组件，并以纯文本回退。

使用来自 Vimeo 或 YouTube 的嵌入式视频是可以使用的一种额外的回退选项，而不是纯文本回退。这些托管视频的网站允许我们上传它们，提供一个通用的视频播放器，并使用内联框架将电影嵌入到页面中。

HTML5 音频和视频文件格式

<audio> 和 <video> 组件所需的文件格式各不相同，浏览器对这些元素的支持也各不相同。每个浏览器都有推荐的音频和视频文件格式。

快速搜索会产生大量可能性。有几个应用程序可以帮助将音频或视频文件转换为多种格式。

添加内联框架

将另一个 HTML 页面嵌入到当前页面是向网页添加内容的另一种方法。为此，使用内联框架或 <iframe> 元素。当 <iframe> 元素在 src 属性值中接受另一个 HTML 页面的 URL 时，将在当前页面上显示嵌入的 HTML 页面的内容。src 属性的值可以是完全外部页面的绝对 URL，也可以是 <iframe> 元素所在的页面的相对 URL。

许多网站使用 <iframe> 元素将来自外部网站（包括 YouTube 和 Google Maps）的内容嵌入到他们的页面上。