HTML template标签

本文概述

属性
支持的浏览器

HTML <template>标记用于保存在页面加载时不会呈现的客户端内容, 但是可以在运行时使用JavaScript实例化它。

除非未使用JavaScript激活模板的内容, 否则不会显示该模板的内容。浏览器在加载页面时处理<template>元素的内容, 以确保内容有效, 但是不会呈现内容。

当你想在HTML文档中多次使用相同内容而不进行任何更改时, 它也很有用。

<template>标签可以放置在<head>, <body>, <frameset>或<table>元素内部的任何位置。

<template>标签是HTML5中新添加的元素。

句法

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

以下是有关HTML <template>标记的一些规范

Display	None
开始日期/结束日期	开始和结束标签
Usage	Formatting

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Template tag</title>
<style>
body{
  background-color: #e6e6fa;
}
</style>
</head>
<body>
  <h2>Example of template tag</h2>
  <button onclick="clickMe()">Click Me</button><br>
  
 <template id="mytemplate">
   <img src="bird.jpg" alt="bird's image" height="100" width="100">
   <script>
   alert("Thank you for choosing template. Click OK for image.")
   </script>
  </template>

<script>
   function clickMe() {
    var x= document.getElementsByTagName("template")[0];
    var clon = x.content.cloneNode(true);
    document.body.appendChild(clon);}
</script>
</body>
</html>

立即测试

输出：