Day4_HTML+CSS+JS——img标签和相对路径

最新推荐文章于 2022-09-19 21:48:07 发布

Android_la

最新推荐文章于 2022-09-19 21:48:07 发布

阅读量361

点赞数

分类专栏： HTML+CSS+JS 文章标签： HTML+CSS+JS

本文链接：https://blog.csdn.net/qq_40634846/article/details/99074683

版权

HTML+CSS+JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一. 储备知识

img标签有src属性、alt属性、title属性

src属性：要引入图片的路径

路径可以分为相对路径和绝对路径，绝对路径很容易理解，即完整的路径。
相对路径：以当前的资源作为参考去查找其他的和当前资源有相对关系的资源

如果要引入的资源和当前页面在同一目录，可以直接通过资源名引入。
如果要引入的资源在当前页面的下一级目录，可以通过和当前页面在同一级的文件夹名引用文件夹名，然后再查找文件下的资源
如果要引入的资源在当前页面的上一级，可以通过 …/返回上一级目录，然后查找和上级目录在同一级目录下的资源，…/…/代表返回上两级的目录

alt属性：alter，图片加载失败显示的文本内容

title属性：鼠标在图片上悬停时显示的标题

二. 例子

本例子采用SpringToolSuite4.exe 软件实现，大家可以自行到官网免费下载使用。其实是eclipse的一个特别版本。

new一个static web project ，如图所示，命名为WEB_HTMLCSS，如下图：
在这里插入图片描述
下面是本项目的目录结构：

注意: 当前页面是hello.html，自己随意找来图片分别放到如上图的目录位置，下面为代码

hello.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
      <table border="1">
           <tr>
               <td><img src="img/girl01.jpg" width="280px" alt="读书时的女神" title="读书时的女神"></td>
               <td><img src="girl02.jpg" width="280px" alt="读书时的女神" title="读书时的女神"></td>
               <td><img src="../girl03.jpg" width="280px" alt="读书时的女神" title="读书时的女神"></td>
           </tr>
           <tr>
               <td align="center"><h5>girl01.jpg,这是同级目录文件夹下的文件</h5></td>
               <td align="center"><h5>girl02.jpg，这是同级目录下的文件</h5></td>
               <td align="center"><h5>girl03.jpg，这是上一级目录下的文件</h5></td>
           </tr>
      </table>
</body>
</html>