答案：HTML5的<template>标签用于定义不渲染的HTML模板，通过JavaScript克隆其content属性可动态插入DOM，具有性能好、结构清晰、易于维护等优势，适用于列表、卡片、模态框等动态内容场景。
HTML5 的 <template> 标签是一个非常实用的功能，用于定义页面中暂时不渲染的 HTML 模板内容。这些内容可以是将来通过 JavaScript 动态插入到页面中的结构，比如列表项、卡片、模态框等。它不会在页面加载时显示，也不会影响页面布局和性能。
template 标签的基本用法
<template> 标签包裹的内容默认处于“休眠”状态，浏览器不会渲染其中的内容，即使它包含 img、script 等元素也不会加载或执行。
示例：<template id="user-card">
<div class="card">
<h3></h3>
<p>年龄：<span></span></p>
</div>
</template>
上面这段代码定义了一个用户卡片模板，但页面上不会显示它。
通过 JavaScript 使用 template 内容
要使用模板内容，需要用 JavaScript 获取模板元素，并将其内容（.content）克隆后插入到 DOM 中。
立即学习“前端免费学习笔记（深入）”；
常见操作步骤：
- 获取 template 元素
- 克隆其 .content 属性（文档片段）
- 修改内容中的文本、属性等
- 将克隆的内容添加到页面指定容器中
const template = document.getElementById('user-card');
const container = document.getElementById('container');
// 克隆模板内容
const clone = template.content.cloneNode(true);
// 修改内容
clone.querySelector('h3').textContent = '张三';
clone.querySelector('span').textContent = '25';
// 插入到页面
container.appendChild(clone);
这样就能动态生成一个用户卡片，且不影响初始页面结构。
template 的优势与适用场景
使用 <template> 标签有以下几个优点：
- 性能好：模板内容不会被解析执行，节省资源
- 结构清晰：将可复用的 DOM 结构集中管理
- 避免内联字符串拼接：相比用字符串写 HTML，更易维护
- 支持复杂结构：可包含样式、脚本（带 defer）、图片等
适合用于：动态列表渲染、组件化结构、表单项重复添加、模态框内容等场景。
基本上就这些。template 标签不复杂但容易忽略，合理使用能让前端代码更整洁高效。
