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

Question

我想将css和javascript文件链接到我的asp.net表单。 我看到了不同的方法。但不知道差异。

1. 使用/

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

2. 使用~/

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

3. 没有任何内容

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

4. 使用../

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

正确的方式是什么，有什么区别？请解释何时使用什么？

Answer 1

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

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

Answer 2

1. 使用/

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

   这一直到根目录。如果包含该行的文件为example.com/folder/anotherFolder/index.html，则该行代码将访问example.com/Content/animate.css。它刚刚开始。

2. 使用~/

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

   这几乎与第一个示例相似，但是会缩短一个文件夹。如果包含该行的文件为example.com/folder/anotherFolder/index.html，则该行代码将访问example.com/folder/Content/animate.css。

3. 没有任何内容

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

   我认为在大多数情况下，你会想要这个。它访问相对于当前文件的文件。如果包含该行的文件为example.com/folder/anotherFolder/index.html，则该行代码将访问example.com/folder/anotherFolder/Content/animate.css。

4. 使用../

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

   这个只退出一个文件夹/级别。如果包含该行的文件为example.com/folder/anotherFolder/index.html，则该行代码将访问example.com/folder/Content/animate.css。

Answer 3

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

1. 这表示网站的根目录。所以它将成为：http://example.com/Content/animate.css

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

2. '〜'表示应用程序的根目录。所以它会变成：http://example.com/app1/Content/animate.css

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

3. 这是一个实际路径，因此根据文件的位置，它只会在同一个文件夹中查找Content文件夹，然后查找animate.css文件。如果将文件移动到另一个文件夹，它仍然会在该新位置查找Content文件夹，然后查找animate.css文件。

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

4. 这就是说一个目录（从文件所在的任何地方编写代码），然后找到Content文件夹，然后找到animate.css文件。

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

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

最后一点，

1. 在html文件中写下所有不同的内容。
2. 打开Chrome调试程序（或任何浏览器调试程序），然后选择“网络”标签。
3. 从浏览器访问html页面
4. 了解浏览器如何解释每条路径。您将看到浏览器使用完整的URL向每个浏览器发出请求。

您可以随时使用该技术查看任何路径以查看解析的内容。

Answer 4

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

当css文件位于Content

之前的文件夹内时使用此选项