HTML: <template> 标签

HTML内容模板（ <template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

在线示例

示范如何使用template标签:

示例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML template标签的使用(菜鸟教程 (cainiaojc.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标签的使用(菜鸟教程 (cainiaojc.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>

测试看看 ‹/›

HTML 4.01和HTML5之间的差异

<template>标签是HTML5中的新标签。

全局属性

<template> 标签支持 HTML 的全局属性。

事件属性

<template> 标签支持 HTML 的事件属性。

HTML: <wbr> 标签

查看更多关于 HTML: <template> 标签的详细内容...