Dalam bahasa XHTML, kita semua tahu bahwa tag UL berisi Li, tag DL berisi aturan DT dan DD-necking untuk tag tetap ini sangat jelas. Namun, ada banyak tag yang independen dan tidak diikat bersama, seperti H1, Div, p ... jadi apa aturan bersarang untuk tag ini? Mari kita bicarakan topik ini hari ini.
Ketika datang ke aturan bersarang tag XHTML, pertama -tama kita harus tahu bahwa ada dua jenis tag XHTML, satu disebut elemen blok , dan yang lainnya disebut elemen inline (inline, yang banyak orang sebut: inline, inline, level level, dll.).
Standar divisi untuk elemen tingkat blok dan elemen tertanam sangat sederhana. Harap masukkan dua baris kode berikut ke dalam tag tubuh:
<Div style = Border: 1px solid red;> div1 </div>
<Div style = Border: 1px solid red;> div2 </div>
Efek rendering browser:
Div1Div2Dua div yang disajikan pada halaman menempati dua baris ruang. Kecuali mereka diizinkan untuk mengapung atau membuat pengaturan lain, tidak ada yang bersebelahan. Mereka semua menempati deretan ruang mereka sendiri terlalu mendominasi. Jika Anda melihat tag tertentu memiliki fenomena ini, Anda dapat menyebutnya: blok elemen (blok) ;
Kemudian masukkan dua baris kode berikut ke dalam tag tubuh:
<gaya span = border: 1px solid red;> span1 </span>
<gaya span = border: 1px solid red;> span2 </span>
Efek rendering browser:
span1 span2
Kali ini, dua rentang diatur berdampingan, dan mereka ramah dan ramah, ramah dan harmonis ... untuk perilaku pelabelan seperti ini, kita dapat menyebutnya: elemen inline ;
Perbedaan antara elemen tingkat blok dan elemen tertanam: · Elemen tingkat blok umumnya digunakan untuk membangun arsitektur situs web, tata letak, dan membawa konten ... pekerjaan yang berikatan besar ini adalah elemen tingkat blok, yang mencakup tag berikut:Div, ul, li, dl, dt, dd, h1 ~ h6, p, alamat ...
· Elemen inline umumnya digunakan dalam detail tertentu atau bagian -bagian dari konten situs web untuk menekankan dan membedakan gaya, superskrip, subskrip, titik jangkar, dll. Tag berikut adalah semua elemen tertanam:A, span, kuat, sub, sup, img ...
· Elemen blok dan elemen tertanam dapat dikonversi satu sama lain , dan kode konversi adalah sebagai berikut:Tampilan: Blok; /* Konversi ke elemen blok*/
Tampilan: inline; /* Konversi ke elemen tertanam*/
· Aturan panggilan untuk CSS antara elemen blok dan elemen tertanam berbeda (artikel ini membahas label bersarang, jadi saya tidak akan menjelaskan titik pengetahuan ini).Setelah hanya memahami elemen blok dan elemen tertanam, Anda dapat mencantumkan aturan sarang tag XHTML :
1. Elemen blok dapat berisi elemen inline atau elemen blok tertentu, tetapi elemen inline tidak dapat berisi elemen blok. Ini hanya dapat berisi elemen inline lainnya :<div> <h1> </h1> <p> </p> </div> - ya
<a href =#> <span> </span> </a> - ya
<span> <div> </div> </span> - salah
2. Elemen tingkat blok tidak dapat ditempatkan di <p> :<p> <ol> <li> </li> </ol> </p> - salah
<p> <div> </div> </p> - salah
3. Ada beberapa elemen tingkat blok khusus yang hanya dapat berisi elemen tertanam dan tidak dapat berisi elemen tingkat blok. Tag khusus ini adalah:H1, H2, H3, H4, H5, H6, P, DT.
4. Tag Div dapat dimasukkan dalam LI - Artikel ini tidak perlu terdaftar secara terpisah, tetapi banyak orang di internet memiliki beberapa keraguan tentang ini, jadi saya akan menjelaskannya secara singkat di sini:Tag LI dan Div adalah wadah untuk memuat konten, dengan status yang sama dan tidak ada perbedaan antara level (misalnya: H1 dan H2 dengan hierarki ketat^_^). Anda harus tahu bahwa tag LI bahkan dapat mengakomodasi UL atau OL induknya. Mengapa beberapa orang berpikir bahwa Li tidak dapat mengakomodasi div berikutnya? Jangan menganggap Li begitu pelit, jangan memandang li setipisnya, sebenarnya Li memiliki pikiran besar ...
5. Elemen tingkat blok dan elemen tingkat blok adalah paralel, dan elemen inline dan elemen sebaris paralel:<dv> <h2> </h2> <p> </p> </div> - ya
<div> <a href =#> </a> <span> </span> </div> - ya
<div> <h2> </h2> <span> </span> </div> - salah