Menjelaskan Html5 `` vs `` elements.

<div> adalah elemen peringkat blok<p> <code><div> adalah elemen peringkat blok secara lalai, yang bermaksud ia akan menduduki satu baris tanpa mengira sama ada terdapat kandungan atau tidak. Jika anda menetapkan lebar, ketinggian, margin dalaman dan luaran dan gaya lain untuknya, ia akan berkuatkuasa secara normal.<p> Senario penggunaan biasa: </p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175226098477717.jpeg" class="lazy" alt="Menjelaskan Html5 `<sountic>` vs `<section>` elements."> `vs`<section> `elemen." /><ul> <li> Sebagai bekas untuk susun atur halaman</li> <li> Balut satu set elemen yang berkaitan untuk memudahkan kawalan bersatu gaya atau tingkah laku</li> <li> Reka bentuk responsif dengan grid CSS atau flexbox</li> </ul> <p> Sebagai contoh, anda menulis sekeping kod seperti ini:</p><pre class='brush:php;toolbar:false;'> &lt;div class = &quot;box&quot;&gt; ini div &lt;/div&gt; &lt;p&gt; ini adalah perenggan teks &lt;/p&gt;</pre><p> <code>div ini akan bermula dengan garis baru dan mengisi lebar yang dapat ditempatkan.

`vs`

`elemen." />

---

<span> adalah elemen sebaris

<span> , sebaliknya, ia adalah elemen inline. Ia tidak akan membungkus garisan, dan tidak akan secara automatik menduduki seluruh baris, saiznya bergantung sepenuhnya pada kandungan itu sendiri.

Senario penggunaan biasa:

• Tambahkan gaya ke bahagian teks, seperti menonjolkan perkataan
• Secara dinamik mengendalikan teks tertentu, seperti menukar warna atau kandungan dengan javascript
• Tambahkan gaya tambahan atau atribut tanpa mengganggu aliran teks

Contohnya:

 <p> Ini adalah ayat biasa, tetapi perkataan <em> <span style = "color: red"> adalah merah </span> </em>. </p>

Di sini kita menggunakan <span> untuk menukar warna hanya satu perkataan dalam ayat tanpa menjejaskan struktur keseluruhan perenggan.

---

Bagaimana untuk memilih:

atau <span> >?

Ringkasnya, ia bergantung kepada sama ada kandungan yang anda mahu pakej perlu "disekat secara individu":

• Jika ia berkaitan dengan susun atur dan memerlukan ruang bebas, gunakan
• Sekiranya ia hanya sebahagian kecil daripada teks, gunakan <span>

Mata lain harus diperhatikan:

• <div> tidak boleh diletakkan dalam tag <code><p></p> (spesifikasi HTML tidak membenarkannya)
• <span> tidak sesuai untuk susun atur struktur, jika tidak, ia mungkin mengganggu aliran teks
• Hari ini, dengan lebih banyak tag semantik, cuba memberi keutamaan untuk menggunakan tag yang lebih bermakna (seperti <section></section> , <article></article> , <header></header> , dll.) Daripada membabi buta memohon
  atau <span>

  ---

  Pada dasarnya itu sahaja. Walaupun kedua -dua tag sangat asas, menggunakan tempat yang salah boleh menjejaskan susun atur, kebolehcapaian dan juga SEO. Hanya dengan memahami perbezaan tingkah laku mereka, kita dapat menulis struktur HTML yang lebih jelas dan lebih munasabah.