【发布时间】：2021-05-09 18:27:39
【问题描述】：
我创建了 header.php 和 footer.php 来减少代码重复。现在我遇到的问题是，当我进入 Inspect 元素时，我看到包含元标记等的头部标记被显示两次。
我在php中使用include函数来显示header.php和footer.php
如何防止它被多次显示？
这是我的 Header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title>El Tabata</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header class="nav-down">
<nav class="container navbar">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<h1 style="color: white">El Tabata</h1>
</div>
<div class="nav-ul nav-center ">
<ul >
<li style="--animation-order: 1;"><a href="index.php">Home</a></li>
<li style="--animation-order: 2;"><a href="about.php">About</a></li>
<li style="--animation-order: 3;"><a href="people.php">People</a></li>
<li style="--animation-order: 4;"><a href="menu.php">Menu</a></li>
<li style="--animation-order: 5;"><a href="contact.php">Contact</a></li>
<li style="--animation-order: 6;"><a href="reservations.php">Reservations</a></li>
</ul>
</div>
<div class="icon">
<a href="favourites.php"><img src="heart.svg" alt="favorites"></a>
</div>
</nav>
</header>这是我的 Footer.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title>El Tabata</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="responsive.css">
<script src="https://kit.fontawesome.com/b3c12f2bf7.js" crossorigin="anonymous"></script>
</head>
<body>
<footer>
<div class=" container footer-dist">
<div class="footer-left">
<img src="./assets/mexican-mascot.png" alt="">
</div>
<div class="footer-center">
<h3>El Tabata</h3>
<p class="footer-links">
<a href="index.php">Home</a>
|
<a href="about.php">About</a>
|
<a href="people.php">People</a>
|
<a href="menu.php">Menu</a>
|
<a href="contact.php">Contact</a>
|
<a href="reservations.php">Reservations</a>
</p>
<p class="footer-names">© 2021 | Anthony Mifsud | Leon Zammit | Luke Portanier | CIS1054-SEM2-A-2021</p>
</div>
<div class="footer-right">
<img src="./assets/mexican-mascot.png" alt="">
</div>
<div>
</footer>【问题讨论】：
-
看看你的footer.html - 它有你的页眉。你需要清理它
-
页眉和页脚只是您希望包含在模板文件中的重复部分。包含完整的 HTML 结构是没有意义的。
-
页眉和页脚重复了一些相同的内容，包括元标记......所以显然它出现了两次。不清楚你为什么对此感到惊讶。如上所述，这样完全没有意义。