html5模板结构复用核心在于可插拔、可维护并融入构建流程，而非仅用标签封装；需结合javascript动态实例化、web components封装、构建工具预合并或模板引擎include实现真正复用。

HTML5 中模板结构复用的核心不是“多写几个 <template></template>”，而是让模板真正可插拔、可维护、能参与构建流程。光把代码包进 <template></template> 标签里，不配合 JS 渲染或构建处理，它只是个静态容器，根本不会自动复用。

用 <template></template> + JavaScript 动态实例化

<template></template> 本身不渲染，必须靠 JS 克隆并插入 DOM。适合小规模、运行时动态生成的场景，比如列表项、弹窗内容、表单片段。

• 把结构写在 <template id="card"></template> 里，语义清晰、不干扰初始渲染
• 用 document.getElementById('card').content.cloneNode(true) 安全复制，避免重复 ID 或事件残留
• 配合 <slot></slot> 实现内容分发，例如：<my-card><h3 slot="title">标题</h3> <p slot="desc">描述</p></my-card>（需搭配 Custom Element）
• 注意：不要在 DOMContentLoaded 前执行克隆，否则 content 可能为空

结合 Web Components 封装成自定义标签

这是原生、可跨项目复用的方案。把模板 + 样式 + 行为打包成一个独立组件，比如 <site-header></site-header>，全局注册一次， anywhere 都能直接写标签调用。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 使用 customElements.define() 注册，内部用 shadowRoot.appendChild(template.content.cloneNode(true)) 渲染
• 通过 attributeChangedCallback 响应属性变化，实现数据驱动更新
• Shadow DOM 天然隔离样式，避免 CSS 冲突，特别适合 UI 组件库级复用
• 缺点是兼容性需考虑（IE 不支持），但现代项目基本无压力

构建阶段预合并 HTML 片段（推荐用于静态/半静态站点）

不依赖浏览器运行时，而是在开发或打包时，把分散的 header.html、footer.html 等自动拼进主页面。输出仍是标准 HTML，零额外加载、零 JS 依赖。

• Webpack 用 html-webpack-plugin + posthtml-include
• Vite 用 vite-plugin-html 或 rollup-plugin-posthtml
• 纯前端本地开发可用 Live Server 插件配合 w3-include-html（仅调试，勿上生产）
• 关键点：路径必须相对且稳定，如 <div w3-include-html="components/header.html"></div>，且需引入 w3.js

模板引擎（服务端或 SSG 场景更稳妥）

当页面由后端渲染或静态站点生成器（如 Hugo、Eleventy）构建时，用模板引擎做 include 最自然、最可靠。

• Pug/Nunjucks 支持 include 'header.pug'，语法简洁，天然支持变量和逻辑
• Handlebars 用 {{> header}} 加载 partial，但要注意编译时机和上下文绑定
• 优势是构建时校验路径、报错明确；劣势是前端无法直接双击打开调试

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！