如何将多个页面写在一个html代码内实现页面跳转

在HTML中，如果你想在一个文件里实现页面之间的跳转，并非直接通过`<a>`标签链接到另一个页面，而是将整个页面的内容包含在一起，可以采用以下几种方法：

1. **Ajax异步加载**：使用JavaScript的XMLHttpRequest或者fetch API，在点击某个按钮或链接时，发送请求获取其他页面的部分内容，并动态插入到当前页面相应的位置，实现了无刷新的页面切换。

<button onclick="loadPage('page2.html')">跳转</button>
<script>
function loadPage(url) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById("content").innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}
</script>
<div id="content"></div>

2. **内联框架（IFrame）**：通过 `<iframe>` 标签嵌入另一个HTML文档，可以直接显示整个页面，用户无法直接跳转，但看起来像是在同一个页面上。

<button onclick="showIframe('page2.html')">
   跳转到页2
</button>

<iframe src="" id="myFrame" style="display:none;"></iframe>

<script>
function showIframe(url) {
  document.getElementById('myFrame').src = url;
  document.getElementById('myFrame').style.display = 'block';
}
</script>

3. **单页应用架构（SPA）**：使用现代前端技术如React、Vue或Angular等构建的单页应用，虽然页面内容是动态加载的，但实际上只有一个HTML文件，通过路由管理工具控制哪些区域显示哪些内容。

对于以上每种方法，你还可以配合CSS和JavaScript进行动画效果，模拟页面跳转的感觉。然而，需要注意的是，如果所有页面都包含在同一HTML中，这可能会导致SEO问题，搜索引擎可能难以索引每个独立的“页面”。