Web 前端学习 之img标签详解
程序员文章站
2024-02-29 21:48:04
...
Web 前端学习 img标签详解
img标签是用来显示图片的,下面我将根据一个小案例来介绍他
需求: 使用img标签显示一张美女的图片,并修改宽高,以及边框属性
路径问题 src
很显然 单凭一个img我们不可能显示出想要的图片,必须要结合相应的属性,其中最终要的就是路径了,它代表着我们想要显示的图片所在的位置
相应的,大家应该都知道,路径分为相对路径和绝对路径
而在html的语法中,这两种路径的用法与编程中有着一点点的区别
-
相对路径
-
.代表文件所在的目录 -
..代表上级目录 -
直接输入文件名就代表当前目录,相当于
./文件名 - 可以看出相对路径还是跟编程类似的
-
-
绝对路径
- 不太一样的是,它
不能使用盘符/目录/文件名这样的形式 - 正确格式:
http://ip:port/工程名/资源路径
- 不太一样的是,它
说了这么多,下面就看看最简单的效果吧
首先给出图片和当前html文件的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签详解</title>
</head>
<body>
<img src="../img/1.jpg">
</body>
</html>
可以看到如果光光这么写的话,显然出现了图片显示的问题
宽高属性 weight height
为了解决这个问题,我们可以使用 img标签的宽高属性, 很显然,这是用来改变图片的大小的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签详解</title>
</head>
<body>
<img src="../img/1.jpg" width="300" height="500">
</body>
</html>
只要微微加两个参数,热巴的图片就展示出来了
边框属性 border
接下来看看外面的要求,还需要修改边框属性,只需要加个border属性就好了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签详解</title>
</head>
<body>
<img src="../img/1.jpg" width="300" height="500">
<img src="../img/2.jpg" width="300" height="500" border="20">
<img src="../img/3.jpg" width="300" height="500">
</body>
</html>
这里为了效果的展示,我把它设置的比较粗
alt属性
最后我介绍一下alt属性,它代表的是如果没有找到对应的图片给出的提示
比如我故意设置错一个路径,我们看看效果
<img src="../img/300.jpg" width="300" height="500" alt="图片不存在,出错了">