图像通过 <img> 标签定义，其没有闭合标签，最好以正斜杠 <img / > 表示关闭。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记本代码(bjbcode.com)</title>
</head>
<body>
<img src="img/logo.png" alt="笔记本代码" />
</body>
</html>src 属性的属性值是图像的 URL 地址，URL 地址指向存储图像的位置。
URL 地址可以是绝对路径，也可以是相对路径。绝对路径和相对路径
src 属性示例：
<img src="img/logo.png" />width(宽度) 与 height(高度) 属性分别用于设置图像的宽度和高度。
其属性值可以是数值，也可以是百分比，默认单位为像素（px）。
指定图像的高度和宽度是一个很好的习惯。如果图像指定了宽高，页面加载时就会使用指定的尺寸。如果没有指定图像的宽高，加载页面时有可能会破坏 HTML 页面的整体布局。
指定宽高设置图像大小：
<img src="img/logo.png" width="500" height="300" />为了避免图像变形失真，通常宽高只设置其中一个，另一个会根据比例自动缩放。
alt 属性用来为图像定义一串预备的可替换的文本，文本内容可自定义。
只有在图像无法载入时，才会展示文本以替换图像。
当图片无法载入时，如果没有为图片设置宽高，那么替换文本不会显示出来，因此想要将替换文本显示出来，需要为图片设置宽高。
alt 属性示例：
<!-- 当图像无法载入时，需要为图像设置宽高，才能显示替换文本 -->
<img src="img/logo1.png" alt="笔记本代码" width="200" height="35" />title 属性定义图像的名称，在鼠标移到图像上时显示。
title 属性示例：
<img src="img/logo.png" title="笔记本代码" />border 属性用于设置图像的边框，属性值为数值，单位默认为像素（px）。
border 属性示例：
<img src="img/logo.png" border="3" />border 的属性值为 0 表示图像周围没有边框。
align 属性用于设置图像相对于周围元素的水平对齐和垂直对齐方式。
默认情况下，图像在页面中显示为左侧对齐，但可以通过 align 属性改变图像的对齐方式。
属性值：
水平方向：
设置图像右对齐：
<img src="img/logo.png" align="right" />img 标签的 align 属性不建议使用，因为不同浏览器对 align 属性的某些值的处理方式是不同的，而且 HTML5 中也不再支持该属性。
loading 属性定义图像的加载方式。
属性值：
当 loading 属性值为 lazy 的时候，浏览器会延迟加载图像，直至用户滚动页面到图像附近时才会加载，一定程度上起到了节流的作用。
当页面图像过多时，懒加载可以避免不要的流量浪费。
设置图像懒加载：
<img src="img/logo.png" loading="lazy" />usemap 属性定义图像映射，图像映射可以点击图片中的某个位置进行跳转。
图像映射需要用到两个标签：
| 标签 | 描述 |
|---|---|
| <map> | 定义图像地图 |
| <area> | 定义图像地图中的可点击区域 |
创建图像映射：
<p>点击太阳或其他行星，注意变化：</p>
<img src="img/note/planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="note/sun.html" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="note/mercury.html" />
<area shape="circle" coords="124,58,8" alt="Venus" href="note/venus.html" />
</map>当图像与文字在一行时，默认与文字的基线对齐，因为文字还存在底线，所以图像下方会存在一段空白。为了解决这个情况，可以设置 align="bottom" 。
