Penjelasan terperinci tentang teg <template> dalam kemahiran tutorial 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/HTML Salin kandungan ke papan keratan skrip taip = "teks/template" > // ... skrip > Malah, tiada cara penulisan standard type="text/template". Kemunculan elemen

Pada masa lalu, kami mungkin telah menggunakan atau (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 Namun, keserasian adalah isu yang tidak boleh diketepikan Oleh itu, walaupun banyak diperkatakan, nilai sebenar adalah terhad, jadi di sini hanya pengenalan ringkas. 2. Penduaan elemen templat HTML5

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

Kod XML/HTML Salin kandungan ke papan keratan skrip taip = "teks/template" > img src = "mm1. jpg" > skrip > kawasan teks gaya = "paparan: tiada;" > img src = "mm1. jpg" > kawasan teks > xmp gaya = "paparan: tiada;" > img src = "mm1. jpg" > xmp > templat > img src = "mm1. jpg" > 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; ialah atribut yang sangat lama dan istimewa dengan semantik contoh. Dikatakan bahawa ia kemudiannya diganti dan dimansuhkan oleh teg Walau bagaimanapun, ia tidak boleh disamakan dengan teg Terdapat teg di dalam , yang memaparkan imej, manakala Walau bagaimanapun, seperti , jika kandungan tidak dipaparkan, paparan tetapan tambahan: tiada; tidak ditetapkan pada teg kenapa? Ini hanya mengambil kesempatan daripada ciri asal elemen teg 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 HTML5: kandungan teg bersembunyi.

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 Dengan mengandaikan bahawa templat pembolehubah ialah teg DOM yang kami perolehi (banyak kod HTML di dalamnya), anda akan mendapati bahawa template.childNodes kosong. Kita boleh menggunakan template.innerHTML untuk mendapatkan serpihan HTML yang lengkap. Jika anda perlu mendapatkan "unsur anak semu". Ada cara, OK, buka mata anda dan gunakan atribut kandungan.

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 <templat. Contohnya, untuk mendapatkan elemen imej pertama ialah:

Kod CSS Salin kandungan ke papan keratan 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, adalah elemen biasa yang bersaing dengan CSS, tetapi dari sudut HTML, ia adalah seperti Obito's Sharingan, yang membolehkan teg dalaman dipindahkan Dalam yang berbeza ruang, kesan darah jarang berlaku seperti had.

Secara lalai, disembunyikan, dan atribut paparannya sebenarnya tiada secara lalai Gunakan kod berikut untuk menguji dan anda akan tahu:

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

Oleh itu, pernyataan CSS berikut ditetapkan dalam demo:

Kod CSS Salin kandungan ke papan keratan 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, lebih berkuasa daripada kerana kandungan dalaman hanya boleh diperolehi sebagai rentetan, dan walaupun oleh nod (paparan di atas), dan klon lengkap, sintaks adalah serupa dengan yang berikut:

Kod CSS Salin kandungan ke papan keratan 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