我有一个大约4000行代码的HTML文件，它是一个单页网站，它需要保持这种方式。
场地由8个不同的100vh潜水器组成。把它想象成一个8页的全尺寸英雄滑块，每个滑块上都有一些东西。
调试和编辑这个文件是一场噩梦。
是否有可能将每个部分/组件/节/div(无论什么)分离到自己的HTML文件中，并将它们导入另一个HTML文件?就像在React上是怎么做的。
基本上:
将index.html分成8个部分A.html, b.html，等等
将a.html导入到index.html中，并使其在div中可见;对b.t hml做同样的操作，将它放在a.t hml
下面的另一个div中您可以使用PHP和它的include()函数有一个主(PHP)文件，其中包含8个或任何数量的包含HTML代码的文件。
除了包含它之外，几乎不需要任何其他PHP代码，也就是说，这很容易通过任何PHP基础教程学习。
我不知道以下内容是否合理，但原则上应该有效。
你可以尝试使用JavaScript的insertAdjacentHTML()方法:
在你的HTML文件中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='file1-div'></div>
<div id='file2-div'></div>
<script src='file1.js'></script>
<script src='file2.js'></script>
</body>
</html>
在file1.js中你可以这样写:
const file1Div = document.querySelector('#file1-div');
file1Div.insertAdjacentHTML('beforeend', `
<!-- your HTML goes here -->
<p>Hello World from file1.js</p>
`);
在file2.js中，你可以写:
const file2Div = document.querySelector('#file2-div');
file2Div.insertAdjacentHTML('beforeend', `
<!-- your HTML goes here -->
<p>Hello World from file2.js</p>
`);
与使用PHP或Node.js相比，这样做的一个优点是你不需要在服务器上运行PHP或Node.js。