English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The HTML content template (<template>) element is a mechanism for saving client content, which is not rendered when the page is loaded but can be instantiated at runtime using JavaScript. Consider the template as a content fragment that can be stored in the document for later use. Although the parser does indeed process the content of the <template> element when loading the page, this is only to ensure that the content is valid; the element content will not be rendered.
Demonstrate how to use the template tag:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML template tag usage (Basic Tutorial Website oldtoolbag.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
All mainstream browsers support the <template> tag.
The <template> tag hides its content from the client.
The content inside the <template> tag will not be rendered.
You can use JavaScript to make the content visible and render it later.
When you need to use HTML code repeatedly, please use the <template> tag, but only use it when you need to. To perform this operation without the <template> tag, you must use JavaScript to create HTML code to prevent the browser from rendering the code.
<!DOCTYPE html>
<html>
<body>
<h1>HTML template tag usage (Basic Tutorial Website oldtoolbag.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 이벤트 속성。