HTML模板标签使用详解
时间：2025-08-27 20:30:36 296浏览 收藏
HTML的``标签是构建可复用Web组件的关键技术。它允许开发者定义HTML代码片段，这些代码在页面加载时不会被渲染，从而优化初始加载性能。``标签内部的内容保持惰性状态，直到通过JavaScript动态克隆并插入到DOM中才会被激活。这使得``非常适合创建可复用的UI组件、延迟加载内容以及构建Web Components。与隐藏的`div`相比，``不会消耗不必要的资源，例如加载图片或构建DOM树。通过结合Custom Elements和Shadow DOM，``能够实现结构、样式和逻辑的封装，为现代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结构放在标签内部时，它里面的所有内容，包括