如何在 HTML 页内创建全局脚本，这样我就不需要经常更改位置？

Question

我最近拍了初学者 HTML 和 CSS class，我非常喜欢它。 CSS 是如此强大的语言，HTML 也很棒。

但是，我注意到我的老师 class 告诉我的一件事是，如何创建全局脚本来处理每个单独的页面？这样我就不会经常更改我的 CSS 样式表和其他类似内容的文件路径。例如，当我继续为新位置创建新文件夹时，找不到我的 CSS 样式表，因此使页面看起来不错 HTML.

我要记住的主要是顶部的导航栏、底部的页脚和 CSS 样式表。

如果有人能帮助我，我将不胜感激。请记住，我在这方面还未成年。我确实知道很多 CSS 和 HTML，以及次要的 javascript（如果有帮助，还有 python）

Answer 1

您的老师所指的 'Global Scripts' 是单独的外部文件。这是一个很好的做法，因为内联代码会使页面的大小膨胀，而外部文件可以缓存以备后用，而不必再次重新下载。从可维护性的角度来看，这也是一种很好的做法，因为您只需编辑外部 CSS 文件即可更改网站的外观。

创建外部 CSS 文件的最简单方法是：

例如，您的 HTML 页面应如下所示：

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
</body>
</html>

将所有 CSS 代码放入该 style.css 文件中，所有 HTML 页面都将应用 CSS 属性。确保您提供 CSS 文件 (style.css) 的正确路径，无论它位于您的设置中的什么位置。你在编程中做出了一个伟大的人生选择。祝你好运，你就是未来！

Answer 2

链接 CSS 和 javascript 时需要坚持使用绝对路径。很可能您在链接其他脚本时使用了相对路径。

绝对路径

<link rel="stylesheet" type="text/css" href="/CSS/main.css">
                                             ^

注意路径开头的斜线。绝对路径将从您的网站目录的根目录中查找文件。

相对路径

<link rel="stylesheet" type="text/css" href="CSS/main.css">
                                            ^

注意相对路径中没有斜杠。这意味着它将在与当前加载的网页相同的目录中查找名为 CSS 的文件夹，其中包含 main.css。

如果您正在寻找更便携的解决方案，我建议您查看 PHP。使用 PHP 的相对路径的基本起点如下所示。

$root = realpath($_SERVER["DOCUMENT_ROOT"]);

How would I create global scripts within HTML Pages so I don't need to constantly change the location?