Penjelasan terperinci tentang teg dalam kemahiran tutorial HTML5_html5

1. Lihat dulu elemen templat HTML5

Elemen

pada asasnya pasti hanya muncul pada tahun 2013. Untuk apa ia digunakan? Seperti namanya, ia digunakan untuk mengisytiharkan bahawa ia adalah "elemen templat".

Pada masa ini, kami membenamkan HTML templat dalam HTML, yang selalunya ditulis seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan

1. skrip taip="teks/template"> 
2. // ...
3. skrip>

Malah, tiada cara penulisan standard type="text/template". Kemunculan elemen

Pada masa lalu, kami mungkin telah menggunakan atau <xmp> (usang tetapi masih tersedia) untuk menyarangkan kod teg HTML yang tidak dilepaskan untuk mencapai beberapa fungsi bahagian hadapan tertentu, tetapi, sekali lagi, sama seperti di atas. penggunaan adalah sama, kedua-duanya tidak teratur. Dari segi arah aliran masa hadapan, jelas bahawa teg <templat> Namun, keserasian adalah isu yang tidak boleh diketepikan Oleh itu, walaupun banyak diperkatakan, nilai sebenar adalah terhad, jadi di sini hanya pengenalan ringkas. <br><strong>2. Penduaan elemen templat HTML5</strong></templat></xmp>

Lihat empat HTML imej bersarang berikut Pada masa yang sama, kandungan imej tidak dipaparkan dan tiada permintaan:

Kod XML/HTMLSalin kandungan ke papan keratan

1. skrip taip="teks/template">  
2. img src="mm1. jpg">  
3. skrip>  
4.   
5. kawasan teks gaya="paparan: tiada;">  
6. img src="mm1. jpg">  
7. kawasan teks>  
8.   
9. xmp gaya="paparan: tiada;">  
10. img src="mm1. jpg">  
11. xmp>  
12.   
13. templat>  
14. img src="mm1. jpg">  
15. templat>  

1. Penyembunyian kandungan tag

Kekhususan membenarkan teg HTML dalaman diproses sebagai rentetan, jadi kandungan yang dijana tidak dipaparkan. Walau bagaimanapun, dalam DreamWeaver, kaedah penulisan ini mempunyai masalah besar, iaitu, apabila menulis HTML templat dalam skrip, tag secara automatik ditutup sentiasa , yang sangat menjengkelkan.
ialah kawasan teks dan serpihan HTML yang bersarang di dalamnya akan digunakan sebagai nilai kawasan teks. Walau bagaimanapun, medan teks itu sendiri boleh dilihat, jadi tetapan tambahan diperlukan: tiada;<br> <xmp> ialah atribut yang sangat lama dan istimewa dengan semantik contoh. Dikatakan bahawa ia kemudiannya diganti dan dimansuhkan oleh teg <pra> Walau bagaimanapun, ia tidak boleh disamakan dengan teg <pra> Terdapat teg <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="Penjelasan terperinci tentang teg dalam kemahiran tutorial HTML5_html5" > di dalam <pre class="brush:php;toolbar:false">, yang memaparkan imej, manakala <xmp> Walau bagaimanapun, seperti <textarea>, jika kandungan tidak dipaparkan, paparan tetapan tambahan: tiada;<br> tidak ditetapkan pada teg <templat> kenapa? Ini hanya mengambil kesempatan daripada ciri asal elemen teg <templat> yang dilahirkan dengan paparan:tiada Pada masa yang sama, kandungan dalaman elemen templat tidak akan dipaparkan. Oleh itu, tidak perlu menyediakan persembunyian. Ini ialah salah satu ciri elemen teg <template> HTML5: kandungan teg bersembunyi.</template></templat></templat></textarea></xmp></pre></pra></pra></xmp>

2. Tag kedudukan sewenang-wenangnya
Selain penyembunyian semula jadi di atas, teg , yang hampir sama dengan atau tag

3. Ketidaksahihan childNodes
Walaupun nampaknya pada mata kasar terdapat banyak sub-tag dalam teg

template.content akan mengembalikan serpihan dokumen, yang boleh anda fahami sebagai dokumen lain, kemudian, anda boleh menggunakan beberapa API pertanyaan di bawah dokumen untuk mendapatkan "sub-elemen pseudo" dalam teg

Kod CSSSalin kandungan ke papan keratan

1. var image_first = templat.kandungan.querySelector("img");

3. Halaman akhir elemen templat HTML5

Anda boleh klik di sini: Demo pengalaman elemen templat HTML5

Elemen templat dan CSS
Jika penyemak imbas buta dan berpendapat bahawa ialah elemen tersuai biasa, paparan akan kelihatan seperti berikut, Teg dalaman dipaparkan sebagai teg biasa .

Jika penyemak imbas mengikut peredaran masa, paparan akan menjadi seperti berikut, dengan pemaparan CSSnya sendiri dan teg dalaman akan dipaparkan terus dalam ruang yang berbeza, seperti Chrome:

Dalam erti kata lain, walaupun dari perspektif CSS,

Secara lalai,

window.getComputedStyle(template).display; // Hasilnya ialah "tiada"

Oleh itu, pernyataan CSS berikut ditetapkan dalam demo:

Kod CSSSalin kandungan ke papan keratan

1. templat { paparan: sekat ... }

Klon templat
Jika anda berurusan dengan rentetan HTML, serupa dengan rangka kerja MVC atau teknologi templat yang popular sekarang, template.innerHTML sudah memadai. Sudah tentu,

Kod CSSSalin kandungan ke papan keratan

1. var klon = document.importNode(template.kandungan, benar

Kemudian, anda boleh menggunakan nod tambah (appendChild) untuk memuatkan kandungan templat dan bukannya (tiada pilihan) tambah rentetan untuk memuatkan kandungan templat. Tajuknya ialah "Pengenalan", jadi saya tidak akan mengembangkannya dan tidak akan menyertakan contoh khusus (jika anda berminat, anda boleh merujuk artikel rujukan di penghujung artikel). sesuatu benda wujud.
4. Ringkasan temu bual templat HTML5

Pada ketika ini, saya pada dasarnya mempunyai pemahaman umum tentang kelakuan, prestasi dan beberapa kaedah elemen senario khas. Alat khas, beberapa reka bentuk yang serupa dengan "ruang berbeza" juga membuka mata Elemen ini lebih popular, lebih prihatin dan lebih berpotensi daripada elemen HTML5 seperti

.

Pada penghujungnya, saya meletakkan jadual keserasian pelayar IE adalah halangan besar, tetapi saya sangat tenang kerana saya sudah mati rasa dengan IE!

Keserasian