如何在HTML页面插入图片

在 HTML 中,图像由img标签定义。img 是空标签,意思是说,它只包含属性,并且没有闭合标签。在本教程中,您将学习如何在 HTML 文档中包含图像。文章包含四个知识点:将图像插入网页、设置图像的宽度和高度、使用 HTML5 图片元素和使用图像映射。

将图像插入网页

图像通过使网页更加有趣并丰富多彩,从而增强网页的视觉外观。

<img>标签用于在 HTML 文档中插入图像。它是一个空元素,仅包含属性。<img>标签的语法可以通过以下方式给出:

<img src ="url" alt="some_text">

以下示例在网页上插入三个图像:

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Balloons">

每个图像必须至少带有两个属性:src属性和alt属性。

src属性告诉浏览器在哪里可以找到图像。它的值是图像文件的 URL。

然而,如果图像不可用或由于某种原因无法显示,则alt属性会为图像提供替代文本。它的值应该是图像有意义的描述。

注意:<br>一样,<img>元素也是一个空元素,并且也没有结束标签。然而,在 XHTML 中,它以“ />”结尾。

 

设置图像的宽度和高度

widthheight属性用于指定图像的宽度和高度。

默认情况下,这些属性的值以像素为单位。

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">

您还可以使用style属性来指定图像的宽度和高度。它可以防止样式表意外更改图像大小,因为内联样式具有最高优先级。

<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">

注意:最好同时为图像指定widthheight属性,以便浏览器可以在下载图像之前为其分配空间。否则,图像加载可能会导致您的网站布局失真或闪烁。

 

使用 HTML5 图片元素

有时,放大或缩小图像以适应不同的设备(或屏幕尺寸)不会按预期工作。此外,使用widthheight属性减小图像尺寸不会减小原始文件大小。为了解决这些问题,HTML5 引入了<picture>允许您定义图像的多个版本以针对不同类型的设备显示不同的图片。

<picture>元素包含零个或多个<source>元素,每个元素引用不同的图像源,最后一个元素是<img>。此外,每个<source>元素都具有media指定媒体条件(类似于媒体查询)的属性,浏览器使用该属性来确定何时应使用特定源。让我们尝试一个例子:

<picture>
    <source media="(min-width: 1000px)" srcset="logo-large.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="My logo">
</picture>

注意:浏览器会评估每个子<source>元素并从中选择最佳匹配;如果未找到匹配项,则<img>元素使用src属性的 URL。此外,<img>标记必须指定为<picture>元素的最后一个子元素。

 

使用图像映射

图像映射允许您在图像上定义热点,就像超链接一样。

创建图像映射背后的基本思想是提供一种简单的方法来链接图像的各个部分,而无需将其划分为单独的图像文件。例如,世界地图可能会将每个国家/地区超链接到有关该国家/地区的更多信息。

让我们尝试一个简单的示例来了解它的实际工作原理:

<img src="objects.png" usemap="#objects" alt="Objects">