【小白专用】HTML相对路径表示方法
在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代码更加灵活和便于维护。
评论已关闭