基本用法
在html中，使用<img>元素来表示图像，它常用的属性有src、alt、title。
src 属性告诉浏览器在哪里可以找到所需的图像，通常是一个相对的URL，可绝对的URL。
alt 属性告诉浏览器无法加载图片时显示的图片说明。
title 属性提示图片的相关附加信息。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html> <head> <title>图像</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>图像</h1> alt="湘南IT培训" title="湘南IT培训"> </body></html> |
宽度和高度
img元素还可以指定图像的宽度和高度，分别使用属性height、width表示。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html><html> <head> <title>图像</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>图像</h1> height="20" width="30" alt="湘南IT培训" title="湘南IT培训"> </body></html> |
H5图像说明
在HTML5中引入了新的元素，用于做图片说明，让图像和说明关系更紧密。
<figure>元素用于包含图像元素及图像说明元素。
<figcaption>元素用于图像说明。
示例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html><html> <head> <title>图像</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>图像</h1> <figure> alt="湘南IT培训" title="湘南IT培训"> <figcaption>湘南IT培训 java程序设计</figcaption> </figure> </body></html> |