HTML常用标签之图像标签
图像标签<img>
用于定义HTML页面中的图像,它有多种属性,下面简单介绍一下它的一些重要属性
1. src <img src="图像URL"/>
src是<img>
标签的必须属性,用于指定图像文件的路径,我们可以通过在src属性中写入图片关于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>Document</title>
</head>
<body>
<img src="aa.png">
</body>
预览图如下~
2. alt <img src="图像URL" alt="替换的文字"/>
alt属性的作用是当图像无法显示时用文字来代替图像显示,具体操作如下~
<!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>Document</title>
</head>
<body>
<img src="aaa.png" alt="由我alt来代替图像显示">
</body>
</html>
预览图如下~
3. title <img src="URL" title="格子学前端"/>
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>Document</title>
</head>
<body>
<img src="aa.png" title="格子学前端" />
</body>
</html>
预览图如下~