【小白专用】HTML相对路径表示方法
warning:
这篇文章距离上次修改已过440天,其中的内容可能已经有所变动。
在HTML中,相对路径用于指定页面内资源(如图片、链接等)的位置,相对于当前页面的URL。相对路径可以使用两种格式:
- 以
./开头,表示当前目录,通常可以省略,例如./image.jpg可以简写为image.jpg。 - 以
../开头,表示上级目录,例如../images/photo.png。
下面是一个简单的HTML示例,展示了如何使用相对路径来链接和嵌入图片:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对路径示例</title>
</head>
<body>
<!-- 当前目录下的图片 -->
<img src="./logo.png" alt="网站Logo">
<!-- 上级目录下的图片 -->
<img src="../images/background.jpg" alt="背景图片">
<!-- 当前目录下的HTML文件 -->
<a href="./contact.html">联系我们</a>
<!-- 上级目录下的HTML文件 -->
<a href="../legal.html">法律声明</a>
</body>
</html>在这个示例中,logo.png和contact.html位于当前目录下,而background.jpg位于上级目录的images子目录中,legal.html则位于上级目录中。使用相对路径可以让你的HTML代码更加灵活和便于维护。
评论已关闭