Detaillierte Einführung des <template>-Tags in HTML5 (Bild und Text)-H5-Tutorial-php.cn

In diesem Artikel wird hauptsächlich das Template-Tag in HTML5 vorgestellt. Dies ist ein wichtiges Wissen für den Einstieg in HTML5. Freunde, die es benötigen, können sich auf

1. Einführung beziehen HTML5-Vorlagenelemente Das Element Gesicht

d477f9ce7bf77f53fbcf36bec1b69b7a ist grundsätzlich erst im Jahr 2013 aufgetaucht. Wofür wird es verwendet? Wie der Name schon sagt, wird es verwendet, um zu deklarieren, dass es sich um ein „Vorlagenelement“ handelt.

Derzeit betten wir Vorlagen-HTML in HTML ein, das oft so geschrieben wird:

// ... Tatsächlich existiert es nicht Standard-Schreibmethoden wie type="text/template" und das Erscheinungsbild des d477f9ce7bf77f53fbcf36bec1b69b7a-Elements sollen das HTML von HTML-Vorlagen standardisierter und standardisierter machen.

Zuvor haben wir möglicherweise 4750256ae76b6b9d804861d8f69e79d3 oder 43e1fc467495bab219a3286f74139f6a (veraltet, aber immer noch verfügbar) verwendet, um nicht maskierten HTML-Tags -Code zu verschachteln, um einige spezifische Front-End-Funktionen zu implementieren, aber Auch hier sind sie alle unregelmäßig, genau wie die oben erwähnte populäre Verwendung. Im Hinblick auf zukünftige Trends liegt es auf der Hand, dass das Tag d477f9ce7bf77f53fbcf36bec1b69b7a der richtige Weg ist. Allerdings ist die Kompatibilität ein nicht zu vernachlässigendes Thema. Auch wenn viel geredet wird, ist der tatsächliche Wert begrenzt, daher hier nur eine kurze Einführung. 2. Duplizierung von HTML5-Vorlagenelementen

Sehen Sie sich die folgenden vier verschachtelten Bild-HTMLs an. Gleichzeitig wird der Bildinhalt nicht angezeigt und es erfolgt keine Aufforderung zum Schreiben:

1. Verborgenheit des Tag-Inhalts

Die Spezifität von 3f1c4e4b6b16bbbd69b2ee476dc4f83a ermöglicht die Verarbeitung der internen HTML-Tags gemäß der Zeichenfolge daher wird der generierte Inhalt nicht angezeigt. In DreamWeaver weist diese Schreibmethode jedoch ein großes Problem auf: Beim Schreiben von Vorlagen-HTML in Skript lautet das automatisch geschlossene Tag immer 2cacc6d41bbb37262a98f745aa00fbf0, was sehr ärgerlich ist. 4750256ae76b6b9d804861d8f69e79d3 ist ein Textbereich und das darin verschachtelte HTML-Fragment wird als Wert des Textbereichs verwendet. Das Textfeld selbst ist jedoch sichtbar, daher sind zusätzliche Einstellungen erforderlich. display: none; 43e1fc467495bab219a3286f74139f6a ist ein sehr altes und spezielles -Attribut , mit der Semantik von example. Es heißt, dass es später durch das Tag e03b848252eb9375d56be284e690e873 ersetzt und abgeschafft wurde. Tatsächlich wird es derzeit von allen Browsern unterstützt. Es kann jedoch nicht mit dem e03b848252eb9375d56be284e690e873-Tag gleichgesetzt werden. Es gibt ein a1f02c36ba31691bcfe87b2722de723b-Tag innerhalb von e03b848252eb9375d56be284e690e873, das ein Bild anzeigt, während 43e1fc467495bab219a3286f74139f6a einen Teil des HTML-Codes anzeigt. Wenn der Inhalt jedoch nicht angezeigt wird, sind für das Tag d477f9ce7bf77f53fbcf36bec1b69b7a keine zusätzlichen Einstellungen erforderlich. Warum? Dies nutzt lediglich die ursprünglichen Eigenschaften des d477f9ce7bf77f53fbcf36bec1b69b7a-Tag-Elements, das mit display:none erstellt wurde. Gleichzeitig wird der interne Inhalt des Template-Elements nicht angezeigt. Daher besteht keine Notwendigkeit, das Verstecken einzurichten. Dies ist eines der Merkmale des HTML5-Tagelements d477f9ce7bf77f53fbcf36bec1b69b7a: der versteckte Inhalt des Tags

Die beliebige Position des Tags Das d477f9ce7bf77f53fbcf36bec1b69b7a-Tag verfügt außerdem über eine Funktion, die dem 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag sehr ähnlich ist platziert in 0a293018d7bb6a31dd9325c224ae5468 oder in 6c04bd5ca3fcae76e30b72ad730ca86d.

3. Ungültigkeit von childNodes Obwohl es für das bloße Auge so aussieht, als gäbe es viele Untertags im d477f9ce7bf77f53fbcf36bec1b69b7a-Tag, ist diese Art des Trägheitsdenkens nicht anwendbar Hier. Angenommen, die -Variable template ist ein von uns erhaltenes d477f9ce7bf77f53fbcf36bec1b69b7a-Tag (viel HTML-Code darin), dann werden Sie feststellen, dass template.childNodes leer ist. Wir können template.innerHTML verwenden, um das vollständige HTML-Fragment zu erhalten. Wenn Sie „Pseudo-untergeordnete Elemente“ benötigen. Es gibt eine Möglichkeit, OK, halten Sie die Augen offen und verwenden Sie das Inhaltsattribut. template.content gibt ein Dokumentfragment zurück, das Sie als ein anderes Dokument verstehen können. Anschließend können Sie einige Abfrage-APIs unter dem Dokument verwenden, um die „pseudo-untergeordneten Elemente“ im d477f9ce7bf77f53fbcf36bec1b69b7a-Tag abzurufen. Um beispielsweise das erste Bildelement zu erhalten, gehen Sie wie folgt vor:

CSS-Code Kopieren Sie den Inhalt in die Zwischenablage

var image_first = template.content.querySelector("img"); 3 . Letzte Seite des HTML5-Vorlagenelements Sie können hier klicken: HTML5-Vorlagenelement-Erfahrungsdemo

Vorlagenelement und CSS Wenn der Browser Wenn Sie blind sind und denken, dass d477f9ce7bf77f53fbcf36bec1b69b7a ein gewöhnliches benutzerdefiniertes Element ist, sieht die Anzeige wie folgt aus und die internen Tags werden gemäß gewöhnlichen Tags gerendert. 如果浏览器与时俱进，则显示会是下面这样，自身CSS渲染，内部标签直接异空间不渲染，例如 Chr ome: -Tags in HTML5 (Bild und Text)" >

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

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

window.getComputedStyle(template).display; // 结果是"none" -Tags in HTML5 (Bild und Text)" >

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

CSS Code 复制内容到剪贴板

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

CSS Code 复制内容到剪贴板

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

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

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

兼容性 -Tags in HTML5 (Bild und Text)" >

In Verbindung stehende Artikel