HTML template标签 HTMLtemplate标签|HTML5

本文概述

属性
支持的浏览器

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="http://www.srcmini.com/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>

立即测试
输出：