HTML <template>标签
HTML <template>标签
HTML <template>标签用于保存客户端内容，该内容在页面加载时不会呈现，但是可以实例化在运行时使用JavaScript。
在未使用JavaScript激活模板之前，不会显示模板的内容。浏览器在加载页面时处理<template>元素的内容，以确保内容有效，但是不会呈现内容。
当您想在HTML文档中多次使用相同内容而不进行任何更改时，它也很有用。
<template>标签可以放置在<head>，<body>，<frameset>或<table>元素内部的任何位置。
<template>标签是HTML5中新添加的元素。
语法
<template>.........</template>
以下是有关HTML <template>标签的一些规范
| 显示 |
无 |
| 开始标签/结束标签 |
开始和结束标签 |
| 用法 |
格式化 |
示例
<!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>
输出:
属性:
标签特定的属性:
<template>标签不包含任何特定的属性。
全局属性:
<template>标签支持HTML中的全局属性。
支持浏览器
