我有一个有许多子页面的HTML网站，当我想更新导航时，我必须复制并粘贴到 <nav> 标签在不同的文档中使用了50多次。有什么办法可以让我创建一个html文件来保存我的导航，每当我更新该文档时，它就会更新我所有页面上的导航？
EDIT:
我试了一些PHP，但不能让它工作。有什么问题吗？
nav.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<?php echo "<img id="logo" src="logo.png" alt="logo" height="100" width="100">
<a href="index.html"><button class="navbutton">Home</button></a>
<a href="about.html"><button class="navbutton">About Me</button></a>
<button onclick="sixthGrade()" class="navbutton">6th Grade</button>
<div class="dropdown">
<button class="dropbtn">7th Grade</button>
<div class="dropdown-content">
<a href="english7.html">ELA</a>
<a href="geography.html">World Geography</a>
<a href="science7.html">Science</a>
<a href="multimedia.html">Multimedia</a>
<a href="woods.html">Woodshop</a>
<a href="algebra1.html">Algebra 1</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">8th Grade</button>
<div class="dropdown-content">
<a href="multimedia2.html">Multimedia</a>
<a href="woods2.html">Woodshop</a>
<a href="amerhistory.html">American History</a>
<a href="geometry.html">Geometry</a>
<a href="english8.html">ELA</a>
<a href="science8.html">Science</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">9th Grade</button>
<div class="dropdown-content">
<a href="algebra2.html">Honors Algebra 2</a>
<a href="english9.html">English 9</a>
<a href="vidprod.html">Video Production</a>
<a href="webdesign.html">Web Design</a>
<a href="biology.html">Biology</a>
<a href="worldhistory.html">World History</a>
<a href="pltwied.html">PLTW IED</a>
<a href="photography.html">Photography</a>
<a href="pe.html">PE</a>
<a href="hchem.html">Honors Chemistry</a>
<a href="covid.html">COVID-19 Blog</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Social</button>
<div class="dropdown-content">
<a onclick="instagram()"><img class="social" src="instagram.png" alt="Instagram logo"></a>
<a onclick="twitter()"><img class="social" src="twitter.png" alt="Twitter logo"></a>
<a onclick="youtube()"><img class="social" src="youtube.png" alt="YouTube logo"></a>
<a onclick="vimeo()"><img class="social" src="vimeo.png" alt="Vimeo logo"></a>
</div>
</div>";>
</body>
</html>
索引.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="alex.css">
<title>Alex's Website || Home</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta property="og:title" content="Alex's Website" />
<meta property="og:image" content="splash.jpg" />
<script>
if (screen.width <= 800) {
window.location = "http://m.amgutowski.com";
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<nav>
<?php include 'nav.php';?>
</nav>
<h2>Welcome To My Website!</h2>
<br>
<p>Welcome to my website. This took me about 3 days to create originally, and I'm still adding to it.
Feel free to look around, and have fun!</p>
<br>
<footer>
Copyright © 2020 Alex Gutowski <br>
<a href="mailto:[email protected]">[email protected]</a> <br>
All Rights Reserved
</footer>
</div>
</div>
</body>
</html>
如果你不想使用像PHP这样的服务器端解决方案，我认为你可以试试这个。加载HTML文件内容到Div [不使用iframe] 。
你可以很容易地创建一个nav.html，并使用JavaScript将其加载到你的页面中。
问好，Jonas
欢迎来到社区。今后，试着分享一些代码，让别人可以用它来学习:)。
完全可以减少你的重复问题。简单的语言是PHP。只需在PHP文件中创建标签，然后用一个 include 在需要的地方显示它。这样你只需要更新一个文件。
更多阅读请点击这里 W3Schools - PHP包括
希望这能帮到你！如果你考虑在你的HTML中加入服务器端脚本，那会更容易。
<html>
<body>
<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>
</body>
</html>
如果你考虑在你的HTML中加入服务器端脚本，可能会变得更容易。
links.php --
<?php
page1 = "https://link";
page2 = "https://link2";
?>
anyotherpage --
<?php require 'links.php';
?><!DOCTYPE html>
<html>
<head></head>
<body>
Click here : <?php echo page1; ?>
</body>
</html>```