一个页面中的 HTML 菜单栏以包含在其他页面中答案

【问题标题】：HTML Menu Bar in one page to include in other pages一个页面中的 HTML 菜单栏以包含在其他页面中
【发布时间】：2018-04-26 06:21:06
【问题描述】：

我正在用 HTML、CSS 和 JavaScript 编写主页，并且有一个关于制作菜单栏的问题。
我已经设计了一个设计并将其放在我拥有的每个站点上，但我也考虑过要更改其中的一些小东西会有多复杂。所以我尝试制作一个只显示菜单栏的网站，然后在每一页的开头链接它。这将使我能够最大限度地减少更改菜单栏中的内容的工作量。但我是一个非常初学者，所以我并没有完全失败。

如果有人可以帮助我，那就太好了。我是德国人，不擅长说或写英语，所以对于我可能犯的错误，我深表歉意。

如果您可能需要，我使用的代码：

 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content {
        display: block;
    }

 <!DOCTYPE html>
    <html>
    <head>
        <title>Startseite</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="Startseite">
        <meta name="description" content="Meine Startseite">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <ul id="fixed">
      <li><a href="menu.html">Startseite</a></li>
      <li><a href="timetable.html">Stundenplan</a></li>
      <li><a href="report.html">BOGY-Bericht</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">Javascript</a>
        <div class="dropdown-content">
          <a href="js1.html">Beispiele 1</a>
          <a href="js2.html">Beispiele 2</a>
        </div>
      </li>
      <li><a href="animation.html">Animationen</a></li>
      <li><a href="canvas.html">Bouncing Ball</a></li>
      <li><a href="links.html">Verweise</a></li>
        </ul>
    </body>
    </html>

【问题讨论】：

您可以使用一点 php 并创建一个 header.php 和 footer.php 然后在您的页面中使用它们。喜欢：<?php require header.php ?> your html code <?php require footer.php ?>我会为你做一个plunker。
html 只允许您使用嵌入代码在彼此的页面中导入页面，这在您的情况下不是最佳解决方案，我使用 SupremeDEV 的答案并建议您使用 php 文件并将它们包含到您的页面中。 ps 当我们说 php 时不要惊慌，它只是您的文件格式，内容只是您的导航 html 代码。无需 php 代码。
另外，如果你使用Ruby on Rails，你可以像_header.html.erb一样创建一个partial，然后像这样在application.html.rb中渲染它：<%= render 'header' %>

标签： javascript html css menu menubar

【解决方案1】：

这可以是你的header.php

<html>
     <body>
           <header>Hello World</header>
           <div>

这可以是你的footer.php

           </div>
           <footer>Bye World</footer>
     </body>
</html>

这可能是您的其他页面示例：other.php

<?php include ('header.php'); ?>
My html here.
<?php include ('footer.php'); ?>

试试看，希望对你有帮助。

【讨论】：

它显示的所有内容都是“我的 html 这里。”。没有footer.php und header.php 中的文字
@Trauma 是 header.php 和 footer.php 与 other.php 在同一地图中吗？如果不是，您应该正确链接它们。否则尝试将它们放在同一张地图中。我已经测试了代码，它应该对我有用。
@Trauma 您是否在某个本地主机服务器上运行它？如。 xampp、usbwebserver、wamp 等。请注意，php 必须在任何 apache 服务器上运行。
我只是做“用Firefox打开”，这就是它所显示的。我也想用 Internet Explorer 试试，但我认为这不会有什么不同
在 Internet Explorer 中，它尝试下载文件 other.php，如下面的另一个答案中所示

【解决方案2】：

You have to make a new folder for include in which common data should be placed (header.php and footer.php)
Name of first File - index.php -
<?php include('include/header.php'); ?>

Name of the second file - header.php(contains Common data (menu bar) )
header.php
<!DOCTYPE html>
        <html>
        <head>
            <title>Startseite</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="keywords" content="Startseite">
            <meta name="description" content="Meine Startseite">
            <link rel="stylesheet" href="style.css">
        </head>
 <body>
   <ul id="fixed">
          <li><a href="menu.html">Startseite</a></li>
          <li><a href="timetable.html">Stundenplan</a></li>
          <li><a href="report.html">BOGY-Bericht</a></li>
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">Javascript</a>
            <div class="dropdown-content">
              <a href="js1.html">Beispiele 1</a>
              <a href="js2.html">Beispiele 2</a>
            </div>
          </li>
          <li><a href="animation.html">Animationen</a></li>
          <li><a href="canvas.html">Bouncing Ball</a></li>
          <li><a href="links.html">Verweise</a></li>
            </ul>

Name of third file is footer.php
      
    Footer.php
        </body>
        </html>

文件应使用 php 扩展名保存

你必须在每个单独的页面中使用这个包含文件

 &lt;?php include('include/header.php'); ?&gt;

在每个单独的页面上添加包含文件

【讨论】：

这看起来很不错，但它似乎对我不起作用。我复制了你说的所有内容，但是如果我运行文件，则什么都没有。还尝试了一个教程来包含，它发生了同样的情况
那请检查文件名或者文件扩展名是否正确
请在主文件夹中新建一个include文件夹，并放置header.php,footer.php,main.php文件
imgur.com/a/4tM3AuE 我有这样的文件夹，并在文件中复制了你写的内容，imgur.com/a/FEDyKPh 这是显示给我的内容-.-
为什么body标签和head标签显示在include标签的顶部