将标题添加到网站的所有页面

时间:2015-03-10 22:26:05

标签: javascript html

我在名为header.HTML的文件中有以下HTML:

<HTML>
    <head>
        <link rel="stylesheet" type="text/css" href="Style.css">
    </head>
    <body>
        <div class="headerOutline">
        </div>
        <div class="buttons">
        <div>
    </body>
</HTML>

以及主页中的以下HTML:

<HTML>
    <head>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <title>Page 1</title>
        <script> 
        </script> 
    </head>
    <body>
    </body>
</HTML>

我想要做的是在我网站的每个页面中包含头文件。

我已尝试按照以下说明操作:

Make header and footer files to be included in multiple html pages

Common Header / Footer with static HTML

但他们没有加载到我的浏览器中。也许我做错了什么。这是我家用电脑上的一个基本网站,用于学习目的,所以我正在寻找客户端代码,例如PHP等。

我可以在必要时发布CSS,但我认为在这种情况下它并不相关。

2 个答案:

答案 0 :(得分:0)

您的header.html文件除了要包含的内容外,不应包含任何内容。没有身体标签或类似的东西;您将部分内容包含在主文件的正文中。

<html>
  <head>
    <title></title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script> 
      $(function(){
        $("#header").load("header.html"); 
      });
    </script>
  </head>
  <body>
    <div id="header"></div>
  </body>
</html>

答案 1 :(得分:0)

我看到的第一个问题是您在两个文件中都包含<html><body><head>标记。您希望index.html文件看起来像这样:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="Style.css">
    <title>Page 1</title>
  </head>
  <body>
    <header id="header"></header>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
      $('#header').load('header.html');
    </script>
  </body>
</html>

然后在您的header.html文件中:

<div class="headerOutline">
</div>
<div class="buttons">
<div>

从技术上讲,您可以根据需要制作<header>标记,例如<div>,但这样可以保持代码的语义。您发布的示例使用jQuery,因此我继续将其包含在代码中。它只是被谷歌的CDN所取代。

关闭</body>标记之前的脚本只是告诉jQuery找到您的header.html文件并将其加载到ID为#header的元素中的文档中。您将能够对header.html文件进行更改,并在使用jQuery加载标头的任何位置查看这些更改。