如何在HTML页面插入图片

241次阅读

共计 2229 个字符，预计需要花费 6 分钟才能阅读完成。

在 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 中，它以“ />”结尾。

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

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

<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;">

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

有时，放大或缩小图像以适应不同的设备（或屏幕尺寸）不会按预期工作。此外，使用 width 和height属性减小图像尺寸不会减小原始文件大小。为了解决这些问题，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">
<map name="objects">
    <area shape="circle" coords="137,231,71" href="clock.html" alt="Clock">
    <area shape="poly" coords="363,146,273,302,452,300" href="sign.html" alt="Sign">
    <area shape="rect" coords="520,160,641,302" href="book.html" alt="Book">
</map>

<map> 标签的 name 属性用于对应 <img> 标签的 usemap 属性。您可以在图像中定义任意数量的可点击区域。

注意：图像地图不应用于网站导航。他们对搜索引擎不友好。图像地图的有效用途是与地理地图一起使用。

提示：有许多在线工具可用于创建图像地图。Adobe Dreamweaver 等一些高级编辑器还提供了一组工具来轻松创建图像映射。

正文完