如何在HTML页面插入图片
将图像插入网页
图像通过使网页更加有趣并丰富多彩，从而增强网页的视觉外观。
<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属性，以便浏览器可以在下载图像之前为其分配空间。否则，图像加载可能会导致您的网站布局失真或闪烁。
使用 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属性用于对应<img>标签的usemap属性。您可以在图像中定义任意数量的可点击区域。
注意：图像地图不应用于网站导航。他们对搜索引擎不友好。图像地图的有效用途是与地理地图一起使用。
提示：有许多在线工具可用于创建图像地图。Adobe Dreamweaver 等一些高级编辑器还提供了一组工具来轻松创建图像映射。