Standar HTML5 menambahkan banyak elemen semantik baru.
Di sini kami terutama memperkenalkan elemen baru pada struktur halaman.
Apa itu elemen semantikDalam istilah sederhana, elemen semantik adalah untuk memberikan beberapa makna pada elemen (label).
Seperti <weader> yang mewakili header, <footh> untuk menunjukkan footer.
Ciri① Pemeliharaan Mudah: Penggunaan elemen semantik akan memiliki informasi struktur halaman yang lebih jelas, yang mudah untuk mempertahankan pemeliharaan halaman -Up. Tidak perlu melihat kode lagi: Temukan divisi sebelum menemukan nama kelas tertentu.
② Kabinet -Belas: Ini membantu membaca pembaca layar dan alat tambahan lainnya.
③ Optimalisasi mesin pencari yang dioptimalkan: Setelah memeriksa beberapa elemen semantik HTML5, robot pencarian dapat mengumpulkan informasi di halaman indeksnya.
Tata letak antarmuka asliDalam tata letak halaman, <ver> adalah elemen yang sangat umum.
Untuk memfasilitasi pemeliharaan, desainer sering memberikan <viv> classname (kategori gaya) atau ID ini dengan nama khusus.
Misalnya, elemen <div> yang mewakili header, className atau ID-nya dapat menjadi header halaman, header, dll.
Contoh:
Struktur halaman elemen semantik menjelaskanElemen semantik dari struktur halaman sebagian besar digunakan untuk tata letak keseluruhan halaman.
Dan tidak memiliki gaya khusus, masih perlu digunakan dengan CSS.
Pendahuluan terperinci <Header>: Tentukan area kepala halaman web atau artikel. Ini dapat berisi logo, navigasi, bilah pencarian dan sebagainya.Versi terendah browser: IE 9, Chrome 5
Petunjuk Penggunaan:
① Ketika digunakan untuk memberi label halaman web, itu dapat mencakup informasi seperti logo, navigasi, bilah pencarian.
② Ketika judul digunakan untuk menandai konten, hanya ketika judul juga dilampirkan pada informasi lain, <Header> dipertimbangkan secara umum.
<sain>: Tentukan konten utama halaman web.Versi terendah dari browser: IE tidak mendukung, Chrome 35
<footer>: Tentukan area ekor halaman web atau artikel. Ini dapat mencakup hak cipta dan pengarsipan.Versi terendah browser: IE 9, Chrome 5
Petunjuk Penggunaan:
① Sebagai halaman web, biasanya termasuk hak cipta situs web, pembatasan hukum dan tautan.
② Sebagai catatan kaki dari artikel ini, biasanya berisi informasi yang relevan penulis.
<av>: Tandai tautan navigasi halaman. Berisi beberapa area overlocked.Versi terendah browser: IE 9, Chrome 5
Petunjuk Penggunaan:
① Satu halaman dapat berisi beberapa elemen <av>, seperti navigasi dan rekomendasi artikel terkait.
② Informasi Kontak dan Informasi Sertifikasi di area <footer> tidak harus dimasukkan dalam elemen <AV>.
<section>: Biasanya ditandai sebagai area independen di halaman web.Versi terendah browser: yaitu 9, Chrome 5
Petunjuk Penggunaan:
① Dapat digunakan sebagai area independen di halaman web, seperti bagian dalam artikel.
<ArtTicle>: Blok konten lengkap dan independen; ia dapat berisi <Header> independen, <footer> dan elemen struktural lainnya. Seperti berita, artikel blog, dan konten independen lainnya (tidak termasuk komentar atau profil penulis).Versi terendah browser: IE 9, Chrome 5
<sander>: Tentukan blok konten di luar konten utama di sekitarnya. Seperti: anotasi.Versi terendah browser: IE 9, Chrome 5
<figure>: Ini mewakili bagian konten independen dan sering digunakan dengan <figCaption> (mewakili), yang dapat digunakan untuk gambar, ilustrasi, formulir, segmen kode, dll. Dalam artikel.Versi terendah dari browser: IE 9, Chrome 8 <figcaption>: Tentukan judul elemen <figur>.
Versi terendah dari browser: yaitu 9, Chrome 8
Contoh Diagram
Versi lama dukungan browser IE8 di atasBrowser akan digunakan sebagai elemen internal untuk elemen yang tidak tahu. Elemen semantik yang terkait halaman adalah elemen tingkat blok, jadi Anda hanya perlu mengatur browser yang tidak mendukung elemen -elemen ini untuk menampilkannya sebagai elemen tingkat blok.
Tambahkan kode berikut ke gaya:
Artikel, selain detail, figcaption, gambar, footer, header, hgroup, main, nav, bagian, ringkasan {display: block;} IE8 dan IE8 di bawah iniBrowser di bawah IE8 dan IE8 tidak mendukung gaya aplikasi elemen yang berguna yang tidak dapat dikenali.
Jadi buat elemen semantik ini melalui JS dan tambahkan gaya dasar.
Ambil Header sebagai contoh <script> document.createelement ('header'); File Eksternal AplikasiKreasi yang membosankan ini telah menulis Lei Feng, baru saja dimuat pada versi lama IE.
<! "