HTML Reference Manual

HTML 标签大全

HTML: <template> etiqueta

O elemento de conteúdo de modelo HTML ( <template> ) é um mecanismo para salvar o conteúdo do cliente, que não é renderizado ao carregar a página, mas pode ser instanciado usando JavaScript no tempo de execução. Considere o modelo como um fragmento de conteúdo que pode ser armazenado no documento para uso posterior. Embora o parser realmente processe o conteúdo do elemento <template> ao carregar a página, isso é apenas para garantir que o conteúdo seja válido; o conteúdo do elemento não será renderizado.

Exemplos online

Demonstração de como usar a tag template:

Exemplo

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Uso do tag HTML template (Tutorial Básico oldtoolbag.com)</p>/</title>
</</head>
<body>
<p>O conteúdo dentro da tag de modelo está oculto do cliente.</p>/</button>
<template>
　　<h2>Visões</p>/h2>
　　<img src="views.png">
</template>
<p>Um exemplo posterior mostrará como usar JavaScript para exibir o conteúdo do modelo.</p>/</button>
</body>
</html>

Teste para ver ‹/›

Compatibilidade de navegadores

IEFirefoxOperaChromeSafari

Todos os navegadores principais suportam a tag <template>.

Definição e uso

A marcação <template> oculta seu conteúdo do cliente.

O conteúdo dentro da marcação <template> não será renderizado.

No futuro, você pode usar JavaScript para tornar o conteúdo visível e renderizável.

Quando você precisar usar o código HTML várias vezes, use a marcação <template>, mas só quando precisar dela. Para fazer isso sem a marcação <template>, é necessário usar JavaScript para criar o código HTML, para evitar que o navegador o renderize.

Mais exemplos online

Exemplo

<!DOCTYPE html>
<html>
<body>
<h1>Uso do tag HTML template (Tutorial Básico oldtoolbag.com)</p>/h1>
<p>Clique no botão para obter o conteúdo de um modelo e exibi-lo na página da web.</p>/</button>
<button onclick="showContent()">Mostrar conteúdo</button>/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>

Teste para ver ‹/›

HTML 4.01e HTML5diferenças entre

O <template> etiqueta é HTML5novo etiqueta dentro de

Atributos globais

O <template> etiqueta suporta Atributos globais do HTML.

Atributos de eventos

O <template> etiqueta suporta Atributos de eventos do HTML.

HTML: <wbr> etiqueta