在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> </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> </span>
<span>e</span>
<span> </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>
型
2条答案
按热度按时间s5a0g9ez1#
HTML不提供
<include>
标签,因为<include>
标签不存在,所以你为它编写的代码什么也做不了。你需要的是让你的文件都基于PHP(所以,它们需要有.php文件扩展名,而不是.html)[为什么?因为你告诉PHP尝试包含一个
header.php
文件,它不存在;你的header
文件是一个.html
文件。]然后你需要一个Web服务器进行开发。例如,你可以使用XAMPP。一旦你的服务器运行了,你需要导航到
localhost
或127.0.0.1
作为你的本地主机地址,这将是你的web目录。PHP不能执行,除非它运行在一个服务器上,但像这样的测试服务器工作正常。如果
index.php
是你想要包含某些内容的文件,你可以简单地在你想要PHP呈现它的地方写include_once
(比include
更好)语句。例如,如果你想在你的主页中包含一个导航栏文件:index.php
字符串
header.php
型
bqjvbblv2#
将一个html文件插入另一个html文件的命令是“iframe”。你尝试使用的php扩展和代码混淆了这个问题。请参阅编辑你的prova. html文件,它在你有“include”的行中被替换。我添加了一些内联css来确保你的头完全显示。在我的测试中,我在同一个目录中同时拥有header. html和prova. html,所以我不使用文件路径。调整宽度和高度,使其与prova页面上显示的其余信息相匹配:
字符串