HTML 路径

引入

HTML 路径用于告诉浏览器去哪里找到资源，例如图片、网页、CSS 文件、JavaScript 文件等。

如果路径写错，页面可能就会出现图片加载失败、链接打不开、样式不生效等问题。

正文

定义

定义

HTML 路径是资源在项目中或网络中的位置写法，常用于 href、src 等属性中。

常见使用位置：

• <a> 的 href，用于将文本附上链接
• <img> 的 src，用于指定图像的来源
• <link> 的 href，用于引入 CSS 文件
• <script> 的 src，用于引入 JavaScript 文件

语法

<a href="路径">链接文字</a>
<img src="路径" alt="图片描述">

路径可以是本地文件路径，也可以是网络地址。

绝对路径

绝对路径是从完整地址开始写的路径。

<a href="https://example.com/about.html">关于页面</a>

这种路径包含协议、域名和具体资源位置。

常见形式：

• https://example.com/image.jpg
• https://example.com/css/style.css
• https://example.com/pages/about.html

绝对路径适合引用外部网站资源，或者写完整线上地址。

相对路径

相对路径是以当前 HTML 文件所在位置为参考点来找资源。

<img src="images/logo.png" alt="网站 Logo">

这表示浏览器会从当前 HTML 文件所在目录开始，进入 images 文件夹，再找到 logo.png。

相对路径更常用于项目内部文件引用。

同级目录

如果目标文件和当前 HTML 文件在同一个文件夹中，可以直接写文件名。

<a href="about.html">关于我</a>

例如目录结构：

project/
  index.html
  about.html

在 index.html 中访问 about.html，就可以直接写：

<a href="about.html">关于我</a>

下级目录

如果目标文件在当前目录的子文件夹里，需要先写文件夹名。

<img src="images/photo.jpg" alt="照片">

例如目录结构：

project/
  index.html
  images/
    photo.jpg

在 index.html 中引用 photo.jpg，路径就是：

<img src="images/photo.jpg" alt="照片">

上级目录

../ 表示返回上一级目录。

<a href="../index.html">返回首页</a>

例如目录结构：

project/
  index.html
  pages/
    about.html

在 about.html 中访问上一级的 index.html，路径就是：

<a href="../index.html">返回首页</a>

如果要返回两级目录，可以写两个 ../。

<img src="../../images/logo.png" alt="Logo">

根路径

以 / 开头的路径通常表示从网站根目录开始查找。

<img src="/images/logo.png" alt="Logo">

它不是从当前 HTML 文件位置开始，而是从网站根目录开始。

根路径在真实网站或服务器环境中比较常见，本地直接打开 HTML 文件时可能不一定符合预期。

当前目录

./ 表示当前目录。

<img src="./images/logo.png" alt="Logo">

很多时候 ./images/logo.png 和 images/logo.png 效果相同。

写 ./ 的好处是更明确地表示“从当前目录开始”。

图片路径例子

引入本地图片

<img src="images/cat.jpg" alt="一只猫">

src 用于指定图像的来源，alt 用于提供图像的替代描述文本。

如果 src 路径写错，图片就无法正常显示。

链接路径例子

跳转到另一个页面

<a href="pages/contact.html">联系我们</a>

这里的 href 用于将文本附上链接，点击后跳转到 pages/contact.html。

引入 CSS 文件

CSS 文件一般通过 <link> 标签引入。

<link rel="stylesheet" href="css/style.css">

这里的 href 表示 CSS 文件的位置。

引入 JavaScript 文件

JavaScript 文件一般通过 <script> 标签引入。

<script src="js/main.js"></script>

这里的 src 表示 JavaScript 文件的位置。

特点

• 路径用于告诉浏览器资源在哪里
• href 常用于链接和 CSS 文件路径
• src 常用于图片、脚本等资源路径
• 绝对路径从完整网址开始写
• 相对路径以当前文件位置为参考
• ./ 表示当前目录
• ../ 表示上一级目录
• / 通常表示网站根目录

注意事项

• 路径区分当前文件所在位置，不是只看项目根目录
• 文件名、文件夹名要写对，大小写也要注意
• 中文路径和空格路径有时容易出问题，项目中更建议使用英文命名
• 图片不显示时，优先检查 src 路径是否正确
• 链接打不开时，优先检查 href 路径是否正确
• 本地文件路径和服务器路径可能表现不同，特别是以 / 开头的根路径
• 不要使用自己电脑上的绝对磁盘路径作为网页资源路径，例如 C:\Users\…

理解

可以把 HTML 路径理解为“给浏览器指路”。

浏览器不会自动猜资源在哪里，它只能按照 href、src 中写的路径去找。

路径写对了，资源才能加载；路径写错了，标签本身可能没问题，但资源还是找不到。

引出

理解路径之后，可以继续学习 HTML 链接、HTML 图片，因为它们都依赖 href 和 src 来找到目标资源。