HTML模板标签使用详解
时间：2025-08-08 18:10:33 469浏览 收藏
HTML的``标签是现代Web开发的利器，它允许开发者定义页面中不会立即渲染的HTML模板，实现代码复用和延迟加载，从而优化页面性能，避免页面闪烁。本文深入解析``标签的作用、基本语法和使用方法，包括如何通过JavaScript动态插入模板内容，以及动态生成列表项的示例。同时，探讨了``与隐藏`div`的区别，强调其在性能和语义上的优势。此外，还阐述了``标签与Web Components和Shadow DOM的紧密关系，揭示其在构建可复用、封装的Web组件中的重要作用，助力开发者构建更高效、更易维护的Web应用。
HTML的标签主要作用是存储未激活的HTML内容片段。1. 它在页面加载时不被渲染或执行，保持惰性状态，直到JavaScript显式克隆并插入到DOM中；2. 与隐藏的div相比，内部的内容不会消耗资源，如加载图片或构建DOM树；3. 常用于构建可复用UI组件、延迟加载内容，并结合Web Components和Shadow DOM实现组件化开发，提供结构、样式和逻辑的封装能力。
HTML的标签主要作用是作为一种存储HTML内容片段的容器，这些内容在页面加载时并不会被浏览器渲染或执行，而是保持“惰性”状态，直到被JavaScript显式地克隆并插入到文档中。你可以把它想象成一个蓝图或者一个待命的组件骨架，随时准备被实例化。
解决方案
使用标签非常直接。你只需将需要复用或延迟加载的HTML结构包裹在标签内部。
卡片标题
这是一段卡片内容。
在上面的例子中，内部的HTML和CSS在页面加载时并不会显示出来。只有当JavaScript获取到这个模板（template.content会返回一个DocumentFragment），并将其克隆（document.importNode）然后插入到实际的DOM中时，这些内容才会被渲染和激活。这种模式对于构建可复用UI组件、延迟加载内容或在运行时动态生成大量相同结构元素非常有用。
为什么选择div？
这是一个非常常见的问题，我个人在项目里也遇到过很多次。很多人习惯用一个带有display: none;或visibility: hidden;样式的div来隐藏内容，但从性能和语义上讲，无疑是更优的选择。当一个div被隐藏时，浏览器仍然会解析它的内容，构建相应的DOM树，甚至会尝试加载其中的资源（比如标签引用的样式表）。这些操作都会消耗计算资源和网络带宽，即使这些内容最终是不可见的。
而标签内部的内容则完全是惰性的。浏览器会跳过对它的解析和渲染，不会加载内部的图片、脚本或样式表，也不会为它构建DOM树。这意味着它对页面的初始加载性能几乎没有影响。只有当你通过JavaScript明确地克隆并将其插入到活动文档中时，它才会被“激活”。这种本质的区别让成为处理大量可复用或延迟加载内容的理想选择，避免了不必要的资源浪费。从语义上说，也更清晰地表达了其内容的意图——它是一个模板，而不是一个暂时隐藏的普通元素。
是的，但你需要理解其“惰性”的本质。当你把HTML结构放在标签内部时，它里面的所有内容，包括