我在名为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,但我认为在这种情况下它并不相关。
答案 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加载标头的任何位置查看这些更改。