将 CSS/Javascript 链接到网页的正确方法是什么？答案

【问题标题】：What is the correct way to link the CSS/Javascript to webpage?将 CSS/Javascript 链接到网页的正确方法是什么？
【发布时间】：2026-01-26 13:05:03
【问题描述】：

我想将 css 和 javascript 文件链接到我的 asp.net 表单。我看到了不同的方法来做到这一点。但不知道区别。

与/

<link type="text/css" rel="stylesheet" href="/Content/animate.css">

与~/

<link type="text/css" rel="stylesheet" href="~/Content/animate.css">

一无所有

<link type="text/css" rel="stylesheet" href="Content/animate.css">

与../

<link type="text/css" rel="stylesheet" href="../Content/animate.css">

什么是正确的方法，有什么区别？还请说明什么时候使用什么？

【问题讨论】：

【解决方案1】：

正确的方法是“2”，因为你从项目的根目录开始寻址

<link type="text/css" rel="stylesheet" href="~/Content/animate.css">

【讨论】：

【解决方案2】：

与/
这一直到根目录。如果该行的文件是example.com/folder/anotherFolder/index.html，那么该行代码将访问example.com/Content/animate.css。它才刚刚开始。
与~/
```
<link type="text/css" rel="stylesheet" href="~/Content/animate.css">
```
这几乎像第一个示例一样进入根目录，但会停止一个文件夹。如果该行的文件是example.com/folder/anotherFolder/index.html，那么该行代码将访问example.com/folder/Content/animate.css。
一无所有
```
<link type="text/css" rel="stylesheet" href="Content/animate.css">
```
我认为在大多数情况下，您会想要这个。它访问相对于当前文件的文件。如果该行的文件是example.com/folder/anotherFolder/index.html，那么该行代码将访问example.com/folder/anotherFolder/Content/animate.css。
与../
```
<link type="text/css" rel="stylesheet" href="../Content/animate.css">
```
这一项仅退出一个文件夹/级别。如果该行的文件是example.com/folder/anotherFolder/index.html，那么该行代码将访问example.com/folder/Content/animate.css。

【讨论】：

【解决方案3】：

不同之处在于，如果您的站点是http://example.com，并且您有一个应用程序http://exmaple.com/app1。

这意味着站点的根目录。所以会变成：http://example.com/Content/animate.css
```
<link type="text/css" rel="stylesheet" href="/Content/animate.css">
```
“~”表示应用程序的根目录。所以它会变成：http://example.com/app1/Content/animate.css
```
<link type="text/css" rel="stylesheet" href="~/Content/animate.css">
```
这是真实路径，因此根据文件的位置，它只会在同一文件夹中查找 Content 文件夹，然后查找 animate.css 文件。如果您将写入此文件的文件移动到另一个文件夹，它仍会在该新位置查找 Content 文件夹，然后查找 animate.css 文件。
```
<link type="text/css" rel="stylesheet" href="Content/animate.css">
```
这是说上一个目录（从编写这行代码的文件中），然后找到 Content 文件夹，然后找到 animate.css 文件。
```
<link type="text/css" rel="stylesheet" href="../Content/animate.css">
```

每一个都有它的位置和用途。现在您知道它们的含义，您可以选择使用哪个。

作为最后一点，

您可以随时对任何路径使用该技术，看看它会解决什么问题。

【讨论】：

【解决方案4】：

<link type="text/css" rel="stylesheet" href="../Content/animate.css">

当css文件在Content之前的文件夹中时使用这个

【讨论】：