HTML中路径符号.和/详解

在HTML中，. 和**/** 是两个非常重要的路径相关符号，它们通常用于引用文件、链接资源等场景。

1. 斜杠 /

绝对路径（以 / 开头）

html

<!-- 从网站根目录开始 -->
<img src="/images/logo.png">
<link href="/css/style.css">

• 在路径中间：只是分隔符号，告诉你 "进入下一级文件夹"。
• 在路径开头：代表网站根目录，是绝对路径的起点。

它永远不代表 "当前文件夹" ，只有 . 才是 "当前文件夹" 的意思。

示例：如果网站域名为 https://example.com

• /images/logo.png → https://example.com/images/logo.png

在URL中分隔路径

html

<a href="/blog/post-1.html">博客文章</a>
<!-- 等同于：https://example.com/blog/post-1.html -->

2. 点号 .

相对路径中的当前目录

html

<!-- 引用当前目录下的文件 -->
<img src="./photo.jpg">
<a href="./page.html">当前页面</a>

<!-- 如果不加 . 也可以，但加上更明确 -->
<img src="photo.jpg">  <!-- 与上面等价 -->

3. 组合使用：./ 和 ../

./ - 当前目录

html

<!-- 都指向当前目录的 images 文件夹 -->
<img src="./images/banner.jpg">
<img src="images/banner.jpg">  <!-- 简化写法 -->

../ - 上级目录

html

<!-- 返回上一级目录 -->
<img src="../logo.png">
<link href="../css/main.css">

<!-- 可以连续使用返回多级 -->
<img src="../../assets/image.png">  <!-- 上两级 -->

4. 最佳实践建议

1. 优先使用相对路径（更适合本地开发和文件移动）

   html
   
   <!-- 推荐 -->
   <img src="images/photo.jpg">
   
   <!-- 不推荐（除非特定需要） -->
   <img src="/images/photo.jpg">

2. 保持一致性：整个项目中使用相同的路径风格

3. 明确写法 ：使用 ./ 开头让路径意图更清晰

   html
   
   <!-- 更明确 -->
   <a href="./contact.html">联系我们</a>
   
   <!-- 也可以，但可能不够清晰 -->
   <a href="contact.html">联系我们</a>

6. 其他用途

在CSS中的使用

css

/* 背景图片路径 */
background-image: url('../images/bg.jpg');

/* 字体文件路径 */
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2');
}

在JavaScript中的使用

javascript

// 模块导入
import { myFunction } from './utils/helpers.js';
import config from '../config.js';

总结对比

符号	含义	示例
/	根目录开始	/images/logo.png
./	当前目录开始	./css/style.css
../	上级目录开始	../scripts/app.js
无前缀	默认当前目录	image.jpg（同./image.jpg）

记住这个简单的规则：

• . = "这里"（当前目录）

• .. = "上面"（上级目录）

• / = "最上面"（根目录）

• 最后

  记得分清两种路径类型

• 相对路径 ：以当前文件所在的文件夹为起点，去找其他文件，比如 ./images/logo.png、../css/style.css。

  • 这里的 . 就是用来表示 "当前文件夹" 的，所以必须写。

• 绝对路径 ：直接从磁盘根目录（如 E:/）或网站根目录（如 /images/logo.png）开始，完整写出文件的位置。

  • 它不需要依赖 "当前文件夹"，所以完全用不到 .