HTML - <template> 标签

HTML <template> 标签是一种机制，用于保存一些 HTML 或客户端内容，在页面加载时对用户隐藏。浏览器在加载页面时会评估 <template> 标签的内容以确保其有效性；但是，内容不会显示。除非使用 JavaScript 激活，否则模板的内容不会显示。

如果我们希望在 HTML 文档中多次使用相同的内容而无需任何更改，则可以使用 <template> 标签。

<template> 标签可以在 HTML 文档中的任何位置使用，例如在 <head>、<body>、<frameset> 或 <table> 元素中。

语法

<template>.....</template>

属性

HTML 模板标签支持 HTML 的全局和事件属性。它还接受一个特定的属性，如下所示。

HTML 模板标签示例

以下示例将说明模板标签的使用，何时、何地以及如何使用它来隐藏触发点后面的元素。

使用模板标签隐藏内容

当浏览器加载页面时，我们可以隐藏模板标签内的任何内容，并使用按钮作为触发点来稍后呈现该元素。在以下示例中，我们使用 <template> 标签在页面加载时保存内容，稍后我们使用 JavaScript 显示隐藏的内容。

<!DOCTYPE html>
<html>
<body>
   <h1>The template Element</h1>
   <p>
       When you click the button below, JavaScript is activated,
       and hidden content will become visible!
   </p>
   <button onclick="showContent()">Show hidden content</button>
   <template>
      <h2>Tutorialspoint</h2>
      <p>Tutorialspoint: 
        <q>
            is an EdTech organisation that provides courses 
            related to CSE and so many tutorials and DSA solutions.
        <q>
      </p>
      <p>Easy to learn!</p>
   </template>
   <script>
      function showContent() {
         let temp = document.getElementsByTagName("template")[0];
         let clon = temp.content.cloneNode(true);
         document.body.appendChild(clon);
      }
   </script>
</body>
</html>

使用模板标签隐藏图片

当浏览器加载页面时，我们可以隐藏模板标签内的任何内容，并使用按钮作为触发点来稍后呈现该元素。考虑以下示例，我们使用 <template> 标签在页面加载时隐藏图片，稍后我们使用 JavaScript 显示隐藏的内容。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Template tag</title>
</head>
<body>
   <h2>Example of template tag</h2>
   <button onclick="clickMe()">Click Me</button>
   <br>
   <template id="mytemplate">
      <img src="https://tutorialspoint.com/images/logo.png?v2" alt="logo">
      <script>
      alert("Thank you for choosing template. Click OK for tutorialspoint Logo.")
      </script>
   </template>
   <script>
      function clickMe() {
         var x = document.getElementsByTagName("template")[0];
         var clon = x.content.cloneNode(true);
         document.body.appendChild(clon);
      }
   </script>
</body>
</html>

支持的浏览器

标签
template	是 26.0	是 13.0	是 22.0	是 8.0	是 15.0

html_tags_reference.htm

打印页面