嗨(英语不是我的第一语言，所以请原谅我的任何错误(，
我需要一些代码方面的帮助。我正在为一个学校项目开发网站。我需要用HTML/css/php/JavaScript做一个专业的网站。我的主题是电子游戏CS：GO。该网站的主要目的是提供有关如何玩苏尔坦地图/wapens等的信息。我不会说我擅长 HTML，但我知道如何在 css 中做导航菜单和视频/定位等事情。
我目前有一个索引文件和大约 30 个单独的文件包含有关游戏的信息。我知道我可以为此使用数据库，但这不是此作业的目的。除了信息/一些图像之外，几乎每个文件都完全相同。
我想知道是否有办法让一页计算我的页眉/导航菜单/页脚的代码，而另一页仅用于信息。 我可以像现在一样保留它，但是每次当我编辑有关文件名/位置的内容时，我都必须打开每个文件。 举个例子： 当我在导航菜单中链接了一个文件并且我更改了一个文件的名称时，假设它被称为 map1.html我将其更改为 map_1.html 。我必须打开并手动更改每个文件。
当我做自己的研究时，我发现了 iframe 属性。但我无法让它成功工作。那么我还能用到什么吗？也许是JavaScript或php的东西？我也没有JavaScript或php的经验，所以如果你发布一些代码，请解释一下它是如何工作的，以及我如何使用它。
在我的脑海中，我有这个代码：.我知道这行不通，但它可以更好地了解我为什么尝试这样做。在导航菜单中.html只有导航菜单和 css 的代码，没有 els。我搜索这样的东西。该行的目的是复制导航菜单.html文件中的所有内容并显示它。
页面示例。我想在单独的文件中包含诸如，页眉，页脚之类的内容。只是为了澄清，如果每个文件的背景不同，则 body 类
<html>
<head>
<!--Titel/Icon/CSS files-->
</head>
<header>
<!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
<!--Other pages (history-about us-home(index.html) -->
<li><a>Game Modes</a>
<ul>
<!--The different gamemodes-->
</ul>
</li>
<li><a>Maps</a>
<ul>
<!--The different maps-->
</ul>
</li>
<li><a>Wapens</a>
<ul>
<!--The different guns-->
</ul>
</li>
<li><a>Equipment</a>
<ul>
<!--The different Equipment-->
</ul>
</li>
</ul>
<center>
<!--An images-->
<p class="tekst">
<!--Information about the game-->
</p>
</center>
</body>
<footer class="footer" id="footer-aug">
<!--footer-->
</footer>
</html>
您可以在不同的文件中创建内容，而不是创建header文件和footer文件。首先创建文件，例如index.html.请注意，我添加了一个 idul_gamemodes和另一个ul_maps。
在 javascript 中，函数readFile(file, parent)接受 2 个参数：您拥有内容的文件(URL(和您想要放置文件中内容的父div。
<html>
<head>
<!--Titel/Icon/CSS files-->
</head>
<header>
<!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
<!--Other pages (history-about us-home(index.html) -->
<li><a>Game Modes</a>
<ul id="ul_gamemodes">
<!--The different gamemodes-->
</ul>
</li>
<li><a>Maps</a>
<ul id="ul_maps">
<!--The different maps-->
</ul>
</li>
<li><a>Wapens</a>
<ul>
<!--The different guns-->
</ul>
</li>
<li><a>Equipment</a>
<ul>
<!--The different Equipment-->
</ul>
</li>
</ul>
<center>
<!--An images-->
<p class="tekst">
<!--Information about the game-->
</p>
</center>
<footer class="footer" id="footer-aug">
<!--footer-->
</footer>
<script>
function readFile(file, parent){
var myContent = new XMLHttpRequest();
myContent.open("GET", file, false);
myContent.onreadystatechange = function ()
{
if(myContent.readyState === 4)
{
if(myContent.status === 200 || myContent.status == 0)
{
var myText = myContent.responseText;
console.log(myText);
parent.innerHTML = myText
}
}
}
myContent.send(null);
}
readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);
</script>
</body>
</html>
接下来，创建一个名为gamemodes.txt的文件，将要放入#ul_gamemodes的内容放在其中，maps.txt另一个文件，将要放入ul_maps的内容放在其中。请注意，在您读取这些文件index.html：
readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);
现在，当您打开index.html时，您可以看到这两个文件中的内容。
由于这在SO中不起作用，因此您可以打开此Codepen项目
其他答案过于复杂。
如果您有可用的 PHP 但不能使用数据库，那么您可以使用页眉、页脚和内容来做您想做的事情，只需根据需要在正确的位置include()-ing。我在工作中相当多的"静态"页面(好吧，老实说，所有这些页面(看起来像
<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/left_side.php"); ?>
<div id="main_content" class="main_content">
Regular HTML stuff goes here!
</div> <!-- end main_content -->
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/right_side.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/footer.php"); ?>
如果你只能使用纯HTML，CSS和JavaScript，你可以使用<iframe>或者使用JavaScript和http请求做一些技巧，将内容从外部文件/URL加载到<div>标签中。
iframe - https://www.w3schools.com/tags/tag_iframe.asp
通过JavaScript包含 - https://www.w3schools.com/howto/howto_html_include.asp
至于链接和导航，您始终可以在URL上使用锚标记或GET参数，以使其所有"单个文件"远离索引.php或索引.html或者如果所有其他方法都失败，只需构建一个菜单文件，以将普通的旧href链接引入您的内容文件，并应用页眉/页脚。
为什么不创建一个PHP文件，在其中编写变量，例如：
$SESSION['example'] = echo "SOMETHING... SOMETHING... SOMETHING..."
并在每个文件中调用它们？
例如：
您想创建一个带有 CS：GO 徽标的div，然后编写并风格化它的外观，然后将其输入到echo语句中。
喜欢这个：
echo "<div class='example'>LOGO OF CS:GO</div>";
请记住将其插入<?php ?>标签和 ofc 以启动会话:)