HTML（三）——在网页中使用图像img

最新推荐文章于 2024-03-07 13:52:19 发布

原创最新推荐文章于 2024-03-07 13:52:19 发布 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#img属性

● Web前端基础篇专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍如何在HTML中使用<img>标签展示图片，包括相对路径、绝对路径及本地硬盘图片的引用方式，设置图片尺寸，使用alt和title属性增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.初识网页图片

首先新建一个index.html网页，同时把一张后缀名为.jpg的图片也放在这个文件夹中；

然后用<img/>标签实现网页图片：<img src="图片路径"/>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg"/>
</body>
</html>

注：这里用的是相对路径；

运行结果：

2.相对路径和绝对路径

如果图片文件在父一级的文件夹里，该如何使用呢?

比如在index1文件中我想引用父一级的yan.jpg图片，则可以用"../"来表示；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg">
<img src="../yan.jpg"><!-- 父一级的图片文件引用需要用"../"才可以 -->
</body>
</html>

运行结果：

绝对路径：

我们在网上找一张图片，复制图片地址；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg">
<img src="../yan.jpg"><!-- 父一级的图片文件引用需要用"../"才可以 -->
<img src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg"/><!-- 直接引用图片的绝对地址 -->
</body>
</html>

运行结果：

本地硬盘图片：

在src中加上图片路径即可

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img src="1.jpg">
<img src="../yan.jpg"><!-- 父一级的图片文件引用需要用"../"才可以 -->
<img src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg"/><!-- 直接引用图片的绝对地址 -->
<img src="D://fengjing.jpg"><!-- 引用本地硬盘的图片，加上文件路径即可 -->
</body>
</html>

运行结果：

3.设置图片的尺寸

在img中我们可以添加height和weight属性，来设置图片的大小；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 直接引用图片的绝对地址 -->
<img weight=300 height=300 src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg"/>
</body>
</html>

运行结果：

可以发现小了很多

4.用alt属性为图像设置被替换文本

当我们图片刷不出来的时候，可以用alt属性来暂时告诉用户这个图片的内容；

比如我们加一个不存在的图片，那么网页刷出来肯定是这样子的：

此时我们在img属性中添加alt属性:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="这是风景照" src="1.jpg">
</body>
</html>

运行结果：

可以起到提示作用!

5.用title属性为图片设置标题

当我们用鼠标触碰到图片时，网页会给我们提示这是什么，这个是怎么实现的呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<img alt="这是风景照" title="美丽的风景" src="1.jpg">
</body>
</html>

用title属性就可以实现；

运行效果：