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。
  • 这里的.就是用来表示 “当前文件夹” 的，所以必须写。
• 绝对路径：直接从磁盘根目录（如E:/）或网站根目录（如/images/logo.png）开始，完整写出文件的位置。
  • 它不需要依赖 “当前文件夹”，所以完全用不到.