rentang (elemen HTML)

elemen <span></span> yang rendah hati: alat serba boleh untuk gaya dan skrip

Selalunya diabaikan, elemen <span></span> adalah alat yang menghairankan dalam senjata HTML anda. Tidak seperti unsur -unsur yang membawa makna semantik (seperti <h1></h1> atau <code><p></p> ), <span></span> menyediakan cara yang mudah, generik untuk menargetkan dan memanipulasi bahagian teks. Ia tidak semestinya mengubah persembahan visual; Kekuatannya terletak pada keupayaannya untuk bertindak sebagai cangkuk untuk gaya dengan CSS dan interaksi dengan JavaScript.

Dengan membungkus teks dalam pembukaan dan penutup <span></span> tag, anda membuat bekas yang boleh digayakan menggunakan kelas CSS atau IDS. Ini membolehkan kawalan yang tepat terhadap perkataan atau frasa tertentu tanpa menjejaskan struktur keseluruhan dokumen anda. Sebagai contoh, penulis mungkin menggunakan <span></span> untuk nama jenama gaya, seperti yang digambarkan di bawah:

nama jenama yang digayakan dengan elemen span

sebagai elemen inline, <span></span> hanya boleh mengandungi teks atau elemen sebaris lain. Elakkan membungkus unsur-unsur peringkat blok dalam <span></span>, kesilapan biasa dalam beberapa sistem pengurusan kandungan. Berlebihan <span></span> (sering dipanggil "span-itis") harus dielakkan, sama seperti penggunaan berlebihan <div> sepatutnya. Pertimbangkan sama ada elemen yang lebih semantik, seperti <code><em></em> untuk penekanan, mungkin pilihan yang lebih baik. Contohnya:

<code class="language-html">He said it was <em>really</em> important to know the difference.</code>

Dalam kes ini,

jelas menyampaikan penekanan, sedangkan A <em></em> tanpa gaya CSS akan berfungsi tanpa fungsi. <span></span> Contoh: Contoh: CSS Styling dengan

<span></span> inilah cara menggunakan untuk gaya CSS:

<span></span>

<code class="language-css">.brandname { font-style: italic; color: #006; text-transform: uppercase; }</code>

Soalan Lazim (Soalan Lazim)

<code class="language-html"><p>Various brands were present, including <em>Adobe</em>, <em>Microsoft</em>, <em>Apple</em>, and <em>Intel</em>.</p></code>

Apakah tujuan

? Ia tidak sememangnya mewakili apa -apa tetapi memberikan sasaran untuk tindakan tertentu.

• <span></span> bagaimana <span></span> berbeza dari

  ?
• adalah elemen tahap blok, mewujudkan rehat garis;

  adalah sebaris, tinggal di baris yang sama. <span></span>

  Bagaimana saya gaya teks dengan <span></span>? Bungkus teks dalam tag dan gunakan gaya CSS menggunakan kelas atau ID.

• <span></span> Bolehkah saya bersarang <span></span> unsur -unsur?

• Bolehkah saya menggunakan dengan unsur-unsur lain?

• Bagaimana <span></span> berinteraksi dengan pemilih CSS? Seperti mana -mana elemen lain, ia boleh disasarkan dengan pemilih CSS, termasuk kelas dan ID.

• Bolehkah saya menggunakan dengan JavaScript? <span></span> Ya, dengan memberikan ID atau kelas, anda boleh menyasarkannya untuk manipulasi JavaScript.

• Apakah batasan

  ? <span></span>

  Sokongan penyemak imbas?
• disokong secara meluas di semua pelayar utama.

  <span></span>

  Amalan terbaik?
Gunakan
• hanya untuk gaya, bukan struktur atau makna. Gunakan kelas atau ID untuk organisasi kod yang lebih baik dan penyelenggaraan.