HTML - template 标签

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

如果我们想在 HTML 文档中多次使用相同的内容而不进行任何更改，那么我们可以使用 <template> 标签。

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

语法


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

属性

HTML 模板标签支持 HTML 的全局属性和事件属性。

<template> 标签示例

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

使用<template> 标签隐藏内容

当浏览器加载页面并使用按钮作为触发点来呈现该元素时，我们可以隐藏模板标签中的任何内容。在以下示例中，我们使用 <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> 标签隐藏图像

当浏览器加载页面并使用按钮作为触发点来呈现该元素时，我们可以隐藏模板标签中的任何内容。考虑以下示例，我们使用 <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="/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

打印本页