多页面公用头部---通过js的.load()方法加载页面头部文件（header.html）

本文链接：https://blog.youkuaiyun.com/qq_41459772/article/details/128559227

该文档展示了一个基础的HTML网页结构，包括引入外部CSS样式表和JavaScript文件。页面主要元素是头部，包含网站Logo、导航菜单和登录/注册按钮。使用jQuery加载头部HTML模板，实现动态加载效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/ecological.css">
</head>
<body>
<!------------- 头部 ----------------->
<div id="header_box"></div>
<!---------  页面主内容  ------------->
<div ></div>

 <script src="./js/jquery.min.js"></script>
<!--引入头部-->
<script src="./js/public.js"></script>
</body>
</html>

头部文件 (图片路径和文件路径为绝对路径)

<header>
    <a href="/" class="img-logo">
        <img src="img/public/logo.png" alt="">
        <span class="logo-word">iuems</span>
    </a>
    <div class="header-right">
        <ul class="nav-items">
            <li class="nav-item">
                <a href="home.html">首页</a>
            </li>
            <li class="nav-item">
                <a href="ecological.html">生态模型</a>
            </li>
            <li class="nav-item">
                <a href="artificial.html">人工智能</a>
            </li>
        </ul>
        <div class="login-bt">
            <img src="img/public/user.png" alt="">
            <span>登录/注册</span>
        </div>
    </div>
</header>

引入头部的public.js文件

//加载头部
$("#header_box").load("./public/header.html", function() {});