将外部php文件插入html

f5emj3cl  于 5个月前  发布在  PHP
关注(0)|答案(2)|浏览(55)

在HTML中使用PHP包含插入页眉和页脚
我正在本地创建一个网站,我想在一个单独的页面中插入页眉和页脚,因为它们总是相同的,但是当我在html页面中插入php include标签时,我必须插入它,它不会读给我。另一方面,如果我将它插入另一个页面,它会读给我。你们能帮我吗?我不知道我的解释是否很清楚。

编辑#1

我想创建一个电影院管理网站。我创建了一个页面,在那里我可以显示在电影院制作的各种电影的描述。在每个页面上的页眉和页脚是相同的,只有身体的变化,所以我想单独创建页眉页面,并将其嵌入到前面提到的页面。如何才能做到这一点?我试着从php中使用include,但它不起作用。我还试着插入链接

<link href="nome del percorso" rel="import">

字符串
当您点击“立即购买”按钮时,将打开有关各种电影描述的页面。
文件header.html是:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <link rel="import" href="../header/header.html">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>

  <body id="homepage">
    <!--<include src="../index.php"></include>-->
      <header class="header">
        <nav class="navigation-open">
          <div class="global container grid-x">
            <div class="logowrapper grid-x">
              <div class="logo-container">
                <a href="index.html">
                  <img class="logo" src="../img/logo.png" alt="logo">
                </a>
              </div>
            </div>
            <div class="dashboard-nav cell grid-x">
              <nav class="choicewrapper">
                <ul class="wrapper">
                  <li class="page-cinema">
                    <a href="#" class="gradient-fill-hover">
                      <span>A</span>
                      <span>l</span>
                      <span>&nbsp</span>
                      <span>C</span>
                      <span>i</span>
                      <span>n</span>
                      <span>e</span>
                      <span>m</span>
                      <span>a</span>
                    </a>
                  </li>
                  <li class="page-card">
                    <a href="#" class="gradient-fill-hover">
                      <span>C</span>
                      <span>a</span>
                      <span>r</span>
                      <span>d</span>
                      <span>&nbsp</span>
                      <span>e</span>
                      <span>&nbsp</span>
                      <span>P</span>
                      <span>r</span>
                      <span>o</span>
                      <span>m</span>
                      <span>o</span>
                    </a>
                  </li>
                  <li class="page-pass">
                    <a href="#" class="gradient-fill-hover">
                      <span>P</span>
                      <span>a</span>
                      <span>s</span>
                      <span>s</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            <nav class="loginwrapper grid-x cell align-right">
              <div class="form-search-s grid-x">
                <form class="form-search" onsubmit="event.preventDefault();" role="search">
                  <label for="search">Search for stuff</label>
                  <input class="input-search" type="search" id="search" placeholder="Search..." autofocus required />
                  <button type="submit" class="btn-search" onclick="index.html">Go</button>
                </form>
              </div>
              <div class="profile-login">
                <a href="../login/login.html" title="Accedi / Registrati">
                  <i class="fas fa-user"></i>
                  <span>Login</span>
                  <i class="fas fa-caret-down"></i>
                </a>
                <div class="container-login open grid-x">
                  <div class="dropdown-content grid-x cell">
                    <div class="container-dashboard cell d-flex auto">
                      <ul>
                        <li class="list-login">
                          <a href="#" class="login">
                            <i class="fas fa-user"></i>
                            <span>Login</span>
                          </a>
                        </li>
                        <li class="list-login">
                          <a href="#" class="registration">
                            <i class="fas fa-square-poll-horizontal"></i>
                            <span>Registrati</span>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </nav>
        </header>
    </body>
  </html>


文件prova.html是:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <link rel="import" href="../header/header.html">
  <!--<link rel="import" href="../header/header.html" />-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>
  <body>

    <!--<include src="prova2.html"></include> INCLUSIONE CODICE ESTERNO -->
  </body>
</html>

编辑#2

我的代码index.php是:

<?php include './header/header.php'; ?>


我的代码header.html是:

<html>
<head> 
</head>
<body>
<include src="../index.php"></include>
my code...
</body>


我的代码prova.html是:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
</head>
  <body>
    <include src="../header/header.html"></include>
  </body>
</html>

s5a0g9ez

s5a0g9ez1#

HTML不提供<include>标签,因为<include>标签不存在,所以你为它编写的代码什么也做不了。
你需要的是让你的文件都基于PHP(所以,它们需要有.php文件扩展名,而不是.html)[为什么?因为你告诉PHP尝试包含一个header.php文件,它不存在;你的header文件是一个.html文件。]然后你需要一个Web服务器进行开发。例如,你可以使用XAMPP
一旦你的服务器运行了,你需要导航到localhost127.0.0.1作为你的本地主机地址,这将是你的web目录。PHP不能执行,除非它运行在一个服务器上,但像这样的测试服务器工作正常。
如果index.php是你想要包含某些内容的文件,你可以简单地在你想要PHP呈现它的地方写include_once(比include更好)语句。例如,如果你想在你的主页中包含一个导航栏文件:

index.php

<body>
<?php include_once('.../path_to_navbar.php');
</body>

字符串

header.php

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
  <!-- you do not need a link statement here for header.php -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css">
  <!-- Font -->
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Office:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@1&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Belanosima&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
</head>

<!-- TRUNCATED FOR ANSWERING PURPOSES -->

bqjvbblv

bqjvbblv2#

将一个html文件插入另一个html文件的命令是“iframe”。你尝试使用的php扩展和代码混淆了这个问题。请参阅编辑你的prova. html文件,它在你有“include”的行中被替换。我添加了一些内联css来确保你的头完全显示。在我的测试中,我在同一个目录中同时拥有header. html和prova. html,所以我不使用文件路径。调整宽度和高度,使其与prova页面上显示的其余信息相匹配:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Cate Cinema</title>
  <link rel="stylesheet" href="../page_film/page_film.css">
</head>
  <body>
<!--     <include src="../header/header.html"></include> -->
<iframe  marginwidth="0" marginheight="0" frameborder="0" style="width:325px;height:550px;"  src="header.html"></iframe>
  </body>
</html>

字符串

相关问题