使用JavaScript动态加载导航栏可实现多页面复用，通过fetch读取nav.html并插入指定容器，修改一次即可全局生效，适合小站；若部署于支持SSI的服务器，可用<!--#include file="nav.html" -->在服务端嵌入，利于SEO；复杂项目推荐Vue/React组件化或静态站点生成器，结合构建工具实现高效复用，注意路径、样式隔离与性能优化。
在HTML中创建导航栏（nav）时，如果希望多个页面共用同一份导航代码，并实现修改一次、全局生效的效果，就需要解决引用与复用的问题。原生HTML不支持直接包含外部文件，但可以通过以下几种实用方法来实现导航栏的复用。
使用JavaScript动态加载导航栏
这是最常见且兼容性较好的前端方案。通过JavaScript读取一个独立的HTML文件（如 nav.html），然后将其插入到页面的指定位置。
步骤如下：
- 创建一个单独的导航文件，例如 nav.html，内容如下：
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
- 在需要引用导航的页面中，添加一个容器和脚本：
<div id="navbar"></div>
<script>
fetch('nav.html')
.then(response => response.text())
.then(data => {
document.getElementById('navbar').innerHTML = data;
})
.catch(err => console.error('加载导航失败:', err));
</script>
这样，所有页面只需复制这段脚本，就能自动加载统一的导航栏。
立即学习“前端免费学习笔记（深入）”；
利用服务器端包含（SSI）
如果你的网站部署在支持Server Side Includes（SSI）的服务器（如Apache），可以使用服务端指令包含导航文件。
确保服务器开启了SSI功能，并将页面后缀改为 .shtml，然后使用：
<!--#include file="nav.html" -->
服务器会在发送页面前把 nav.html 的内容嵌入进来。这种方法无需JavaScript，适合对SEO要求高的静态站点。
借助现代前端框架或构建工具
对于较复杂的项目，推荐使用模板引擎或构建工具实现复用：
- 使用HTML模板 + Webpack/Vite：配合 html-webpack-plugin 或类似工具，把导航作为组件引入。
- 使用Vue/React组件化开发：将导航封装为独立组件，在多个页面中导入使用。
- 静态站点生成器：如Hugo、Jekyll、Eleventy等，天然支持partials（局部模板），可轻松复用导航结构。
注意事项
无论采用哪种方式，都应注意以下几点：
- 路径问题：确保引用文件的相对路径正确，避免404错误。
- 样式隔离：导航栏的CSS建议单独管理，防止与其他元素冲突。
- 可访问性：nav 标签本身具有语义意义，有利于屏幕阅读器识别，不要用 div 替代。
- 性能优化：避免每个页面重复请求导航文件，可通过缓存减少网络开销。
基本上就这些。选择哪种方式取决于你的项目规模和技术栈。小站可用JavaScript加载，大项目建议上框架或构建工具。核心目标是：写一次，多处用，改一处，全站更。
