淘先锋技术网

首页 1 2 3 4 5 6 7

每个html重复的代码

在网页制作中，我们通常会发现一个问题，那就是每个html页面都需要重复的代码，这些代码包括头部信息、底部信息、导航栏等等。为了避免在每个网页中重复输入这些代码，我们可以将这些重复的代码单独提取出来，然后在需要的网页中引用。


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <link rel="stylesheet" href="style.css">
  <!-- 网页头部公共代码 -->
  <link rel="shortcut icon" href="favicon.ico">
  <meta name="keywords" content="关键词">
  <meta name="description" content="网页描述">
</head>
<body>
  <!-- 网页导航栏公共代码 -->
  <nav>
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
    </ul>
  </nav>
  
  <div class="content">
    <p>页面内容</p>
  </div>
  
  <!-- 网页底部公共代码 -->
  <footer>
    <p>版权信息等等</p>
  </footer>
</body>
</html>

每个html重复的代码

如上面的代码所示，我们可以把头部信息、导航栏和底部信息单独提取出来，然后在每个需要引用的页面中使用<include>等命令引用即可。这种做法可以避免我们在每个页面中都重复写入相同的代码，大大减少了代码量，也更易于维护。

需要注意的是，如果我们缺少公共代码引用的语句或者引用的文件不存在，那么程序就会抛出相应的错误。所以我们在使用公共代码的时候，一定要保证引用的语句和文件都是正确的。