Introduction détaillée de la balise <template> en HTML5 (image et texte)-Tutoriel H5-php.cn

Cet article présente principalement la balise de modèle en HTML5 , qui est une connaissance importante pour démarrer avec HTML5. Les amis qui en ont besoin peuvent se référer à

1. Introduction à HTML5. éléments de modèle L'élément visage

peut essentiellement être déterminé comme n'étant apparu qu'en 2013. 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 :

// ... Copier après la connexion En fait, il n'existe pas Les méthodes d'écriture standard telles que type="text/template" et l'apparence de l'élément sont destinées à rendre le modèle HTML plus standard et standardisé.

Avant, nous avons peut-être utilisé ou (obsolète mais toujours disponible) pour imbriquer du code balises HTML non échappées pour implémenter certaines fonctions frontales spécifiques, mais, encore une fois, tout comme l’usage populaire ci-dessus, ils sont tous 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 d'écriture :

Copier après la connexion 1. Caractère caché du contenu des balises

La spécificité du 🎜>, par conséquent, 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 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 de l'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 généré avec display:none. Dans le même temps, le contenu interne de l'élément de modèle ne sera pas affiché. Il n’est donc pas nécessaire de se cacher. C'est une des caractéristiques de l'élément balise HTML5 : le contenu caché de la balise

2. La position arbitraire de la balise En plus de la balise. masquage naturel des sous-éléments ci-dessus, la balise a également une fonctionnalité, qui est la position arbitraire, qui est très similaire à la balise placé dans head > ou dans

3. Invalidité des childNodes Bien qu'à l'œil nu, il semble qu'il y ait de nombreuses sous-balises dans la balise 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-éléments enfants" dans la balise Par exemple, pour obtenir le premier élément de l'image c'est :

Code CSS Copiez le contenu dans le presse-papier

var image_first = template.content.querySelector("img"); Copier après la connexion 3 . Page finale de l'élément de modèle HTML5 Vous pouvez cliquer ici : Démo de l'expérience de l'élément de modèle HTML5

Élément 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 et les balises internes seront rendues selon les balises ordinaires. 如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如 Chr ome: en HTML5 (image et texte)" >

也就是说，虽然从CSS的角度看， 就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。

默认情况下， 是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：

window.getComputedStyle(template).display; // 结果是"none" Copier après la connexion en HTML5 (image et texte)" >

因此，demo中才设置了如下的CSS声明：

CSS Code 复制内容到剪贴板

template { display: block; ... } Copier après la connexion 模板的克隆 如果你是在HTML字符串上处理，类似于现在流行的 MVC 框架 或 模板技术 ，则template.innerHTML足矣。然， 比 强大之处在于， 内部内容只能当做字符串来获取，而 虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：

CSS Code 复制内容到剪贴板

var clone = document.importNode(template.content, true); Copier après la connexion 然后，你就可以用append节点(appendChild)的方式，加载模板内容了，而不是（没得选择）append字符串加载模板内容。标题是“简介”，因此，不展开，也不放具体的实例了（若有兴趣，可参考文末的参考文章），大家知道有这么回事就好。

四、HTML5 template面试小结 至此， 元素的行为、表现以及一些方法基本上有了大致的认识，如果这是场面试的话，则我对 的评价还是挺高的，特殊场景使用的特殊利器，一些类似“异空间”的设计也是让人大开眼界，这个元素要比 之类的HTML5元素更受欢迎更受关注也更有潜力。

临近最后，放上兼容性表，IE浏览器拖了好大的后腿，不过我表示很淡定，因为对IE早已麻木！

兼容性 en HTML5 (image et texte)" >