HTML内容模板( <template>)元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以(原文为 may be)在运行时使用JavaScript实例化。 将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template>元素的内容,但这样做只是为了确保这些内容有效;但元素内容不会被渲染。
在线示例
示范如何使用template标签:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML template标签的使用(大卫编程网 div.cn)</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标签的使用(大卫编程网 div.cn)</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>测试看看 ‹/›
HTML 4.01和HTML5之间的差异
<template>标签是HTML5中的新标签。
全局属性
<template> 标签支持 HTML 的全局属性。
事件属性
<template> 标签支持 HTML 的事件属性。