template标签用于定义可复用但不立即渲染的HTML结构，支持任意合法HTML元素且内容默认不执行；常用于列表项渲染、模态框预定义、Web Components等场景，通过JavaScript克隆content属性实现动态插入，提升代码可维护性与性能。
HTML 中的 template 标签用于定义一段可复用但不会在页面加载时立即渲染的内容。它常用于动态插入 DOM 的结构，比如通过 JavaScript 实例化模板内容。下面介绍其内容格式规范和典型使用场景。
模板内容格式规范
template 标签内的内容可以包含任意合法的 HTML 结构，但需遵循以下格式规范：
- 内容默认不渲染：浏览器解析时会读取内容，但不会执行脚本、加载图片或触发资源请求。
- 支持嵌套结构：可在 template 内放置 div、ul、table、svg 等复杂结构。
- 允许包含 script 和 style：但内部脚本不会自动执行，样式只在手动插入后才可能生效。
- 必须闭合标签：所有元素都应正确闭合，保持语法合法。
- 避免 ID 冲突：模板中的 id 属性应在插入前处理，防止重复 ID 出现。
<template id="user-card">
<div class="card">
<img src="" alt="Avatar" class="avatar">
<h3 class="name"></h3>
<p class="email"></p>
</div>
</template>
典型使用场景
template 标签适用于需要动态生成相同结构内容的场景，提升代码可维护性和性能。
- 列表项批量渲染：如用户列表、商品卡片等，通过 JS 克隆模板并填充数据。
- 模态框（Modal）结构预定义：提前写好弹窗结构，按需插入并显示。
- Web Components 配合使用：在自定义组件中作为 Shadow DOM 的内容源。
- 表格行动态添加：新增表格行时克隆 template 中的 tr 结构，避免拼接字符串。
- 减少重复 HTML 代码：避免在 JS 中用字符串拼接大量 HTML，提高可读性。
JavaScript 操作方式
通过 DOM API 获取 template 内容并克隆使用：
立即学习“前端免费学习笔记（深入）”；
const template = document.getElementById('user-card');
const clone = template.content.cloneNode(true);
clone.querySelector('.name').textContent = '张三';
clone.querySelector('.email').textContent = 'zhangsan@example.com';
document.body.appendChild(clone);
cloneNode(true) 可深度复制模板内容，之后可自由修改并插入文档。
基本上就这些。template 标签虽不起眼，但在构建动态页面时非常实用，尤其适合解耦结构与逻辑。
