HTML 在一个 HTML 页面中加载另一个 HTML 页面

在本文中，我们将介绍如何在一个 HTML 页面中加载另一个 HTML 页面。通过加载子页面，我们可以在一个页面中嵌入其他页面的内容，实现页面的模块化和复用。

阅读更多：HTML 教程

使用 iframe 标签加载 HTML 页面

HTML 提供了 iframe 标签来加载其他 HTML 页面。iframe 标签允许我们在一个页面中创建一个内联的框架，以显示其他页面的内容。我们可以使用以下示例代码来演示如何使用 iframe 标签加载一个 HTML 页面：

<!DOCTYPE html>
<html>
<head>
  <title>主页面</title>
</head>
<body>
  <h1>主页面</h1>
  <iframe src="子页面.html" frameborder="0"></iframe>
</body>
</html>

在上面的示例中，我们创建了一个包含一个 iframe 标签的主页面。iframe 标签的 src 属性指定了要加载的子页面的 URL。通过设置 frameborder="0"，我们可以去除 iframe 框架的边框。

通过 JavaScript 动态加载 HTML 页面

除了使用 iframe 标签，我们还可以通过 JavaScript 动态加载 HTML 页面。这种方法可以使我们在运行时根据需要加载和替换页面内容。下面是一个使用 JavaScript 动态加载 HTML 页面的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>主页面</title>
  <script>
    function loadSubPage() {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '子页面.html', true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var subPageContent = xhr.responseText;
          document.getElementById('subPageContainer').innerHTML = subPageContent;
        }
      };
      xhr.send();
    }
  </script>
</head>
<body onload="loadSubPage()">
  <h1>主页面</h1>
  <div id="subPageContainer"></div>
</body>
</html>

在上面的示例中，我们使用了 JavaScript 提供的 XMLHttpRequest 对象来请求子页面的内容。当请求成功并返回时，我们将子页面的内容设置到一个带有特定 ID 的 div 容器中。

加载外部网页

除了加载本地 HTML 页面外，我们还可以使用 iframe 或 JavaScript 通过 URL 加载外部网页。这样，我们可以在我们的页面中嵌入其他网站的内容。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>主页面</title>
</head>
<body>
  <h1>主页面</h1>
  <iframe src="https://www.example.com" frameborder="0"></iframe>
</body>
</html>

上面的示例中，我们使用了一个外部网页的 URL 来设置 iframe 的 src 属性，这样就能加载并显示该网页的内容。

总结

通过使用 iframe 标签或 JavaScript，我们可以在一个 HTML 页面中加载另一个 HTML 页面。这样可以实现页面的模块化和复用，同时也可以在我们的页面中嵌入其他网站的内容。根据实际需求，我们可以选择适合的方法来加载和显示子页面的内容。以上仅为简单示例，实际应用中可能需要额外的处理和安全考虑。