HTML常用标签之图像标签

最新推荐文章于 2024-04-23 02:00:49 发布

格子学前端

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量5.1k

点赞数 13

分类专栏：前端 html 文章标签： html css3 前端

本文链接：https://blog.csdn.net/m0_61794291/article/details/122387823

版权

前端同时被 2 个专栏收录

43 篇文章 5 订阅

订阅专栏

html

31 篇文章 1 订阅

订阅专栏

图像标签<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>

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

格子学前端

关注

13
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签之图像标签

图像标签<img>用于定义HTML页面中的图像，它有多种属性，下面简单介绍一下它的一些重要属性1. src <img src="图像URL"/> src是`<img>`标签的必须属性，用于指定图像文件的路径，我们可以通过在src属性中写入图片关于html文件的相对路径或者绝对路径来达到使网页中显示图片的目的，具体操作如下~<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫