切换至Infinity Free主机后网页HTML内容重复显示问题求助

切换到Infinity Free主机后，MathGenerator.html页面出现内容重复显示的异常，页面前半部分内容少于后半部分，暂不确定是否与主机设置相关。

问题代码（MathGenerator.html） #

<div id="TopBar" class="TopBar">
        <a href="index.html">Home</a>
        <a href="Calculators.html">Arcane Calculators</a>
        <a class="Active">Arcane Generators</a>
        <a href="About.html">About</a>
    </div>
    
    <br>
    
    <head>
        <link rel="stylesheet" href="main.css">
        <script src="mathgenerator.js"></script>
        <title>MathStuff - Arcane Generators</title>
        <header id="Title">Arcane Generators</header>
        <br>
    </head>
    
    <body class="Container">
        <div class="Box">
            <p1>Basic Math</p1>
            <hr>
            <p id="BMExplain">Hello, will make automated questions, you answer them, and it'll tell you if its right. For example, whats 2 + 2?</p>
            <p id="BMAnswer"> </p>
            <input type="number" placeholder="Answer here." id="BMInput">
            <br>
            <input type="button" value="Submit" onclick="BasicMath()" id="BMSubmit">
        </div>
    </body><div id="TopBar" class="TopBar">
        <a href="index.html">Home</a>
        <a href="Calculators.html">Arcane Calculators</a>
        <a class="Active">Arcane Generators</a>
        <a href="About.html">About</a>
    </div>
    
    <br>
    
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="mathgenerator.js"></script>
        <title>MathStuff - Arcane Generators</title>
        <header id="Title">Arcane Generators</header>
        <br>
    </head>
    
    <body class="Container">
        <div class="Box">
            <p1>Basic Math</p1>
            <hr>
            <p id="BMExplain">Hello, will make automated questions, you answer them, and it'll tell you if its right. For example, whats 2 + 2?</p>
            <p id="BMAnswer"> </p>
            <input type="number" placeholder="Answer here." id="BMInput">
            <br>
            <input type="button" value="Submit" onclick="BasicMath()" id="BMSubmit">
        </div>
    
        <div class="Box">
            <p1>Factorials(WIP)</p1>
            <hr>
            <p">placeholder</p>
            <p> </p>
            <input type="number" placeholder="placeholder">
            <br>
            <input type="button" value="Submit">
        </div>
    </body>

文件结构截图 #

（附文件结构截图）

问题原因及解决方案 #

1. 核心问题：代码中重复编写了两次完整的页面结构（包括TopBar、<head>、<body>标签），这是页面内容重复的直接原因，和主机设置无关。
2. 额外语法错误：
   • <head>标签被放在了<body>之后，标准HTML要求<head>必须在<body>之前，且一个页面只能有一个<head>和<body>。
   • 第二个<body>中的<p">placeholder</p>引号位置错误，应改为<p>placeholder</p>。
3. 修正后的代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css"> <!-- 若main.css为必需文件，可改为引用main.css或同时引入两个文件 -->
    <script src="mathgenerator.js"></script>
    <title>MathStuff - Arcane Generators</title>
</head>
<body class="Container">
    <div id="TopBar" class="TopBar">
        <a href="index.html">Home</a>
        <a href="Calculators.html">Arcane Calculators</a>
        <a class="Active">Arcane Generators</a>
        <a href="About.html">About</a>
    </div>
    
    <br>
    
    <header id="Title">Arcane Generators</header>
    <br>
    
    <div class="Box">
        <p1>Basic Math</p1>
        <hr>
        <p id="BMExplain">Hello, will make automated questions, you answer them, and it'll tell you if its right. For example, whats 2 + 2?</p>
        <p id="BMAnswer"> </p>
        <input type="number" placeholder="Answer here." id="BMInput">
        <br>
        <input type="button" value="Submit" onclick="BasicMath()" id="BMSubmit">
    </div>

    <div class="Box">
        <p1>Factorials(WIP)</p1>
        <hr>
        <p>placeholder</p>
        <p> </p>
        <input type="number" placeholder="placeholder">
        <br>
        <input type="button" value="Submit">
    </div>
</body>
</html>

说明：

• 统一了CSS文件引用，可根据实际文件保留main.css或style.css。
• 修复了HTML结构，确保符合标准规范。
• 整合了重复内容，保留完整的一套页面结构。

内容的提问来源于stack exchange，提问作者ButterDoesFly