HTML04：图片标签

MNox

已于 2023-04-20 10:48:18 修改

阅读量29

点赞数

分类专栏：前端三剑客文章标签： html 服务器

于 2023-04-20 10:47:35 首次发布

本文链接：https://blog.csdn.net/m0_62820255/article/details/130260712

版权

前端三剑客专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了HTML中用于插入图像的标签，包括src属性用于指定图像路径，alt属性提供图像无法显示时的替代文本，title属性则在鼠标悬停时显示提示信息，以及width和height属性用于设置图像的尺寸。

摘要由CSDN通过智能技术生成

<img>定义HTML页面中图像

<img src="" alt="" tittle="" width="" height="">

<img>是单标签

属性：

1、src:路径

<!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="p2831307612.jpg">
</body>
</html>

2、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="p2831307612.jg" alt="喜羊羊与灰太狼之筐出未来">
</body>
</html>

3、width：规定图像的宽度

<!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="p2831307612.jpg" alt="喜羊羊与灰太狼之筐出未来" width="400px">
</body>
</html>

4、height：规定图像的高度

<!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="p2831307612.jpg" alt="喜羊羊与灰太狼之筐出未来" width="400px" height="500px">
</body>
</html>

5、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="p2831307612.jpg" alt="喜羊羊与灰太狼之筐出未来" width="400px" height="500px" title="大电影海报">
</body>
</html>