Ausführliche Erläuterung des <template>-Tags im Tutorial zu HTML5

1. Schauen Sie sich zunächst die HTML5-Vorlagenelemente an

Das Element 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:

XML/HTML-Code Inhalt in die Zwischenablage kopieren Skript Typ = "Text/Vorlage" > // ... Skript > Tatsächlich gibt es keine Standardschreibweise für type="text/template". Das Erscheinungsbild des -Elements soll das HTML der HTML-Vorlage standardisierter machen.

In der Vergangenheit haben wir möglicherweise oder (veraltet, aber immer noch verfügbar) verwendet, um nicht maskierte HTML-Tag-Codes zu verschachteln, um einige spezifische Front-End-Funktionen zu erreichen, aber auch hier gilt das Gleiche wie oben: Beliebt Die Verwendung ist gleich, beide sind unregelmäßig. Im Hinblick auf zukünftige Trends liegt es auf der Hand, dass das Tag 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 Anfrage:

XML/HTML-Code Inhalt in die Zwischenablage kopieren Skript Typ = "Text/Vorlage" > img src = "mm1. jpg" > Skript > textarea style = "display: keine;" > img src = "mm1. jpg" > textarea > xmp style = "display: keine;" > img src = "mm1. jpg" > xmp > Vorlage > img src = "mm1. jpg" > Vorlage > 1. Verborgenheit des Tag-Inhalts

Die Besonderheit von ermöglicht die Verarbeitung interner HTML-Tags als Zeichenfolgen, sodass der generierte Inhalt nicht angezeigt wird. In DreamWeaver weist diese Schreibmethode jedoch ein großes Problem auf: Beim Schreiben von Vorlagen-HTML in Skript lautet das automatisch geschlossene Tag immer , was sehr ärgerlich ist. 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; ist ein sehr altes und spezielles Attribut mit der Semantik von example. Es heißt, dass es später durch das Tag ersetzt und abgeschafft wurde. Tatsächlich wird es derzeit von allen Browsern unterstützt. Es kann jedoch nicht mit dem -Tag gleichgesetzt werden. Es gibt ein -Tag innerhalb von , das ein Bild anzeigt, während einen Teil des HTML-Codes anzeigt. Wenn der Inhalt jedoch nicht angezeigt wird, sind für das Tag keine zusätzlichen Einstellungen erforderlich. Warum? Dies nutzt lediglich die ursprünglichen Eigenschaften des -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 eine der Eigenschaften des HTML5-Tag-Elements : Ausblenden des Tag-Inhalts.

2. Beliebigkeit der Tag-Position Zusätzlich zum natürlichen Ausblenden der oben genannten -Unterelemente verfügt das , was dem Tag sehr ähnlich ist.

3. Ungültigkeit von childNodes Obwohl es mit bloßem Auge so aussieht, als gäbe es viele Unter-Tags im -Tag, ist diese Art des Trägheitsdenkens hier nicht anwendbar. Angenommen, die Variable template ist ein von uns erhaltenes -Tag (viel HTML-Code darin), 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-Unterelemente“ im -Tag abzurufen. So erhalten Sie beispielsweise das erste Bildelement:

CSS-Code Inhalt in die Zwischenablage kopieren var image_first = template. content .querySelector( "img" 3. Letzte Seite des HTML5-Vorlagenelements

Sie können hier klicken: HTML5-Vorlagenelement-Erfahrungsdemo

Vorlagenelemente und CSS Wenn der Browser blind ist und denkt, dass ein gewöhnliches benutzerdefiniertes Element ist, sieht die Anzeige wie folgt aus, die internen Tags werden als normale Tags gerendert .

Wenn der Browser mit der Zeit geht, sieht die Anzeige wie folgt aus, mit eigenem CSS-Rendering, und die internen Tags werden direkt in verschiedenen Bereichen, wie z. B. Chrome, gerendert:

Mit anderen Worten: Obwohl aus der Sicht von CSS ein gewöhnliches Element ist, das mit CSS konkurriert, ist es aus der Sicht von HTML wie Obitos Sharingan, das die Übertragung interner Tags auf andere Weise ermöglicht Im Weltraum sind Blutflecken so selten wie die Grenze.

Standardmäßig ist ausgeblendet und sein Anzeigeattribut ist eigentlich „none“ zum Testen, und Sie werden es wissen:

window.getComputedStyle(template).display; // Das Ergebnis ist „none“

Daher ist in der Demo folgende CSS-Anweisung gesetzt:

CSS-Code Inhalt in die Zwischenablage kopieren Vorlage { Anzeige : Block ... } Klon der Vorlage Wenn Sie mit HTML-Strings arbeiten, ähnlich dem mittlerweile beliebten MVC-Framework oder der Template-Technologie, ist template.innerHTML ausreichend. Natürlich ist leistungsfähiger als , da der interne Inhalt von nur in Form einer Zeichenfolge abgerufen werden kann nach Knoten (die obige Anzeige) und einem vollständigen Klon, die Syntax ähnelt der folgenden:

CSS-Code Inhalt in die Zwischenablage kopieren var clone = document.importNode(template. content , true); Dann können Sie den Append-Knoten (appendChild) verwenden, um den Vorlageninhalt zu laden, anstatt (keine Wahl) den Append-String, um den Vorlageninhalt zu laden. Der Titel lautet „Einführung“, daher werde ich nicht näher darauf eingehen und keine konkreten Beispiele einbeziehen (wenn Sie interessiert sind, können Sie sich den Referenzartikel am Ende des Artikels ansehen. Es ist gut, dass das jeder weiß). ein Ding existiert. 4. Zusammenfassung des HTML5-Vorlageninterviews

Zu diesem Zeitpunkt habe ich grundsätzlich ein allgemeines Verständnis für das Verhalten, die Leistung und einige Methoden des -Elements Spezielle Tools und einige Designs, die „anderer Raum“ ähneln, sind ebenfalls aufschlussreich. Dieses Element ist beliebter, relevanter und hat mehr Potenzial als HTML5-Elemente wie .

Gegen Ende habe ich die Kompatibilitätstabelle für den IE-Browser aufgestellt, was ein großes Hindernis war, aber ich war sehr ruhig, weil ich gegenüber dem IE bereits taub war!

Kompatibilität