Question

我正在做一个网站的前端，将其放在github上，我想知道是否有任何方法可以将html文件导入另一个html文件。我知道我可以使用php，但是我对是否可以使用html感兴趣。

Answer 1

您可以使用iframe：

HTML内联框架元素（<iframe>）表示一个嵌套的浏览上下文，将另一个HTML页面嵌入到当前页面中。

Answer 2

本应将其引入HTML的机制称为 HTML导入，但从未在Chrome浏览器以外的浏览器中使用过，如果尚未根据{ {3}}。

当然，HTML所基于的SGML（以及扩展名XML）始终具有从句法上语法构造HTML的强大方法。在SGML（和XML）中，您可以将名为 entities 的声明为包含任何文本（纯文本或包含标记的文本）的文本变量。特别是，您可以声明要从外部文件或http：//资源提取的实体的替换内容。在我的SGML教程中，一开始就有一个基本示例介绍如何插入页眉和页脚片段（https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports）。

但是请注意，这在浏览器中不有效。即使您使用XHTML和包含实体声明的自定义DOCTYPE，浏览器也不会拉入/扩展实体引用。

Answer 3

在这种情况下，您将使用JS，因为它完全在前端。在后端执行类似操作时，将使用PHP。

Answer 4

如果我是你，我会研究next.js或React。我不认为您可以将html文档相互嵌入，但是例如，如果您希望在每个页面中都有一个特定的div，而不必将其复制并粘贴到每个页面中，则使用React框架（next.js使用）基本上允许您执行此操作，除了将html编码为JavaScript文档。例如，我可以在每个页面上使用这样的导航栏：

<div>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</div>

（显然是在CSS中设置样式，并且具有更多的链接，因为仅此一项将是导航栏历史上最糟糕的导航栏）通过制作一个组件，让我们在next.js中这样说NavBar.js：

import Link from 'next/link';

export default function NavBar(){
  return (
    <div>
      <ul>
        <li><Link href="/"><a>Home</a></Link></li>
        <li><Link href="/about"><a>About</a></Link></li>
      </ul>
    </div>
  );
}

然后将其导入到每个页面中，如下所示：

import NavBar from '../components/NavBar';

export default function ThisPage() {
  return (
    <div>
      <NavBar/>
      <insert content here>
    </div>
  );
}

如果您不想使用React / next.js，或者很难学习，或者对于您正在做的事情不起作用，那么您可能就不得不复制和粘贴很多东西。

>

是否可以在html文档中包含html文档？

4 个答案: