srcmini本文概述
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="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>立即测试
输出：
属性
特定于标签的属性：
<template>标记不包含任何特定的属性。
全局属性：
<template>标记支持HTML中的Global属性。
支持的浏览器
| Element | Chrome | IE | Firefox | Opera | Safari |
| <template> | Yes | No | Yes | Yes | Yes |
评论前必须登录！
注册