我正在尝试弄清楚如何将索引中的相同页眉和页脚上传到所有页面，而不必在此之后编辑所有页面，如果我更改/添加页眉和页脚的内容。 我正在使用CSS和JS到我的HTML页面。 你可以check the main page here。
如果有帮助，可以使用以下代码：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Da Montanha | Esporte e Aventura em Curitiba</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/color.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/datepicker.css" rel="stylesheet" type="text/css">
<link href="css/iconmoon.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600" rel="stylesheet" type="text/css">
</head>
<body class="campers-theme">
<div id="wrapper">
<header id="header">
<section class="topbar-section">
<div class="container">
<div class="col-md-6">
<div class="top-social">
<ul>
<li><a href="https://instagram.com/DaMontanhaAventura" target="_blank"><i class="fa fa-instagram" target="_blank"></i></a></li>
<li><a href="https://www.youtube.com/channel/UC2xNehgiy7AJzThAxQJqA3A" target="_blank"><i class="fa fa-youtube-square" target="_blank"></i></a></li>
<li><a href="https://facebook.com/DaMontanhaAventura" target="_blank"><i class="fa fa-facebook-f" target="_blank"></i></a></li>
</ul>
<a href="mailto:contato@damontanha.com.br" class="email"><i class="fa fa-envelope-o"></i><span class="__cf_email__" data-cfemail="">contato@damontanha.com.br</span></a> <script data-cfhash="f9e31" type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div>
</div>
<div class="col-md-6">
<div class="register-login">
<ul>
<li><a href="login.html"><i class="fa fa-key"></i>Login</a></li>
<li><a href="registrar-se.html"><i class="fa fa-unlock"></i>Registrar-se</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="logo-section">
<div class="container">
<div class="col-md-6"><strong class="logo"><a href="index.html"><img src="images/logo.png" alt="logo"></a></strong></div>
<div class="col-md-6">
<div class="book-section"> <a href="booking-form.html" class="btn-book">Orçamentos</a>
<div class="number-box"> <i class="fa fa-whatsapp"></i>
<div class="number-text"> <span>Entre em Contato</span> <strong>41 99613 6600</strong> </div>
</div>
</div>
</div>
</div>
</section>
<div id="cp-slide-search" class="cp_side-search">
<form method="get">
<input type="text" placeholder="Digite o que procura..." required>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<section class="main-navigation">
<nav class="navbar navbar-inverse">
<div class="container">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="nav-outer">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active"><a href="#">Início</a>
</li>
<li><a href="Aventuras.html">Aventuras<i class="fa fa-caret-down"></i></a></li>
<li><a href="events-large.html">Eventos</i></a></li>
<li><a href="products.html">Loja</i></a></li>
<li><a href="#">Páginas<i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="blog-large.html">Blog</i></a></li></li>
<li><a href="booking-form.html">Orçamento</a></li>
<li><a href="team.html">Nosso Time</a></li>
<li><a href="gallery-1.html">Galeria de fotos</a></li>
<li><a href="testimonials.html">Depoimentos</a></li>
</ul>
</li>
<li><a href="about.html">Sobre Nós</a></li>
<li><a href="contact.html">Contato</a></li>
</ul>
</div>
<div class="nav-right-col">
<div class="cart-box-outer">
<div class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-shopping-cart"></i> </button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="cart-box"> <strong class="title">Você tem <a href="products-detail.html">1 item(s)</a> no seu carrinho.</strong>
<div class="cart-row">
<div class="thumb"><a href="products-detail.html"><img alt="img" src="images/cart-img.jpg"></a></div>
<div class="text-box"> <a class="close" href="#"><i class="fa fa-close"></i></a> <a href="products-detail.html">BestWedding Camping Equipment</a> <strong class="amount">1 x R$59.00</strong> </div>
</div>
<strong class="subtotal">Subtotal: <span>R$59.00</span></strong>
<div class="btn-row"> <a class="btn-checkout" href="products-detail.html">Checkout</a> </div>
</div>
</li>
</ul>
</div>
</div>
<div class="top-search"> <a href="#" class="search-icon" id="search-push"><i class="fa fa-search"></i></a> </div>
</div>
</div>
</div>
</div>
</nav>
</section>
</header>
<footer id="footer">
<section class="instagram">
<div class="container">
<h2>We’re on Instagram</h2>
</div>
<ul>
<li><a href="#"><img src="images/instagram/instagram-img-1.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-2.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-3.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-4.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-5.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-6.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-7.jpg" alt="img"></a></li>
<li><a href="#"><img src="images/instagram/instagram-img-8.jpg" alt="img"></a></li>
</ul>
</section>
<section class="footer-section-1">
<div class="container">
<div class="row">
<div class="col-md-4"> <strong class="footer-logo"><a href="#"><img src="images/footer-logo.png" alt="logo"></a></strong>
<p>Lorem ipsum dolor sit amet, consectetur adipis elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullam laboris nisi ut aliquip ex ea commodo conseque Duis aute irure dolor in reprehenderit</p>
<a href="about.html" class="btn-style-2">Read More</a> </div>
<div class="col-md-4">
<h3>More Services</h3>
<div class="row">
<div class="col-md-6">
<div class="footer-box">
<ul>
<li><a href="#">Free Parking</a></li>
<li><a href="#">Free Wifi Area</a></li>
<li><a href="#">Restaurant</a></li>
<li><a href="#">Free Hot Shower</a></li>
<li><a href="#">Swimming Pool</a></li>
<li><a href="#">Shaded Pitches</a></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="footer-box">
<ul>
<li><a href="#">Laundry</a></li>
<li><a href="#">Hairdresser</a></li>
<li><a href="#">Digs Area</a></li>
<li><a href="#">Barbecue Station</a></li>
<li><a href="#">Ping Pong Table</a></li>
<li><a href="#">Coffee Bar</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="footer-box">
<h3>Contact us</h3>
<address>
<ul>
<li> <span><i class="fa fa-home"></i></span>
<div class="text-box">
<p>123 Lorem Ipsum Avenue,<br>
Campers Road, NY, U.S.A.</p>
</div>
</li>
<li> <span><i class="fa fa-phone"></i></span>
<div class="text-box">
<p>Call us for any Query</p>
<strong>44 01234 5678</strong> </div>
</li>
<li> <span><i class="fa fa-envelope-o"></i></span>
<div class="text-box">
<p>Send us email for any Information</p>
<a href="mailto:"><span class="__cf_email__" data-cfemail="caa3a4aca58aa9aba7baafb8b9e4a9a5a7">[email protected]</span><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script></a> </div>
</li>
<li> <span><i class="fa fa-clock-o"></i></span>
<div class="text-box">
<p>Office Timings</p>
<strong>09:00 - 19:00</strong> </div>
</li>
</ul>
</address>
</div>
</div>
</div>
</div>
</section>
<section class="footer-section-2">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer-socila">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href="#"><i class="fa fa-facebook-f"></i>facebook</a></li>
<li><a href="#"><i class="fa fa-google-plus"></i>google plus</a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i>linkedin</a></li>
</ul>
</div>
</div>
<div class="col-md-6"><strong class="copy">2016 © Campers, Powered by: <a href="http://crunchpress.com/" target="_blank">Crunchpress</a></strong></div>
</div>
</div>
</section>
</footer>
</div>
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.noconflict.js"></script>
<script src="js/theme-scripts.js"></script>
<script src="js/zebra_datepicker.js"></script>
<script src="js/function.js"></script>
<script src="../../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">/* <![CDATA[ */(function(d,s,a,i,j,r,l,m,t){try{l=d.getElementsByTagName('a');t=d.createElement('textarea');for(i=0;l.length-i;i++){try{a=l[i].href;s=a.indexOf('/cdn-cgi/l/email-protection');m=a.length;if(a&&s>-1&&m>28){j=28+s;s='';if(j<m){r='0x'+a.substr(j,2)|0;for(j+=2;j<m&&a.charAt(j)!='X';j+=2)s+='%'+('0'+('0x'+a.substr(j,2)^r).toString(16)).slice(-2);j++;s=decodeURIComponent(s)+a.substr(j,m-j)}t.innerHTML=s.replace(/</g,'<').replace(/>/g,'>');l[i].href='mailto:'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>
<!-- Mirrored from html.crunchpress.com/campers/blog-details.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 24 Nov 2016 12:21:10 GMT -->
</html>
答案 0 :(得分：2)
你可以把它们放在php文件中，header.php和footer.php
然后只需将它们包含在任何你想要的地方
<?php include('header.php') ?>
HTML代码
<?php include('footer.php') ?>
答案 1 :(得分：2)
您可以在angularJS中使用路由功能。你可以查看下面的例子。在这里，您可以拥有多个内容，您可以将其动态绑定到您的页面。因此，您将拥有固定的页眉和页脚内容。
<body ng-app="myApp">
<p>header</p>
<a href="#content1">content1</a>
<a href="#content2">content2</a>
<a href="#content3">content3</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "content1.htm"
})
.when("/content1", {
templateUrl : "content1.htm"
})
.when("/content2", {
templateUrl : "content2.htm"
})
.when("/content3", {
templateUrl : "content3.htm"
});
});
</script>
<p>footer</p>
</body>
答案 2 :(得分：0)
要在没有服务器端语言的情况下执行此操作，您必须使用JavaScript加载模板。从这个问题的答案中可以看到几种方法。
Include another HTML file in a HTML file
基本上，你必须使用jQuery或类似的东西来制作一个AJAX请求以引入HTML。