Question

我有十个html页面，每个页面也有相同的页眉和页脚标签我可以有一个页面有完整的页眉和页脚，我将从其他html页面引用该特定页面。

Answer 1

如果您不关心禁用JavaScript或正在使用某些移动平台的用户，则可以使用JavaScript来执行此操作。

<强> headerfooter.js

window.onload = function ()
    {
        var header = document.getElementById('header');
        var footer = document.getElementByID('footer');

        header.innerHTML = "<h1>My website</h1><h2>Rules</h2>";
        footer.innerHTML = "<small>This code is in the public domain</small>";
    }

<强> page.html中

<html>
  <head>
    <script type="text/javascript" src="headerfooter.js"></script>
  </head>
  <body>
    <div id="header"></div>
    ... Your content ...
    <div id="footer"></div>
  </body>
</html>

但不要这样做，这是用户不友好，不专业。只需坚持使用php，或构建一个不需要在以后编辑的实体模板。

Answer 2

您可以使用服务器端语言（如PHP）或其他众多不同语言（预处理页面）来完成此操作。这些方面的东西：

<?php include 'header.html'; ?>

... page contents...

<?php include 'footer.html'; ?>

Answer 3

您的服务器端脚本语言是什么？你可以做所谓的“包括”。

确切的语法取决于您的Web服务器支持的语言。

Answer 4

假设问题上的“master-pages”标签是指ASP.NET，这里是Super Link。 PS。您也应该尝试Ruby on Rails：）

Answer 5

使用Django。当你掌握它时最好的东西：）

Answer 6

绝对，我们只需定义并使用仅一个页眉和页脚内容，就可以避免在多个页面上编写相同的代码，例如页眉和页脚在所有页面上显示。

假设假设您的index.html中包含页眉和页脚元素，如下所示：

<header id='header'>
<!-- Code-->
</header>

<!---Body contents -->

<footer id='footer'>
<!-- Some code-->
</footer>

使用JavaScript将页眉和页脚内容存储在变量中

<script>
var header_content = '<!-- Code for header---> ;
var footer_content = '<!-- Code for footer---> ;

var header_element = document.getElementById('header');
var footer_element = document.getElementById('footer');

header_element.innerHTML = header_content;
footer_element.innerHTML = footer_content;
</script>

在想要添加页眉和页脚并享受JavaScript功能的页面上使用此脚本。

代码重复在增加时必须在我们的文档中最少冗余（实际上不需要额外的内容）/文档大小及其一遍又一遍地重复相同的代码真的很不专业。

我们可以更深入地讨论代码复制这个主题，它具有很多缺点（缺点）而缺点较少（优点）。

JavaScript是最好的解决方案，因为不需要服务器端脚本，只有客户端脚本才能运行，您的客户端浏览器必须具有启用JavaScript ，这是当今主要浏览器的默认设置。

我们如何避免在每个html页面中重复页眉和页脚代码

6 个答案: