HTML代码复用方法及模板使用指南

本文深入解析了HTML代码复用的多种实用方案，直击导航栏等公共片段重复编写这一高频痛点，系统对比了静态站点生成器（Eleventy/Hugo/Jekyll）的include语法、纯前端fetch动态注入、Vue/React组件化、SSI服务端包含以及template标签等不同场景下的适用性与陷阱，并明确指出：没有“万能解法”，关键在于根据实际部署环境（如GitHub Pages不支持SSI、本地双击无法运行服务端逻辑）选择可控、安全且可持续维护的方式，同时避开了404加载失败、iframe隔离、document.write破坏流、fetch脚本不执行、IE兼容性及CSP限制等常见坑点。

HTML里怎么避免重复写同一段导航栏

直接复用，别复制粘贴。浏览器本身不支持原生HTML文件间包含，所以得靠构建工具、服务端渲染，或者现代前端框架的组件机制。

常见错误现象：404 加载 nav.html；用 iframe 导致样式隔离、SEO差、滚动错位；用 document.write 破坏页面流。

• 静态站点：用 eleventy、Hugo 或 Jekyll 的 include 语法，比如 {% include 'nav.html' %}
• 纯前端（无构建）：用 fetch + innerHTML 动态注入，但注意 CSP 限制和首次渲染空白
• Vue/React：把导航抽成 组件，天然复用，但需完整框架环境

script标签里用fetch加载HTML片段靠谱吗

能用，但不是万能解法。它本质是异步请求+字符串插入，绕过了HTML解析器的正常流程，容易出兼容性问题。

使用场景：小项目、原型、CMS后台等无法改构建流程的场合。

• 必须等 DOMContentLoaded 后再 fetch，否则 document.getElementById 可能找不到挂载点
• fetch('nav.html') 返回的是文本，要手动设 response.text()，不能直接当 HTML 解析
• 插入后，里面带的