HTML5 Cara Penggunaan

dan

Tag

Artikel ini adalah sebahagian daripada kami "Siri Tutorial HTML5 / CSS3" - khusus untuk membantu menjadikan anda pereka dan / atau pemaju yang lebih baik. Tekan di sini untuk melihat lebih banyak artikel dari siri yang sama.

Antara beberapa tag baru yang tersedia dalam HTML5, Spesifikasi (seperti: angka, figcaption, dan diketepikan), terperinci dan ringkasan tags, pada pandangan saya, adalah yang paling berguna. Dengan tag baharu ini, anda boleh menyembunyikan beberapa kandungan yang panjang dan memaparkan hanya ringkasan.

Kami sebenarnya sering melihat kesan ini di sekeliling, tetapi kebanyakannya masih dibina di atas JavaScript atau saudaranya: jQuery, yang kebanyakan orang tidak faham. Sekarang, dengan unsur-unsur baru ini - butiran dan ringkasan - perkara akan menjadi lebih mudah.

Oleh itu, mari lihat bagaimana tag berfungsi dalam senario kes sebenar.

Dalam demo ini, kami akan meringkaskan penerangan produk. Pertama mari buat tag 'butiran' dan kemudian letakkan semua kandungan bersama dengan tag 'ringkasan' di dalamnya, seperti dalam contoh di bawah:

 
 
Spesifikasi MacBook Pro
 
 
Paparan layar lebar 13.3-inci LED-backlit berkilat dengan tepi-ke-tepi, kaca tanpa gangguan (resolusi 1280 x 800-piksel).
 
Pemproses teras dua hala 2.4GHz Intel Core i5 dengan 3 MB cache L3 dikongsi untuk multitasking yang sangat baik.
 
Intel HD Graphics 3000 dengan 384 MB DDR3 SDRAM dikongsi dengan memori utama.
 
Cakera keras 500 GB Serial ATA (5400 RPM)
 
4 GB RAM dipasang (1333 MHz DDR3; menyokong sehingga 8 GB)
 
 
 

Dalam contoh itu, saya telah menambah detail spesifikasi MacBook Pro, dan kini mari lihat bagaimana penyemak imbas membuat tag tersebut.

Saya juga telah menambah tajuk dan lebih banyak perihalan produk di atas butiran untuk membuat demo di atas lebih masuk akal kepada anda. Jadi, apa pendapat anda? Ia agak mudah, betul?

Sokongan Penyemak Imbas

Walau bagaimanapun, sebelum anda tergesa-gesa untuk menggunakan teg ini ke seluruh tapak web anda, perlu diingatkan bahawa butiran dan teg ringkasan hanya disokong pada Chrome 12 dan ke atas.

Malah Firefox terkini tidak menyokong mereka lagi.

Jadi, jika anda ingin menggunakan teg ini, anda perlu memasukkan fungsi sandaran untuk penyemak imbas yang tidak disokong. Berita baik itu, ia mudah; anda boleh menggunakan maklumat polyfill ini, yang secara automatik akan meniru fungsi tag untuk penyemak imbas lama.

Muat turun fail ini dan hubungkannya ke dokumen html bersama-sama dengan jQuery (1.7+ sekurang-kurangnya) dan pastikan anda meletakkan polyfill sebelum tag tubuh dekat.

Dan di dalam tag kepala, masukkan tag bersyarat berikut untuk memasukkan HTML5shiv untuk IE8 dan lebih awal, jika tidak, Internet Explorer tidak akan mengenali teg baharu ini.

Sekarang mari kita lihat bagaimana ternyata di Internet Explorer:

Dan kini berfungsi pada Internet Explorer juga.

• Demo
• Muat turun Sumber

Kesimpulannya

Mencipta kesan hide-and-show seperti itu dengan JavaScript atau jQuery sebenarnya agak mudah, tetapi setelah ia disokong secara native dari pelayar pasti penyelesaian yang lebih mudah untuk banyak orang. Sama ada anda mahu melakukannya dalam JavaScript atau dalam HTML5, itu keputusan anda. Terima kasih kerana membaca, dan saya harap anda menikmatinya.