HTML内容模板（ <template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。 将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
示范如何使用template标签:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML template标签的使用(基础教程网 xxs100.com)</title> </head> <body> <p>Content inside a template tag is hidden from the client.</p> <template> <h2>Views</h2> <img src="views.png"> </template> <p>A later example will show you how to use JavaScript to display the template content.</p> </body> </html>测试看看
IEFirefoxOperaChromeSafari
所有主流浏览器都支持 <template> 标签。
<template>标记将其内容从客户端隐藏起来。
<template>标记内的内容将不会呈现。
以后可以使用JavaScript使内容可见并呈现。
当您有要一遍又一遍地使用HTML代码时，请使用<template>标记，但是直到您要使用它时才使用。要在没有 <template>标记的情况下执行此操作，必须使用JavaScript创建HTML代码，以防止浏览器呈现代码。
<!DOCTYPE html>
<html>
<body>
<h1>HTML template标签的使用(基础教程网 xxs100.com)</h1>
<p>Click the button to get the content from a template, and display it in the web page.</p>
<button onclick="showContent()">Show content</button>
<template>
<h2>views</h2>
<img src="views.png" width="300" height="204">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
</body>
</html>测试看看<template>标签是HTML5中的新标签。
<template> 标签支持 HTML 的全局属性。
<template> 标签支持 HTML 的事件属性。