Question

我创建了 header.php 和 footer.php 以减少代码重复。现在我遇到的问题是，当我进入 Inspect 元素时，我看到包含元标记等的 head 标记被显示两次。

我在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>

这是我的页脚.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>

Answer 1

这种行为是正常的，您声明了两个不同的网页，一个在页眉中，一个在页脚中。浏览器从响应中删除第二个文档类型以遵守 W3C 标准。

您可以创建一个 template.php 页面，其中包含 HTML 文档的 html 结构（Doctype 和元标记），并包含仅限于正文内容的页眉和页脚文件。

index.php 或 template.php

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <your meta balise>
</head>
<body>
<?php
  include('header.php')
  inlcude('footer.php')
?>
</body>
</html>

header.php

<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

<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>

希望对你有用

元标签被多次显示

1 个答案: