如果标题是 html，网站如何在每个页面上保留标题？答案

【问题标题】：How do websites keep the header on every page if the header is in html?如果标题是 html，网站如何在每个页面上保留标题？
【发布时间】：2017-06-18 03:27:48
【问题描述】：

所以，我正在尝试制作一个网站，但问题是我找不到最有效的方法来在每个页面上保留页眉。我的标题是 HTML 代码，它是网站上最重要的导航来源。选项卡使用指向其他 HTML 文件（都位于我的计算机本地）的链接进行导航，因此每个新页面都是另一个单独的 HTML 文件。以下是我使用的许多不同方法，它们都以某种方式失败：

最基本的方法：将标头代码复制到网站上的每个 HTML 页面。
我目前正在使用这种方法，它可能是有史以来最无效和最愚蠢的方法。缺点（很明显）不仅很乏味，而且每次我对标题进行更改（比如可能添加不同的菜单、添加另一个选项卡、更改图像等）时，我都必须复制新的标题其他一切的代码。太可笑了！！
我尝试使用 w3schools 方法在页面 HTML 文件上实现一个单独的 HTML 文件（只有 HTML 代码）。所以，我有这个 1 HTML 文件作为每个页面使用的标题，所以我在那个文件中进行了更改，它会自动应用于其他所有内容。但是，它并没有让我有效地组织大量的 HTML 文件，因为与引用样式表（如某些名为“style.css”的文件）不同，它不允许我将 HTML 表放在不共享同一个父文件夹的文件夹中文件夹作为引用的 HTML 页面文件。希望这是有道理的，但基本上，如果 w3school 代码失败，我无法获得一个将 HTML 菜单选项卡文件（“页面”）和 HTML 内容文件（“帖子”）分开的文件夹。这是链接：https://www.w3schools.com/howto/howto_html_include.asp
我在 Stackoverflow 上看到过其他选项，例如通过在 document.write() 中使用带有 html 代码的 js 文件来绕过“无法实现 HTML 文件”，但这对我来说很难使用，因为到目前为止我的所有进展。此外，我对使用 document.write 的想法感到非常不舒服，因为它可能仍然与真正的 html 文件有很大不同。说真的，为什么没有样式表和脚本所具有的 HTML 实现系统？？？ (script src="b.js" 脚本和链接 rel="stylesheet" href="css/style.css" type="text/css")
使用 jQuery。我最不了解这一点（作为一名业余程序员），但我听说它也不一致。它似乎不适用于本地文件，这听起来像是一场噩梦。虽然，如果有好的建议，带有 jquery 文件标签似乎不是最好的解决方案，但仍然是一个合理的解决方案。

所以，我遇到了很大的麻烦。其他网站如何做到这一点？他们使用不同的文件吗？？？他们使用PHP文件吗？因为 PHP 是另一种语言，我是否将不得不放弃我所有的硬标题 HTML 工作和样式？我必须使用 Angular.js 吗？？？这太复杂了！

希望这个问题有点道理。请询问您是否有问题。提前致谢。

更新在检查了 Stackoverflow 上许多其他建议 PHP 的帖子后，我得到了我的 HTML 文件，然后将其从“index.html”重命名为“index.php”，神圣的宏实际上仍然表现得像一个 HTML 文件，即使它不是！！现在我需要想办法把：

    include("header.php");

进入我的页面 PHP 文件 实际上 在 HTML 代码中引用具有我的标题的单独 PHP 文件。我怎么做？它是否属于类似脚本标签之类的东西？ 如何在用 HTML 代码编写的 PHP 文件中添加 PHP 代码？ 感谢您对我上一个问题的回答，很抱歉我应该先更彻底地阅读 Stackoverflow 上的答案。

【问题讨论】：

不，您不必放弃您的工作。你只需要修改它。您需要创建某种模具。 html是蛋糕。您可以手工塑造完美的形状以满足您的需求，但是为 100 页或蛋糕这样做非常耗时。用模具烘烤要容易得多。查看 PHP 模板或任何其他 web template engine。例如，PHP 模板用于构建基于类似模板的动态内容。标头将从 header.php 模板构建，最终结果是纯 'html'

标签： html css header web

【解决方案1】：

所以我知道我问这个问题已经有一段时间了，可能没有人再关心了，但我只想在找到关于使用 php 代码及其工作原理的问题的解决方案后发布更新。

首先，我了解到，为了让它工作，我的所有文件都必须是 php 格式。所以我拉出我的本地 HTML 文件文件夹，并从字面上将它重命名为像“index.html”到“index.php”。然后，在不更改 HTML 代码的情况下，我在浏览器中打开它，就像什么都没发生一样，除了更好！现在它不仅可以读取 HTML 和样式和脚本代码，还可以读取 php 代码！我补充说：

<?php
    include("header.php");
?>

例如，到我的 index.php 文件的顶部，然后将其余文件转换为 php 格式，就像我为此所做的那样。我复制了我的标头 html 和 css 代码并将其保存在同一文件夹中的单独 php 文件中，并且 - 没有标头。我很困惑。什么？？为什么它什么都不做？ header.php 本身在工作，为什么 include 函数不行？？

然后，我了解到这个 php 包含代码不能在我的本地驱动器上执行，所以它不能在我的本地驱动器上运行，但在它是公共的和真正的网站托管服务时可以运行强>。然后我安装了 XAMPP，这是一个常用的 PHP 开发环境，它是一个 Apache 发行版，完全免费。它运行一种本地托管服务，将支持此 php 代码并使其按照我的预期方式执行。 对不起，我不擅长解释它是如何工作的，因为我只是找到它并使用它。无论如何，XAMPP 确实使上面包含的 php 代码真正发挥了作用，我终于得到了我一直想要的标头系统。从此幸福快乐，对吧？

不。现在基本的东西已经消失了，我不得不面对其他问题，比如格式化（考虑到我必须如何在大量重叠代码中找到 css 问题，a** 真的很痛苦），创建一个完整的个人搜索系统（必须弄清楚如何使一个 php 文件实际使用我全新的 MySQL 数据库，它也由 XAMPP 运行），以及许多其他的东西。但是，这听起来像是一次我愿意并且绝对渴望经历的伟大冒险。现在，我终于完成了一天的喋喋不休......我不知道我浪费了多少其他人的时间。

哦，是的..我忘了提，七月四日快乐！（祝心爱的美国队长生日快乐）

【讨论】：

【解决方案2】：

使用 JavaScript 和 jQuery 是实现此目的的一种非常简单的方法。首先，只需构建一个示例 JavaScript 文件。在内部，制作在页面加载时运行的函数。例如，

function buildPage() {
    var html = ' ';
    //Build the html through the function
    //In the end...
    $('html-id').empty().append(html);
}

这样每次构建 html 时，您只需清空（清除 id 'html-id' 中的任何内容），然后添加您的特定 html。例如，

<html>
    <head>Put header here!</head>
    <body>
        <div>Put tabs with onclick events here</div>
        <div id="html-id"></div>
    </body>
</html>

每次单击不同的选项卡时，都应调用 buildPage() 函数以相应地构建页面。不需要多个 html 标头！

【讨论】：

客户端 JavaScript 不适合这个。
@Ryan 你能解释一下原因吗？

【解决方案3】：

这样写吧

<html>
<head>
<title>First page</title>
</head>
<body>
<?php include ("header.php"); ?>
<!-- rest of your code -->



?php include ("footer.php"); ?>
</body>
</html>

推荐采用这种方式。 Wordpress 也是这样工作的。将文件包含到主 php 文件中。

**注意你所有的文件都必须是 .php

【讨论】：

这正是我所做的。什么都没有出现！没有错误信息，什么都没有。上面有像你这样的代码的文件是 php.ini。引用的头文件是 php.ini。一切都是php。位置是正确的。 header.php 文件正在工作。 index.php 不是。这超出了我的理解。
@GraceSawyer 发布您的代码。你的网络服务器工作正常吗？

【解决方案4】：

也许这会有所帮助： Include another HTML file in a HTML file

您可以制作一个 header.html 并将其包含在您网站的所有其他 html 文件中。

【讨论】：