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>

预览图如下~
在这里插入图片描述

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>