如何一次向所有页面添加相同的页眉和页脚？超文本标记语言

Question

如何一次向所有页面添加相同的页眉和页脚？超文本标记语言

Tia*_*ryk 3 html javascript css jquery dreamweaver

我正在尝试弄清楚如何将相同的页眉和页脚从我的索引上传到所有页面，而如果我更改/添加某些内容到页眉和页脚，则无需在之后编辑所有页面。\n我正在使用CSS 和 JS 到我的 HTML 页面。\n你可以在此处查看主页。

\n\n

如果有帮助的话，这些是以下代码：

\n\n

\r\n

<html>\r\n<head>\r\n<meta charset="utf-8">\r\n<meta http-equiv="X-UA-Compatible" content="IE=edge">\r\n<meta name="viewport" content="width=device-width, initial-scale=1">\r\n<title>Da Montanha | Esporte e Aventura em Curitiba</title>\r\n<!--[if lt IE 9]>\r\n      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>\r\n      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>\r\n    <![endif]-->\r\n    \r\n<link href="css/custom.css" rel="stylesheet" type="text/css">\r\n \r\n<link href="css/bootstrap.css" rel="stylesheet" type="text/css">\r\n \r\n<link href="css/color.css" rel="stylesheet" type="text/css">\r\n \r\n<link href="css/responsive.css" rel="stylesheet" type="text/css">\r\n \r\n<link href="css/owl.carousel.css" rel="stylesheet" type="text/css">\r\n \r\n<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">\r\n \r\n<link href="css/datepicker.css" rel="stylesheet" type="text/css">\r\n \r\n<link href="css/iconmoon.css" rel="stylesheet" type="text/css">\r\n \r\n<link rel="icon" href="images/favicon.ico" type="image/x-icon">\r\n \r\n<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">\r\n<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600" rel="stylesheet" type="text/css">\r\n</head>\r\n<body class="campers-theme">\r\n \r\n<div id="wrapper">\r\n \r\n<header id="header">\r\n \r\n<section class="topbar-section">\r\n<div class="container">\r\n<div class="col-md-6">\r\n<div class="top-social">\r\n<ul>\r\n<li><a href="https://instagram.com/DaMontanhaAventura" target="_blank"><i class="fa fa-instagram" target="_blank"></i></a></li>\r\n<li><a href="https://www.youtube.com/channel/UC2xNehgiy7AJzThAxQJqA3A" target="_blank"><i class="fa fa-youtube-square" target="_blank"></i></a></li>\r\n<li><a href="https://facebook.com/DaMontanhaAventura" target="_blank"><i class="fa fa-facebook-f" target="_blank"></i></a></li>\r\n</ul>\r\n<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>\r\n</div>\r\n<div class="col-md-6">\r\n<div class="register-login">\r\n<ul>\r\n<li><a href="login.html"><i class="fa fa-key"></i>Login</a></li>\r\n<li><a href="registrar-se.html"><i class="fa fa-unlock"></i>Registrar-se</a></li>\r\n</ul>\r\n</div>\r\n</div>\r\n</div>\r\n</section>\r\n \r\n \r\n<section class="logo-section">\r\n<div class="container">\r\n<div class="col-md-6"><strong class="logo"><a href="index.html"><img src="images/logo.png" alt="logo"></a></strong></div>\r\n<div class="col-md-6">\r\n<div class="book-section"> <a href="booking-form.html" class="btn-book">Or\xc3\xa7amentos</a>\r\n<div class="number-box"> <i class="fa fa-whatsapp"></i>\r\n<div class="number-text"> <span>Entre em Contato</span> <strong>41 99613 6600</strong> </div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n</section>\r\n \r\n<div id="cp-slide-search" class="cp_side-search">\r\n<form method="get">\r\n<input type="text" placeholder="Digite o que procura..." required>\r\n<button type="submit"><i class="fa fa-search"></i></button>\r\n</form>\r\n</div>\r\n \r\n<section class="main-navigation">\r\n<nav class="navbar navbar-inverse">\r\n<div class="container">\r\n<div class="col-md-12">\r\n<div class="navbar-header">\r\n<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>\r\n</div>\r\n<div class="nav-outer">\r\n<div id="navbar" class="collapse navbar-collapse">\r\n<ul class="nav navbar-nav" id="nav">\r\n<li class="active"><a href="#">In\xc3\xadcio</a>\r\n</li>\r\n<li><a href="Aventuras.html">Aventuras<i class="fa fa-caret-down"></i></a></li>\r\n<li><a href="events-large.html">Eventos</i></a></li>\r\n<li><a href="products.html">Loja</i></a></li>\r\n<li><a href="#">P\xc3\xa1ginas<i class="fa fa-caret-down"></i></a>\r\n<ul>\r\n<li><a href="blog-large.html">Blog</i></a></li></li>\r\n<li><a href="booking-form.html">Or\xc3\xa7amento</a></li>\r\n<li><a href="team.html">Nosso Time</a></li>\r\n<li><a href="gallery-1.html">Galeria de fotos</a></li>\r\n<li><a href="testimonials.html">Depoimentos</a></li>\r\n</ul>\r\n</li>\r\n<li><a href="about.html">Sobre N\xc3\xb3s</a></li>\r\n<li><a href="contact.html">Contato</a></li>\r\n</ul>\r\n</div>\r\n<div class="nav-right-col">\r\n<div class="cart-box-outer">\r\n<div class="dropdown">\r\n<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>\r\n<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">\r\n<li>\r\n<div class="cart-box"> <strong class="title">Voc\xc3\xaa tem <a href="products-detail.html">1 item(s)</a> no seu carrinho.</strong>\r\n<div class="cart-row">\r\n<div class="thumb"><a href="products-detail.html"><img alt="img" src="images/cart-img.jpg"></a></div>\r\n<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>\r\n</div>\r\n<strong class="subtotal">Subtotal: <span>R$59.00</span></strong>\r\n<div class="btn-row"> <a class="btn-checkout" href="products-detail.html">Checkout</a> </div>\r\n</div>\r\n</li>\r\n</ul>\r\n</div>\r\n</div>\r\n<div class="top-search"> <a href="#" class="search-icon" id="search-push"><i class="fa fa-search"></i></a> </div>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n</nav>\r\n</section>\r\n \r\n</header>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n\n

\r\n

<footer id="footer">\r\n<section class="instagram">\r\n<div class="container">\r\n<h2>We\xe2\x80\x99re on Instagram</h2>\r\n</div>\r\n<ul>\r\n<li><a href="#"><img src="images/instagram/instagram-img-1.jpg" alt="img"></a></li>\r\n<li><a href="#"><img src="images/instagram/instagram-img-2.jpg" alt="img"></a></li>\r\n<li><a href="#"><img src="images/instagram/instagram-img-3.jpg" alt="img"></a></li>\r\n<li><a href="#"><img src="images/instagram/instagram-img-4.jpg" alt="img"></a></li>\r\n<li><a href="#"><img src="images/instagram/instagram-img-5.jpg" alt="img"></a></li>\r\n<li><a href="#"><img src="images/instagram/instagram-img-6.jpg" alt="img"></a></li>\r\n<li><a href="#"><img src="images/instagram/instagram-img-7.jpg" alt="img"></a></li>\r\n<li><a href="#"><img src="images/instagram/instagram-img-8.jpg" alt="img"></a></li>\r\n</ul>\r\n</section>\r\n \r\n<section class="footer-section-1">\r\n<div class="container">\r\n<div class="row">\r\n<div class="col-md-4"> <strong class="footer-logo"><a href="#"><img src="images/footer-logo.png" alt="logo"></a></strong>\r\n<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>\r\n<a href="about.html" class="btn-style-2">Read More</a> </div>\r\n<div class="col-md-4">\r\n<h3>More Services</h3>\r\n<div class="row">\r\n<div class="col-md-6">\r\n<div class="footer-box">\r\n<ul>\r\n<li><a href="#">Free Parking</a></li>\r\n<li><a href="#">Free Wifi Area</a></li>\r\n<li><a href="#">Restaurant</a></li>\r\n<li><a href="#">Free Hot Shower</a></li>\r\n<li><a href="#">Swimming Pool</a></li>\r\n<li><a href="#">Shaded Pitches</a></li>\r\n</ul>\r\n</div>\r\n</div>\r\n<div class="col-md-6">\r\n<div class="footer-box">\r\n<ul>\r\n<li><a href="#">Laundry</a></li>\r\n<li><a href="#">Hairdresser</a></li>\r\n<li><a href="#">Digs Area</a></li>\r\n<li><a href="#">Barbecue Station</a></li>\r\n<li><a href="#">Ping Pong Table</a></li>\r\n<li><a href="#">Coffee Bar</a></li>\r\n</ul>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n<div class="col-md-4">\r\n<div class="footer-box">\r\n<h3>Contact us</h3>\r\n<address>\r\n<ul>\r\n<li> <span><i class="fa fa-home"></i></span>\r\n<div class="text-box">\r\n<p>123 Lorem Ipsum Avenue,<br>\r\nCampers Road, NY, U.S.A.</p>\r\n</div>\r\n</li>\r\n<li> <span><i class="fa fa-phone"></i></span>\r\n<div class="text-box">\r\n<p>Call us for any Query</p>\r\n<strong>44 01234 5678</strong> </div>\r\n</li>\r\n<li> <span><i class="fa fa-envelope-o"></i></span>\r\n<div class="text-box">\r\n<p>Send us email for any Information</p>\r\n<a href="mailto:"><span class="__cf_email__" data-cfemail="caa3a4aca58aa9aba7baafb8b9e4a9a5a7">[email&#160;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>\r\n</li>\r\n<li> <span><i class="fa fa-clock-o"></i></span>\r\n<div class="text-box">\r\n<p>Office Timings</p>\r\n<strong>09:00 - 19:00</strong> </div>\r\n</li>\r\n</ul>\r\n</address>\r\n</div>\r\n</div>\r\n</div>\r\n</div>\r\n</section>\r\n \r\n \r\n<section class="footer-section-2">\r\n<div class="container">\r\n<div class="row">\r\n<div class="col-md-6">\r\n<div class="footer-socila">\r\n<ul>\r\n<li><a href="#"><i class="fa fa-twitter"></i>twitter</a></li>\r\n<li><a href="#"><i class="fa fa-facebook-f"></i>facebook</a></li>\r\n<li><a href="#"><i class="fa fa-google-plus"></i>google plus</a></li>\r\n<li><a href="#"><i class="fa fa-linkedin-square"></i>linkedin</a></li>\r\n</ul>\r\n</div>\r\n</div>\r\n<div class="col-md-6"><strong class="copy">2016 &copy; Campers, Powered by: <a href="http://crunchpress.com/" target="_blank">Crunchpress</a></strong></div>\r\n</div>\r\n</div>\r\n</section>\r\n \r\n</footer>\r\n \r\n</div>\r\n \r\n \r\n<script src="js/jquery-1.12.2.min.js"></script>\r\n \r\n<script src="js/bootstrap.min.js"></script>\r\n \r\n<script src="js/owl.carousel.min.js"></script>\r\n \r\n<script src="js/jquery.noconflict.js"></script>\r\n<script src="js/theme-scripts.js"></script>\r\n \r\n<script src="js/zebra_datepicker.js"></script>\r\n \r\n<script src="js/function.js"></script>\r\n \r\n<script src="../../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>\r\n<script src="js/jquery.counterup.min.js"></script>\r\n \r\n<script src="js/jquery.countdown.min.js"></script>\r\n \r\n<script src="js/custom.js"></script>\r\n<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,\'&lt;\').replace(/>/g,\'&gt;\');l[i].href=\'mailto:\'+t.value}}catch(e){}}}catch(e){}})(document);/* ]]> */</script></body>\r\n\r\n<!-- 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 -->\r\n</html>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n

Answer 1

Tak*_*aki 5

你可以将它们放在 php 文件中，header.php然后footer.php
将它们包含在你想要的
<?php include('header.php') ?>
html 代码中
<?php include('footer.php') ?>

他没有，所以我假设他愿意接受所有建议 (2认同)

归档时间：	9 年，1 月前
查看次数：	14538 次
最近记录：	8 年，8 月前