1.在HTML标签中,<img>标签可以用来定义HTML中的图像
写法:
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名
所谓属性:简单理解就是属于这个图像标签的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
图片标签的使用
<img src="bg1.png"/>
</body>
</html>
运行效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<h4>图片标签的使用</h4>
<img src="bg1.png"/>
</body>
</html>
2.图像标签的其他属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<h4>alt 替换文本 图像显示不出来的时候用文本替换</h4>
<img src="bg.png" alt="风景"/>
</body>
</html>
运行效果:
因为项目文件中没有bg.png的照片,所以只能显示文字
3.title为提示文本,当鼠标放到图像上时,显示文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
</head>
<body>
<h4>title为提示文本 当鼠标放到图像上,提示文字</h4>
<img src="bg1.png" alt="风景" title="这是一张图片"/>
</body>
</html>