HTML5模板结构复用核心在于可插拔、可维护并融入构建流程，而非仅用<template>标签封装；需结合JavaScript动态实例化、Web Components封装、构建工具预合并或模板引擎include实现真正复用。
HTML5 中模板结构复用的核心不是“多写几个 <template>”，而是让模板真正可插拔、可维护、能参与构建流程。光把代码包进 <template> 标签里，不配合 JS 渲染或构建处理，它只是个静态容器，根本不会自动复用。
用 <template> + JavaScript 动态实例化
<template> 本身不渲染，必须靠 JS 克隆并插入 DOM。适合小规模、运行时动态生成的场景，比如列表项、弹窗内容、表单片段。
- 把结构写在
<template id="card">里，语义清晰、不干扰初始渲染 - 用
document.getElementById('card').content.cloneNode(true)安全复制，避免重复 ID 或事件残留 - 配合
<slot>实现内容分发，例如：<my-card><h3 slot="title">标题</h3><p slot="desc">描述</p></my-card>（需搭配 Custom Element） - 注意：不要在
DOMContentLoaded前执行克隆，否则content可能为空
结合 Web Components 封装成自定义标签
这是原生、可跨项目复用的方案。把模板 + 样式 + 行为打包成一个独立组件，比如 <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，但要注意编译时机和上下文绑定 - 优势是构建时校验路径、报错明确；劣势是前端无法直接双击打开调试
