HTML模板标签使用详解
时间：2025-07-20 16:44:26 256浏览 收藏
HTML的``标签是定义可复用HTML模板的利器，它在页面加载时不会渲染，而是作为存储HTML片段的容器，只有在JavaScript显式调用时才会被激活并插入到DOM中。这种延迟渲染的特性，让``在构建可复用UI组件、延迟加载内容以及优化页面性能方面表现出色。与隐藏的`div`相比，``不会消耗资源，内部的样式和脚本只有在被克隆并添加到DOM后才会生效。``是Web Components的重要组成部分，结合Custom Elements和Shadow DOM，能够构建出真正独立、可维护的UI组件，为大型应用开发提供便利。掌握``标签，能有效提升前端开发效率和代码质量。
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结构放在标签内部时，它里面的所有内容，包括