Explication détaillée de la balise <template> dans les compétences du didacticiel HTML5

1. Premier aperçu des éléments du modèle HTML5

Il est fondamentalement certain que l'élément A quoi sert-il ? Comme son nom l'indique, il est utilisé pour déclarer qu'il s'agit d'un « élément de modèle ».

Actuellement, nous intégrons le modèle HTML dans HTML, qui s'écrit souvent ainsi :

Code XML/HTML Copier le contenu dans le presse-papiers script type = "texte/modèle" > // ... script > En fait, il n'existe pas de manière standard d'écrire type="text/template". L'apparence de l'élément est destinée à rendre le modèle HTML plus standard et standardisé.

Dans le passé, nous avons peut-être utilisé ou (obsolète mais toujours disponible) pour imbriquer les codes de balises HTML non échappées afin d'obtenir certaines fonctions frontales spécifiques, mais, encore une fois, les mêmes que ci-dessus. l'usage est le même, les deux sont irréguliers. En termes de tendances futures, il est évident que la balise est la voie à suivre. Cependant, la compatibilité est un problème qui ne peut être ignoré. Par conséquent, même si l’on parle beaucoup, la valeur réelle est limitée, voici donc juste une brève introduction. 2. Duplication des éléments du modèle HTML5

Regardez les quatre images HTML imbriquées suivantes. En même temps, le contenu de l'image n'est pas affiché et il n'y a aucune demande :

Code XML/HTML Copier le contenu dans le presse-papiers script type = "texte/modèle" > img src = "mm1. jpg" > script > textarea style = "affichage : aucun;" > img src = "mm1. jpg" > zone de texte > xmp style = "affichage : aucun;" > img src = "mm1. jpg" > xmp > modèle > img src = "mm1. jpg" > modèle > 1. Caractère caché du contenu des balises

La spécificité de permet de traiter les balises HTML internes comme des chaînes, donc le contenu généré n'est pas affiché. Cependant, dans DreamWeaver, cette méthode d'écriture a un gros problème, c'est-à-dire que lors de l'écriture d'un modèle HTML dans un script, la balise automatiquement fermée est toujours , ce qui est très ennuyeux. est une zone de texte, et le fragment HTML imbriqué à l'intérieur sera utilisé comme valeur de la zone de texte. Cependant, le champ de texte lui-même est visible, des paramètres supplémentaires sont donc requis display : none; est un attribut très ancien et spécial avec la sémantique d'exemple. On dit qu'il a ensuite été remplacé et aboli par la balise . En fait, actuellement, tous les navigateurs le prennent en charge. Cependant, il ne peut pas être assimilé à la balise Il y a une balise à l'intérieur de , qui affiche une image, tandis que affiche un morceau de code HTML. Cependant, comme , si le contenu n'est pas affiché, des paramètres supplémentaires display: none; sont requis. Display: none; n'est pas défini sur la balise Pourquoi? Cela profite simplement des caractéristiques originales de l'élément de balise , qui est né avec display:none. En même temps, le contenu interne de l'élément modèle ne sera pas affiché. Il n’est donc pas nécessaire de se cacher. C'est l'une des caractéristiques de l'élément de balise HTML5 : le masquage du contenu de la balise.

2. Arbitraire de la position de la balise En plus du masquage naturel des sous-éléments , qui est très similaire à ou peut être dans , ou dans

3. Invalidité des childNodes Bien qu'il semble à l'œil nu qu'il y ait de nombreuses sous-balises dans la balise , ce type de pensée inertielle n'est pas applicable ici. En supposant que la variable template est une balise DOM que nous avons obtenue (elle contient beaucoup de code HTML), vous constaterez que template.childNodes est vide. Nous pouvons utiliser template.innerHTML pour obtenir le fragment HTML complet. Si vous devez obtenir des "pseudo-éléments enfants". Il existe un moyen, OK, gardez les yeux ouverts et utilisez l'attribut content.

template.content renverra un fragment de document, que vous pouvez comprendre comme un autre document. Ensuite, vous pouvez utiliser certaines API de requête sous le document pour obtenir les "pseudo-sous-éléments" dans la balise Par exemple, pour obtenir le premier élément de l'image c'est :

Code CSS Copier le contenu dans le presse-papiers var image_first = template. content .querySelector( "img" ); 3. Page finale de l'élément de modèle HTML5

Vous pouvez cliquer ici : Démo d'expérience d'élément de modèle HTML5

Éléments de modèle et CSS Si le navigateur est aveugle et pense que est un élément personnalisé ordinaire, l'affichage ressemblera à ce qui suit, les balises internes sont rendues comme des balises normales .

Si le navigateur évolue avec son temps, l'affichage sera le suivant, avec son propre rendu CSS, et les balises internes seront directement rendues dans différents espaces, comme Chrome :

En d'autres termes, bien que du point de vue du CSS, soit un élément ordinaire qui concurrence le CSS, mais du point de vue du HTML, il ressemble au Sharingan d'Obito, qui permet de transférer les balises internes dans un autre l'espace, les taches de sang sont aussi rares que la limite.

Par défaut, est masqué et son attribut d'affichage n'est en fait aucun par défaut. Utilisez le code suivant pour tester et vous saurez :

window.getComputedStyle(template).display; // Le résultat est "aucun"

Par conséquent, l'instruction CSS suivante est définie dans la démo :

Code CSS Copier le contenu dans le presse-papiers modèle { affichage : bloc ... } Clone de modèle Si vous utilisez des chaînes HTML, similaires au framework MVC ou à la technologie de modèle désormais populaire, template.innerHTML est suffisant. Bien sûr, est plus puissant que dans la mesure où le contenu interne de ne peut être obtenu que sous forme de chaîne, et bien que par nœuds (l'affichage ci-dessus), et un clone complet, la syntaxe est similaire à la suivante :

Code CSS Copier le contenu dans le presse-papiers var clone = document.importNode(template. content , true); Ensuite, vous pouvez utiliser le nœud append (appendChild) pour charger le contenu du modèle au lieu (pas de choix) d'ajouter une chaîne pour charger le contenu du modèle. Le titre est "Introduction", donc je ne m'étendrai pas dessus et n'inclurai pas d'exemples spécifiques (si vous êtes intéressé, vous pouvez vous référer à l'article de référence à la fin de l'article. C'est bien que tout le monde le sache). une chose existe. 4. Résumé du modèle HTML5 d'entretien À ce stade, j'ai essentiellement une compréhension générale du comportement, des performances et de certaines méthodes de l'élément scénarios spéciaux. Des outils spéciaux, certaines conceptions similaires à "espace différent" sont également révélatrices. Cet élément est plus populaire, plus concerné et a plus de potentiel que les éléments HTML5 tels que . Vers la fin, j'ai mis en place le tableau de compatibilité. Le navigateur IE était un gros obstacle, mais j'étais très calme car j'étais déjà insensible à IE !

Compatibilité