HTML的template标签有什么作用？如何使用？-html教程-PHP中文网

HTML的template标签有什么作用？如何使用？

月夜之吻

发布： 2025-07-17 13:49:01

原创

865人浏览过

html的<template>标签主要作用是存储未激活的html内容片段。1. 它在页面加载时不被渲染或执行，保持惰性状态，直到javascript显式克隆并插入到dom中；2. 与隐藏的div相比，<template>内部的内容不会消耗资源，如加载图片或构建dom树；3. <template>常用于构建可复用ui组件、延迟加载内容，并结合web components和shadow dom实现组件化开发，提供结构、样式和逻辑的封装能力。

HTML的template标签有什么作用？如何使用？

HTML的<template>标签主要作用是作为一种存储HTML内容片段的容器，这些内容在页面加载时并不会被浏览器渲染或执行，而是保持“惰性”状态，直到被JavaScript显式地克隆并插入到文档中。你可以把它想象成一个蓝图或者一个待命的组件骨架，随时准备被实例化。

解决方案

使用<template>标签非常直接。你只需将需要复用或延迟加载的HTML结构包裹在<template>标签内部。

<template id="myCardTemplate">
  <style>
    .card {
      border: 1px solid #ddd;
      padding: 15px;
      margin-bottom: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      background-color: #fff;
    }
    .card h3 {
      color: #333;
      margin-top: 0;
    }
    .card p {
      color: #666;
    }
  </style>
  <div class="card">
    <h3>卡片标题</h3>
    <p>这是一段卡片内容。</p>
    <button>点击我</button>
  </div>
</template>

<div id="container"></div>

<script>
  // 获取模板元素
  const template = document.getElementById('myCardTemplate');
  // 获取要插入内容的容器
  const container = document.getElementById('container');

  // 克隆模板内容
  // importNode的第二个参数true表示深度克隆，包括所有子节点
  const clone = document.importNode(template.content, true);

  // 修改克隆后的内容（可选）
  clone.querySelector('h3').textContent = '新生成的卡片';
  clone.querySelector('p').textContent = '这是通过JavaScript动态添加的卡片内容。';
  clone.querySelector('button').addEventListener('click', () => {
    alert('按钮被点击了！');
  });

  // 将克隆的内容添加到DOM中
  container.appendChild(clone);

  // 可以再次克隆并添加，实现复用
  const anotherClone = document.importNode(template.content, true);
  anotherClone.querySelector('h3').textContent = '另一张卡片';
  anotherClone.querySelector('p').textContent = '这是第二张卡片。';
  container.appendChild(anotherClone);
</script>

登录后复制

在上面的例子中，<template>内部的HTML和CSS在页面加载时并不会显示出来。只有当JavaScript获取到这个模板（template.content会返回一个DocumentFragment），并将其克隆（document.importNode）然后插入到实际的DOM中时，这些内容才会被渲染和激活。这种模式对于构建可复用UI组件、延迟加载内容或在运行时动态生成大量相同结构元素非常有用。

立即学习“前端免费学习笔记（深入）”；

为什么选择`<template>`而不是隐藏的`div`？

这是一个非常常见的问题，我个人在项目里也遇到过很多次。很多人习惯用一个带有display: none;或visibility: hidden;样式的div来隐藏内容，但从性能和语义上讲，<template>无疑是更优的选择。当一个div被隐藏时，浏览器仍然会解析它的内容，构建相应的DOM树，甚至会尝试加载其中的资源（比如<img>标签的图片或者<link>标签引用的样式表）。这些操作都会消耗计算资源和网络带宽，即使这些内容最终是不可见的。

而<template>标签内部的内容则完全是惰性的。浏览器会跳过对它的解析和渲染，不会加载内部的图片、脚本或样式表，也不会为它构建DOM树。这意味着它对页面的初始加载性能几乎没有影响。只有当你通过JavaScript明确地克隆并将其插入到活动文档中时，它才会被“激活”。这种本质的区别让<template>成为处理大量可复用或延迟加载内容的理想选择，避免了不必要的资源浪费。从语义上说，<template>也更清晰地表达了其内容的意图——它是一个模板，而不是一个暂时隐藏的普通元素。

eMart 网店系统

功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标

查看详情

`<template>`内容能否交互或被样式化？

是的，但你需要理解其“惰性”的本质。当你把HTML结构放在<template>标签内部时，它里面的所有内容，包括<style>标签、<script>标签、事件监听器（比如onclick属性）等，都是不活跃的。这意味着：

样式： 内部的<style>标签不会立即生效，外部样式表（通过<link>引入的）也不会被加载。只有当<template>的内容被克隆并添加到页面的实时DOM中后，这些样式才会被应用，内部的<style>标签也会开始影响其作用域内的元素，而外部样式表则会被浏览器加载并解析。当然，全局的CSS规则在内容被添加到DOM后，自然也会作用于这些元素。
脚本： 放在<template>内部的<script>标签在模板未被激活前是不会执行的。这是一个非常强大的特性，因为它允许你延迟加载和执行脚本，直到它们真正需要的时候。同样，任何通过HTML属性（如onclick）定义的事件处理器也不会在模板中被激活，它们只会在克隆后的元素被插入到DOM中后才开始监听事件。

我个人在处理复杂组件时，经常利用<template>来存放组件的HTML结构和内部样式，然后通过JavaScript在组件被实例化时将这些内容“激活”并挂载到Shadow DOM中，这样可以更好地实现样式和逻辑的封装。这种延迟加载和激活的机制，正是<template>在构建高性能Web应用中不可或缺的原因。

`<template>`与Web Components和Shadow DOM的关系是什么？

<template>标签是Web Components三大核心技术之一（另外两个是Custom Elements和Shadow DOM）的基石。它们三者协同工作，为我们提供了在浏览器中构建可复用、封装的组件的能力，这在以前通常需要依赖大型JavaScript框架才能实现。

Custom Elements（自定义元素） 允许你定义自己的HTML标签，比如<my-custom-component>。当你定义一个自定义元素时，通常会在其类的构造函数中，从一个<template>中获取HTML结构。
Shadow DOM（影子DOM） 提供了一种将DOM和CSS封装在组件内部的方式，使其与主文档的DOM和CSS隔离。这解决了组件样式泄漏或被外部样式污染的问题。而<template>的内容，正是经常被克隆并附加到自定义元素的Shadow DOM根节点上的。

想象一下这个工作流程：你首先在<template>里定义了你的组件的视觉结构和内部样式。然后，你创建一个Custom Element，在这个自定义元素的生命周期方法（比如connectedCallback）中，你获取这个<template>的内容，克隆它，然后将克隆出来的DocumentFragment附加到该自定义元素的Shadow DOM上。这样，你的组件就拥有了独立的HTML结构、独立的样式作用域，并且其内部的逻辑（通过<script>或事件监听器实现）只在组件被添加到页面时才被激活。

在我看来，<template>是实现“组件化”概念的真正原生HTML支持。它提供了一个干净、高效的方式来声明组件的UI模板，而无需在JavaScript中手动构建复杂的DOM结构或拼接HTML字符串。结合Custom Elements和Shadow DOM，我们能够构建出真正独立、可维护、可复用的UI组件，这对于大型应用开发和团队协作来说，是极大的福音。

以上就是HTML的template标签有什么作用？如何使用？的详细内容，更多请关注php中文网其它相关文章！