【尚硅谷 Java Web 笔记】img标签_web项目中显示其他网站图片-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54110690/article/details/122678864

本文介绍了HTML中的img标签，用于在网页中展示图片。详细讲解了src、width、height、border和alt属性的用途。同时，探讨了在Web中路径的概念，包括相对路径和绝对路径的使用方法，举例说明了如何根据当前文件位置确定图片的正确路径。

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

img 标签是图片标签，可以在html页面上显示图片。

src 属性可以设置图片的路径

width 属性设置图片的宽度

height 属性设置图片的高度

border 属性设置图片边框大小

alt 属性设置当指定路径找不到图片时，用来替代的文本内容

【在Web中，路径分为相对路径和绝对路径。

相对路径：

.	表示当前文件所在的目录
..	表示当前文件所在的上一级目录
文件名	表示当前文件所在目录的文件，相当于【./文件名】（./可省略）

绝对路径：http://ip:port/工程名/资源路径

】

例如：

当前我的位置处于“img标签.html”这个文件，要想得到图片“1.jpg”的相对路径，就要通过“..”返回到“JavaWeb-projects”这一级目录，再找到其下"img"文件夹中的“1.jpg”。

即：对于图片“1.jpg”，src="../img/1.jpg"。

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>

<body>
<!--
 img标签是图片标签，用来显示图片
    src属性可以设置图片的路径
    width属性设置图片的宽度
    height属性设置图片的高度
    border属性设置图片边框大小
    alt属性设置当指定路径找不到图片时，用来替代的文本内容

 在Web中路径分为相对路径和绝对路径
    相对路径：
        .       表示当前文件所在的目录
        ..      表示当前文件所在的上一级目录
        文件名   表示当前文件所在目录的文件，相当于 ./文件名（./可省略）
    绝对路径：
        http://ip:port/工程名/资源路径
-->
<img src="../img/1.jpg" width="500" height="500" border="5"/>
</body>

</html>

运行结果：