php制作网页在html中body块中添加代码导致页面乱码，显示Cannot modify header information - headers already sent

问题遇到的现象和发生背景

用php编写了一个简单的网页传值运算器，初步构建完成后没有问题，但是在后面修改前端html代码改外观的时候出现页面乱码，显示Warning: Cannot modify header information - headers already sent by (output started at Z:\Xampp\htdocs\401.php:1) in Z:\Xampp\htdocs\401.php on line 129

问题相关代码，请勿粘贴截图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>r2code</title>
<link href="web.css" rel="stylesheet" type="text/css" />
<style>
  .table {
    margin: 20px auto;
  }

  td {
    padding: 0 10px;
  }

  tr {
    height: 25px;
  }
</style>

节点总数

固定节点总数

杆件总数

  <table class="table">
    <tr>
      <td>荷载总数</td>
      <td><input type="text" name="loadNum" /></td>
      <td>截面总数</td>
      <td><input type="text" name="secNum" /></td>
    </tr>

    <tr>
      <td>节点坐标X</td>
      <td><input type="text" name="xArray" /></td>
      <td>节点坐标Y</td>
      <td><input type="text" name="yArray" /></td>
    </tr>
    <tr>
      <td>杆件左节点</td>
      <td><input type="text" name="leftNode" /></td>
      <td>杆件右节点</td>
      <td><input type="text" name="rightNode" /></td>
    </tr>
    <tr>
      <td>杆件EA</td>
      <td><input type="text" name="EA" /></td>
      <td>杆件EJ</td>
      <td><input type="text" name="EJ" /></td>
    </tr>
  </table>
  <table class="table">
    <tr>
      <td>载荷所在杆件号</td>
      <td><input type="text" name="loadBarNum" /></td>
      <td>载荷类型</td>
      <td><input type="text" name="loadSort" /></td>
      <td>载荷大小</td>
      <td><input type="text" name="loadMag" /></td>
    </tr>
    <tr>
      <td>载荷距左端距离</td>
      <td><input type="text" name="loadLeftLength" /></td>
      <td>截面所在杆件号</td>
      <td><input type="text" name="secBarNum" /></td>
      <td>截面距左端距离</td>
      <td><input type="text" name="secLeftLength" /></td>
    </tr>
  </table>

  <div align="center">
    <p> 可选项： </p>
    <input type="checkbox" name="box[]" value="weight" />是否考虑自重
    <input type="checkbox" name="box[]" value="shear" />是否考虑剪切变形
    <input type="checkbox" name="box[]" value="displacement" />是否存在节点位移
  </div>
  <table class="table">
    <tr>
      <td>x方向指定位移节点号</td>
      <td><input type="text" name="Xnode" /></td>
      <td>y方向指定位移节点号</td>
      <td><input type="text" name="Ynode" /></td>
      <td>转角指定位移节点号</td>
      <td><input type="text" name="Znode" /></td>
    </tr>
    <tr>
      <td>x方向指定位移</td>
      <td><input type="text" name="Xspecifydisplacement" /></td>
      <td>y方向指定位移</td>
      <td><input type="text" name="Yspecifydisplacement" /></td>
      <td>转角指定位移</td>
      <td><input type="text" name="Zspecifydisplacement" /></td>
    </tr>
    <tr>
      <td>x方向指定位移数</td>
      <td><input type="text" name="Xnum" /></td>
      <td>y方向指定位移数</td>
      <td><input type="text" name="Ynum" /></td>
      <td>转角指定位移数</td>
      <td><input type="text" name="Znum" /></td>
    </tr>
  </table>
  <p>
  </p>
  <div align="center">
    <input name="Submit" type="submit" value="计算" />
  </div>
</form>
<p>&nbsp;</p>

运行结果及报错内容

这是乱码后的结果

这是未在body处再添加代码的正常结果

我的解答思路和尝试过的方法

修改过编码格式未utf-8，没有解决

我想要达到的结果

能在现有外观基础上再添加代码修改外观不产生乱码错误

header("content-type: text/html; charset=utf-8");
这一句要放在最顶行，前面不能有空格换行或其他输出