将css文件链接到html时如何正确写出本地文件的绝对路径？答案

【问题标题】：How to write out the absolute path of a local file correctly when linking css file to html?将css文件链接到html时如何正确写出本地文件的绝对路径？
【发布时间】：2020-02-14 08:20:44
【问题描述】：

我完全是 html/css 的初学者。

我使用 PHP 在不同的网页中包含相同的 head 部分。头部有一个链接到外部 css 的 href 链接。用于设置多个网页布局样式的文件。

由于不同的网页位于根文件夹的不同子文件夹中，我必须使用绝对路径来链接css。文件，问题来了：我不知道如何正确编写它。

当我为每个单独的网页使用相对路径时，链接可以正常工作，但是当我尝试使用绝对路径时，它根本不起作用。

我试过了：

1.href="file:///C:\xampp\htdocs\root\styles\style.css"

2.href="file:///C:/xampp/htdocs/root/styles/style.css"

3.href="file://C:/xampp/htdocs/root/styles/style.css"

4.href="C:/xampp/htdocs/root/styles/style.css"

5.href="c:/xampp/htdocs/root/styles/style.css"

这是代码的开始部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <?php include('common/head.php') ?>
    <title>Home</title>
  </head>

这是头部：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="file:///C:\xampp\htdocs\root\styles\style.css">

【问题讨论】：

标签： html css href absolute-path local-files

【解决方案1】：

我忘了提到我使用 xampp 构建本地服务器来测试我的网站，我发现与其将链接指向我计算机上的文件夹路径，不如将其指向“http://localhost/root/.. ."，这就解决了这个问题。

【讨论】：

【解决方案2】：

我猜这是服务器端和客户端执行上下文之间流行的误解。

网络服务器为http://localhost/whatever/index.htm提供了一个html文档
您的浏览器会读取该文档以及它的 href 属性。它也尝试下载链接的文件。
- href="styles/style.css" 相对路径。浏览器将在http://localhost/whatever/styles/style.css 请求文件
- href="/styles/style.css" 一种绝对路径。浏览器将请求服务器根目录下的文件 url http://localhost/styles/style.css
- href="http://localhost/foobar/styles/style.css" 绝对路径。浏览器将尝试从那里准确下载。
- href="file:///C:\...." 系统上的本地路径。服务器与它无关。该页面只能在您自己的系统上运行，当其他人从其他计算机通过服务器访问它时，该页面无法运行。

您的浏览器应该带有一些开发工具。您可以使用该工具检查浏览器的请求以及服务器的响应。

答案是：在这里使用相对或绝对 URL。

【讨论】：

我忘了提到我使用 xampp 构建本地服务器来测试我的网站，我发现与其将链接指向我计算机上的文件夹路径，不如将其指向“ localhost/root..."，这就解决了问题。
当浏览器读取href="localhost/root..."时，它会尝试连接到本地主机。当服务器（xampp 的 apache）在您自己的系统上运行时，这很好。但是当你把这个东西放到网上时它可能不起作用！ href="/root..." 应该没问题:)

【解决方案3】：

使用 HTML 链接引用，当文件来自服务器时，您不能请求域根路径下的文件。

例如使用http://localhost/index.php，您将无法通过所服务的根路径获得任何东西。（从您的代码示例来看，在这种情况下为 C:\xampp\htdocs\root）

如果您以斜杠开始链接，这将为您提供一个绝对链接，并且始终从主机的根路径开始。这特别有用，因为您不需要知道您当前在网站的哪个位置。

<link href="/styles/style.css" />
<!-- this is seen as "{domain}/styles/style.css" -->

如果你想将relative链接到当前路径，你可以省略第一个斜杠，这将根据当前路径查找文件。

<link href="styles/style.css" />
<!-- this is seen as "./styles/style.css" -->

如果您需要引用图像等，在您的 CSS 文件中也是如此。

【讨论】：

【解决方案4】：

要获取部分路径，请使用正斜杠

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

注意/ 表示当前驱动器的根目录。

您还有./，表示当前目录。

而../ 表示当前目录的父级。

【讨论】：