应根据部署环境选择复用方式：静态站点用Eleventy/Hugo/Jekyll的include语法；纯前端无构建时用fetch+DOMContentLoaded动态注入；Vue/React用组件机制；SSI仅在服务端启用且配置正确时有效。
HTML里怎么避免重复写同一段导航栏
直接复用，别复制粘贴。浏览器本身不支持原生HTML文件间包含，所以得靠构建工具、服务端渲染，或者现代前端框架的组件机制。
常见错误现象：404 加载 nav.html；用 iframe 导致样式隔离、SEO差、滚动错位；用 document.write 破坏页面流。
- 静态站点：用
eleventy、Hugo或Jekyll的 include 语法，比如{% include 'nav.html' %} - 纯前端（无构建）：用
fetch+innerHTML动态注入，但注意 CSP 限制和首次渲染空白 - Vue/React：把导航抽成
<NavBar>组件，天然复用，但需完整框架环境
script标签里用fetch加载HTML片段靠谱吗
能用，但不是万能解法。它本质是异步请求+字符串插入，绕过了HTML解析器的正常流程，容易出兼容性问题。
使用场景：小项目、原型、CMS后台等无法改构建流程的场合。
立即学习“前端免费学习笔记（深入）”；
- 必须等
DOMContentLoaded后再 fetch，否则document.getElementById可能找不到挂载点 -
fetch('nav.html')返回的是文本，要手动设response.text()，不能直接当 HTML 解析 - 插入后，里面带的
<script>不会自动执行，需手动eval或创建script标签（有安全风险） - IE11 不支持
fetch，得配whatwg-fetchpolyfill
HTML5的template标签能用来复用吗
不能直接复用，它是占位容器，内容默认不渲染也不解析，得配合 JS 手动克隆和插入。
参数差异：和 script type="text/template" 类似，但语义更清晰、浏览器原生支持。
- 适合单页内多次渲染相同结构，比如表格行、弹窗模板
- 写法示例：
<template id="card"><div class="card"><slot></slot></div></template> - JS 调用：
document.importNode(template.content, true)，注意第二个参数为true才深拷贝 - 缺点：无法跨文件，每次都要在当前 HTML 里定义，不适合全局 UI 片段
为什么include指令在纯HTML中不生效
因为标准浏览器根本不解析 <!--#include file="header.html"--> 这类 SSI（Server Side Includes）语法——它只在 Apache/Nginx 开启 SSI 模块且文件后缀为 .shtml 时才由服务器处理。
常见错误现象：页面上直接显示那段注释文字；或返回 500 错误，提示 SSI 未启用。
- 本地双击打开
index.html：SSI 完全无效，连 HTTP 协议都没有 - 用
python -m http.server启服务：默认也不支持 SSI，得换ssi-server或其他支持模块 - 真实部署时，Nginx 需配置
ssi on;，Apache 需Options +Includes和AddType text/html .shtml
真正容易被忽略的是：复用从来不是“选一个最酷的方法”，而是看你的部署链路是否可控——静态托管平台（如 GitHub Pages、Vercel）基本不支持 SSI，这时候硬上只会卡在第一步。
