HTML 图像
在本教程中，您将学习如何在 HTML 文档中包含图像。
将图像插入网页
图像通过使网页具有更加有趣和丰富多彩来增强网页的视觉外观。
<img> 标签用于在 HTML 文档中插入图像。 它是一个空元素，仅包含属性。 <img> 标签的语法可以通过以下方式给出：
以下示例在网页上插入三个图像：
<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 属性为图像提供替代文本，如果它不可用或由于某种原因无法显示。 它的值应该是图像的有意义的替代品。
提示： 必需的 alt 属性为图像提供替代文本描述，如果用户由于某种原因由于连接速度慢而无法查看图像，图像在指定时不可用 URL，或者如果用户使用屏幕阅读器或非图形浏览器。
设置图像的宽度和高度
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 属性，以便浏览器可以为 下载之前的图像。 否则，图像加载可能会导致您的网站布局失真或闪烁。
使用 HTML5 图片元素
有时，放大或缩小图像以适应不同的设备（或屏幕尺寸）不会按预期工作。 此外，使用 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 属性用于使用 usemap 属性从 <img> 标签引用地图。 <area> 标签用于在 <map> 元素内定义图像上的可点击区域。 您可以在图像中定义任意数量的可点击区域。
注意：图片地图不应用于网站导航。 他们对搜索引擎不友好。 图像地图的有效用途是与地理地图一起使用。
提示：有许多在线工具可用于创建图像地图。 Adobe Dreamweaver 等一些高级编辑器还提供了一组工具来轻松创建图像映射。