HTML 图像
# HTML 图像
# 1. HTML 图像- 图像标签（<img>）和源属性（Src）
在 HTML 中，图像由 <img> 标签定义。 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
<img src="url" alt="some_text">
1
示例
<img src="https://www.example.com/image.jpg" alt="Example Image">
1
在上面的示例中，src 属性指定了图像的 URL，而 alt 属性提供了替代文本，这些文本将在图像无法加载时显示。
# 2. HTML 图像- Alt 属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
1
示例
<img src="https://www.example.com/boat.gif" alt="Big Boat">
1
在上述示例中，如果图像加载失败，浏览器将显示替代文本 "Big Boat"。
# 3. HTML 图像- 设置图像的高度与宽度
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素。
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
1
示例
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Pulpit Rock" width="304" height="228">
1
在上述示例中，图像将以 304 像素宽和 228 像素高的尺寸显示。
# 4. HTML 图像- Title 属性
title 属性提供了额外的信息，当用户将鼠标悬停在图像上时，显示为工具提示。
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Pulpit Rock" title="Pulpit Rock Image" width="304" height="228">
1
# 5. HTML 图像- 链接图像
可以将图像嵌入链接中，使图像可点击。
<a href="https://baidu.com">
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Pulpit Rock" width="304" height="228">
</a>
1
2
3
2
3
# 6. HTML 图像- 响应式图像
使用 CSS，可以使图像响应式，即在不同设备上保持适当的大小。
img {
max-width: 100%;
height: auto;
}
1
2
3
4
2
3
4
示例
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Pulpit Rock" style="max-width: 100%; height: auto;">
1
# 7. HTML 图像- srcset 属性
使用 srcset 属性，浏览器可以根据设备的屏幕尺寸选择合适的图像。
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Example" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w">
1
示例
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Example" srcset="https://www.example.com/large.jpg 1024w, https://www.example.com/medium.jpg 640w, https://www.example.com/small.jpg 320w">
1
# 8. HTML 图像- loading 属性
使用 loading 属性，可以延迟加载图像以提高页面性能。
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Pulpit Rock" loading="lazy" style="max-width: 100%; height: auto;">
1
# 9. HTML 图像- 使用图像地图
图像地图允许在单个图像上定义多个可点击区域。
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Map" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="34,44,270,350" href="example1.html" alt="Example1">
<area shape="circle" coords="100,100,50" href="example2.html" alt="Example2">
</map>
1
2
3
4
5
6
2
3
4
5
6
# 10. HTML 图像- 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 图像示例</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Pulpit Rock" title="Pulpit Rock Image" width="304" height="228" loading="lazy">
<a href="https://www.example.com">
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Pulpit Rock" width="304" height="228">
</a>
<img src="small.jpg" alt="Example" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w">
<img src="https://web-183.oss-cn-beijing.aliyuncs.com/typora/202407162040332.jpg" alt="Map" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="34,44,270,350" href="example1.html" alt="Example1">
<area shape="circle" coords="100,100,50" href="example2.html" alt="Example2">
</map>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
通过合理使用 HTML 图像标签及其属性，可以极大地提升网页的视觉效果和用户体验。
编辑此页 (opens new window)
上次更新: 2025/01/25, 22:32:05