Manuel de référence HTML

Toute la liste des balises HTML

HTML: <template> balise

L'élément de contenu de modèle HTML ( <template> ) est une mécanique de sauvegarde de contenu client, le contenu duquel n'est pas présenté au chargement de la page, mais peut être (l'original est 'may be') instancié en temps réel avec JavaScript. Considérez le modèle comme un fragment de contenu pouvant être stocké dans le document pour une utilisation ultérieure. Bien que l'analyseur traite effectivement le contenu de l'élément <template> au chargement de la page, cela n'est fait que pour s'assurer que ce contenu est valide ; mais le contenu de l'élément n'est pas rendu.

Exemples en ligne

Demonstration de l'utilisation de la balise template:

Exemple

<!doctype html>
<html>
<head>
<meta charset="UTF-8">-8">
<title>Utilisation des balises de modèle HTML (Tutoriel de base en ligne oldtoolbag.com)</</title>
</</head>
<body>
<p>Le contenu à l'intérieur d'une balise de modèle est caché du client.</</bouton>
<template>
　　<h2>Vues</h2>
　　<img src="views.png">
</template>
<p>Un exemple ultérieur vous montrera comment utiliser JavaScript pour afficher le contenu du modèle.</</bouton>
</body>
</html>

Voyons si ‹/›

Compatibilité des navigateurs

IEFirefoxOperaChromeSafari

Tous les navigateurs populaires prennent en charge la balise <template>.

Définition et utilisation

La balise <template> cache son contenu du client.

Le contenu à l'intérieur de la balise <template> n'est pas présenté.

Le contenu peut être rendu visible et présenté ultérieurement avec JavaScript.

Lorsque vous avez besoin d'utiliser à plusieurs reprises le code HTML, utilisez la balise <template>, mais ne l'utilisez que lorsque vous en avez besoin. Pour effectuer cette opération sans balise <template>, vous devez utiliser JavaScript pour créer le code HTML, pour éviter que le navigateur ne le présente.

Plus d'exemples en ligne

Exemple

<!DOCTYPE html>
<html>
<body>
<h1>Utilisation des balises de modèle HTML (Tutoriel de base en ligne oldtoolbag.com)</h1>
<p>Cliquez sur le bouton pour obtenir le contenu à partir d'un modèle et l'afficher dans la page web.</</bouton>
<bouton onclick="showContent()">Afficher le contenu</bouton>
<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>

Voyons si ‹/›

HTML 4.01et HTML5différences entre

Le balise <template> est un HTML5des nouvelles balises.

Attributs globaux

Le balise <template> prend en charge Attributs globaux HTML.

Attributs d'événement

Le balise <template> prend en charge Attributs d'événement HTML.

HTML: <wbr> balise