Bagaimana Menggunakan Elemen HTML Span dan Div

Gunakan span dan div dengan CSS untuk mengawal gaya dan susun atur yang lebih besar.

Ramai orang yang baru dalam reka bentuk web dan HTML / CSS menggunakan elemen dan

secara bergantian ketika mereka membina halaman web. Walau bagaimanapun, realiti adalah bahawa setiap elemen HTML ini memberi maksud yang berlainan. Belajar menggunakan setiap tujuannya akan membantu anda membangunkan laman web yang bersih yang lebih mudah untuk mengurus keseluruhan kod.

Menggunakan Elemen

Elemen div mentakrifkan bahagian logik pada halaman web anda.

Ia pada dasarnya adalah sebuah kotak di mana anda boleh meletakkan elemen HTML lain yang secara logiknya bersama. Bahagian boleh mempunyai beberapa elemen lain di dalamnya, seperti perenggan, tajuk, senarai, pautan, imej, dan lain-lain. Bahkan ada bahagian lain di dalamnya untuk menyediakan struktur dan organisasi tambahan pada dokumen HTML anda.

Untuk menggunakan elemen div, letakkan teg

sebelum bahagian halaman anda yang anda mahu sebagai pembahagian berasingan dan tag dekat selepas itu:

kandungan div

Sekiranya kawasan halaman anda memerlukan beberapa maklumat tambahan yang akan anda gunakan untuk gaya dengan CSS kemudian, anda boleh menambah pemilih id (contohnya,

id = "myDiv">), atau pemilih kelas (misalnya, kelas = "bigDiv">). Kedua-dua atribut ini kemudian boleh dipilih menggunakan CSS atau diubah suai menggunakan JavaScript. Amalan terbaik semasa bersandar ke arah menggunakan pemilihan kelas dan bukannya ID, sebahagiannya kerana pemilih ID khusus. Sebenarnya, anda boleh menggunakan salah satu dan bahkan dapat memberikan pembahagian kedua-dua ID dan pemilih kelas.

Kapan Gunakan

Versus

Unsur div adalah berbeza dari elemen seksyen HTML5 kerana ia tidak memberikan kandungan tertutup apa-apa makna semantik. Jika anda tidak pasti sama ada blok kandungan harus menjadi div atau seksyen, fikirkan tentang apa tujuan elemen dan kandungannya untuk membantu anda membuat keputusan untuk menggunakan:

  • Sekiranya anda memerlukan elemen semata-mata untuk menambah gaya ke bahagian halaman, anda harus menggunakan elemen div.
  • Jika kandungan yang terkandung mempunyai fokus yang berbeza dan boleh berdiri sendiri, anda mungkin mahu menggunakan elemen seksyen sebaliknya.

Pada akhirnya, kedua-dua div dan bahagian berkelakuan sama dan anda boleh memberi salah satu daripada mereka nilai atribut dan gaya mereka dengan CSS untuk melihat rupa laman web yang anda perlukan. Kedua-duanya adalah elemen tahap blok.

Menggunakan Elemen

Elemen span adalah elemen sebaris secara lalai. Ini membezakannya daripada elemen div dan seksyen. Unsur span sering digunakan untuk membungkus sekeping kandungan tertentu, biasanya teks, untuk memberikan "cangkuk" tambahan yang boleh digelar kemudian. Digunakan dengan CSS, ia boleh mengubah gaya teks yang dikongkongnya; Walau bagaimanapun, tanpa sebarang atribut gaya, elemen span sahaja tidak mempunyai kesan pada teks sama sekali.

Ini adalah perbezaan utama antara span dan elemen div. Seperti yang disebutkan di atas, elemen div termasuk peralihan perenggan, manakala unsur span hanya memberitahu pelayar untuk memohon peraturan gaya CSS yang berkaitan dengan apa yang dilampirkan oleh tag :


Teks diserikan dan teks yang tidak diserlah.

Tambah kelas = "serlahkan" atau kelas lain kepada elemen span untuk menyusun teks dengan CSS (mis., Class = "highlight">).

Unsur span tidak mempunyai atribut yang diperlukan, tetapi ketiga-tiga yang paling berguna adalah sama seperti unsur div:

  • gaya
  • kelas
  • ID

Gunakan span apabila anda mahu menukar gaya kandungan tanpa menentukan kandungan itu sebagai elemen tahap blok baru dalam dokumen itu.

Sebagai contoh, jika anda mahu perkataan kedua tajuk h3 menjadi merah, anda boleh mengelilingi perkataan itu dengan elemen span yang akan menggambarkan perkataan itu sebagai teks merah. Perkataan masih kekal sebagai sebahagian daripada unsur h3, tetapi kini juga memaparkan warna merah:

Ini ialah Headline Awesome Saya

Disunting oleh Jeremy Girard pada 2/2/17