Ausführliche Erläuterung des -Tags im Tutorial zu HTML5_html5

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

Das Element

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. Skript Typ="Text/Vorlage"> 
2. // ...
3. Skript>

Tatsächlich gibt es keine Standardschreibweise für type="text/template". Das Erscheinungsbild des

In der Vergangenheit haben wir möglicherweise oder <xmp> (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 <template> 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. <br><strong>2. Duplizierung von HTML5-Vorlagenelementen</strong></template></xmp>

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

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. Skript Typ="Text/Vorlage">  
2. img src="mm1. jpg">  
3. Skript>  
4.   
5. textarea style="display: keine;">  
6. img src="mm1. jpg">  
7. textarea>  
8.   
9. xmp style="display: keine;">  
10. img src="mm1. jpg">  
11. xmp>  
12.   
13. Vorlage>  
14. img src="mm1. jpg">  
15. Vorlage>  

1. Verborgenheit des Tag-Inhalts

Die Besonderheit von <script> 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 </script>, 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;<br> <xmp> ist ein sehr altes und spezielles Attribut mit der Semantik von example. Es heißt, dass es später durch das Tag <pre class="brush:php;toolbar:false"> ersetzt und abgeschafft wurde. Tatsächlich wird es derzeit von allen Browsern unterstützt. Es kann jedoch nicht mit dem <pre class="brush:php;toolbar:false">-Tag gleichgesetzt werden. Es gibt ein <img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201506/2015619175843048.png?2015519175852?x-oss-process=image/resize,p_40" class="lazy" alt="Ausführliche Erläuterung des -Tags im Tutorial zu HTML5_html5" >-Tag innerhalb von <pre class="brush:php;toolbar:false">, das ein Bild anzeigt, während <xmp> einen Teil des HTML-Codes anzeigt. Wenn der Inhalt jedoch nicht angezeigt wird, sind für das Tag <template> keine zusätzlichen Einstellungen erforderlich. Warum? Dies nutzt lediglich die ursprünglichen Eigenschaften des <template>-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 <template>: Ausblenden des Tag-Inhalts.<br> </template></template></template></xmp></pre></pre></pre></xmp>

2. Beliebigkeit der Tag-Position
Zusätzlich zum natürlichen Ausblenden der oben genannten

3. Ungültigkeit von childNodes
Obwohl es mit bloßem Auge so aussieht, als gäbe es viele Unter-Tags im

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