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

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:

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

Zuvor haben wir möglicherweise oder (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 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:

Nach dem Login kopieren 1. Verborgenheit des Tag-Inhalts

Die Spezifität von 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 , 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 eines der Merkmale des HTML5-Tagelements : der versteckte Inhalt des Tags

Die beliebige Position des Tags Das -Tag verfügt außerdem über eine Funktion, die dem -Tag sehr ähnlich ist platziert in head > oder in .

3. Ungültigkeit von childNodes Obwohl es für das bloße Auge so aussieht, als gäbe es viele Untertags im -Tag, ist diese Art des Trägheitsdenkens nicht anwendbar Hier. Angenommen, die -Variable template ist ein von uns erhaltenes -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 -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"); Nach dem Login kopieren 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 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的角度看， 就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。

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

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

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

CSS Code 复制内容到剪贴板

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

CSS Code 复制内容到剪贴板

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

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

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

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