在网页中显示图像是一个非常重要的功能，目前几乎所有页面都会存在图片元素，页面显示图片可以提升页面的观感，没有人喜欢浏览一个充满文字的网页，通常都是图片+文字。
而在 HTML 中，可以通过 <img> 标签在网页中插入图像，能够让静态网页变得更生动直观。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<img src="https://www.hxstrive.com/cdn/resources/img_lake_640.jpg"/>
</body>
</html>运行效果如下图：
注意：在 HTML5 中可直接写 <img>，也可写 <img />，效果一致。
在上面示例，我们使用了 src 属性来指定图片URL地址，其实，<img> 标签不仅仅只有 src 属性，还有很多其他属性，下面将分别介绍：
指定图像的路径（相对路径或绝对路径），这是图像能加载的核心。
相对路径：和当前 HTML 文件在同一目录下的图像，如 ./logo.png、images/photo.jpg（推荐，适合本地项目）。
绝对路径：完整的网络地址，如 https://xxx.com/banner.png（适合引用网络上的公开图像）。
图像加载失败时的替代文本，同时也能被搜索引擎和屏幕阅读器识别（提升可访问性和 SEO），不可省略。例如：
<img src="https://www.hxstrive.com/cdn/resources/img_lake_640_not_exist.jpg"
alt="一张湖边风景图片，湖边布满了石头"/>效果如下图：
设置图像的宽度（单位：像素 px，可省略单位，默认按像素解析）。
设置图像的高度（单位：像素 px，可省略单位，默认按像素解析）。
注意：如果只设置 width 或 height 其中一个，浏览器会自动按图像原始比例缩放，避免变形；如果两个都设置且比例和原图不一致，图像会被拉伸 / 压缩变形。
鼠标悬浮在图像上时，显示的提示文本（提升用户体验）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<p>设置图片高度为200px</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_lake_640.jpg"
height="200" alt="一张湖边风景图片，湖边布满了石头"
title="这是一张图片，我是通过 title 属性设置的信息" />
</p>
<p>设置图片宽度为200px</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_lake_640.jpg"
width="200" alt="一张湖边风景图片，湖边布满了石头"
title="这是一张图片，我是通过 title 属性设置的信息" />
</p>
<p>设置图片大小为200px*200px</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_lake_640.jpg"
height="200" width="200" alt="一张湖边风景图片，湖边布满了石头"
title="这是一张图片，我是通过 title 属性设置的信息" />
</p>
</body>
</html>运行示例，效果如下图：
控制图像加载方式，可选值 lazy（懒加载，页面滚动到图像位置时才加载，提升页面加载速度）、eager（立即加载，默认值）。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
html,body {
height: 100%; width: 100%;
box-sizing: border-box; margin: 0;
}
.empty {
height: 2000px;
background: #CCC;
}
</style>
</head>
<body>
<p>仔细观察，当图片进入可见时才会被加载</p>
<div class="empty">占位置，让他非常高</div>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_lake_1920.jpg"
loading="lazy" width="500" alt="一张湖边风景图片，湖边布满了石头" />
</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_1920_1.jpg"
loading="lazy" width="500" alt="风景图片" />
</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_1920_2.jpg"
loading="lazy" width="500" alt="风景图片" />
</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_1920_3.jpg"
loading="lazy" width="500" alt="风景图片" />
</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_1920_4.jpg"
loading="lazy" width="500" alt="风景图片" />
</p>
<p>
<img src="https://www.hxstrive.com/cdn/resources/img_1920_5.jpg"
loading="lazy" width="500" alt="风景图片" />
</p>
</body>
</html>如果没有效果，可以按照如下步骤操作：
第一步：按 Ctrl + Shift + Delete 组合键删除缓存。
第二步：按 F12 打开控制台，选择“Network”选项卡，勾选“Disable cache”和选择“Fast 4G”网络，如下图：
注意，如果 Fast 4G 网络还是太快，还可以选择 Slow 4G、3G等，如下图：
关于更多HTML知识请学习后续教程……
川公网安备51010802032098