如何在HTML中为多个子页面添加一个统一的页眉？-PHP中文网问答

我正在开发一个导航栏系统，并想知道如何使子页面更改，但原始页面的标题仍然存在。（我正在使用repl.it，提前告知）。

我还没有在文件夹中放置任何内容。我还希望当我悬停在具有“active”类（灰色的那个）的项目上时，它不会改变颜色。

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');

html body{
  background: #0E1212;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
   font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}



li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

li a:hover {

  color: #682AE9;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


.active {
  color: #808080;
}

@keyframes example {
  0%   {color: #DBDBDB;}
  100% {color: #622cd8;)
 }

<!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="stylesheet" href="home.css">
  <script src='script.js'> </script>
  <title>Home</title>
</head>
<body>
  


</head>
<body>

<ul id='menu'>
  <li><a class="active" href="#home" id="home">.home()</a></li>
  <li><a class="inactive" href="#news">.about()</a></li>
  <li><a class="inactive" href="#contact">.stuff()</a></li>
  <li><a class="inactive" href="#about">.apply()</a></li>
</ul>
  
</body>
  
</html>