HTML公用模块引用
开发环境可能会遇到多个Html存在一个模块是相同的，因此在修改过程中逐一修改比较麻烦，因此把这个公用模块另外写就一个html，使用JQuery导入模块。
具体步骤：
- 创建公共 HTML 文件（例如 header.html）
- 在主 HTML 文件中引入 jQuery
- 使用 jQuery 加载公共 HTML 文件
这个场景应该是很少遇到的，毕竟只用前端三件套(js,css,html)不用框架写的还是比较少的。
一、创建公共header文件
将页面中的header模块单独copy一份，创建header.html文件
html
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>此处不需要引入css之类的样式文件，在引用的主页面的head中引用css就好了，方便管理
二、导入header模块
在main.html中导入之前创建的header模块，此处一定要导入jquery，不然会报错哈。
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网站</title>
<!-- 确保 jQuery 在自定义脚本之前加载 -->
<script defer src="/jquery.min.js"></script> #jquery导入路径
<script>
// 使用 jQuery 的 ready 方法，确保 jQuery 已加载
$(document).ready(function() {
$("#header").load("/header.html"); #header.html的导入路径
});
</script>
</head>
<body>
<div id="header"></div> #id是唯一的因此用id比较保险
<main>
<h2>欢迎访问我的网站</h2>
<p>这是一个示例页面。</p>
</main>
</body>
</html>需要确保jquery和header模块都能够正确加载到浏览器，具体可以按F12查看Source
三、可能会遇到的问题
1. "Uncaught ReferenceError: $ is not defined"
说明jquery没有导入成功，或者没有加载就被引用，需要确保 <script>的导入顺序。