Bagaimana anda membuat rehat garis dan peraturan mendatar di HTML?

Bagaimana anda membuat rehat garis dan peraturan mendatar dalam HTML?

Untuk membuat rehat garis dan peraturan mendatar dalam HTML, anda menggunakan tag khusus yang direka untuk tujuan ini.

Untuk rehat garis, anda menggunakan tag <br> . Tag ini menutup diri dan tidak memerlukan tag penutup. Apabila dimasukkan ke dalam kod HTML, ia memaksa teks atau elemen berikut untuk bermula pada baris baru. Berikut adalah contoh asas cara menggunakannya:

 <code class="html"><p>This is a paragraph of text.<br>This line starts on a new line.</p></code>

Untuk peraturan mendatar, anda menggunakan tag <hr> . Seperti tag <br> , tag <hr> adalah penutupan diri. Apabila diletakkan dalam dokumen HTML anda, ia mewujudkan garis mendatar di halaman, yang boleh digunakan untuk memisahkan kandungan secara visual. Inilah contoh penggunaannya:

 <code class="html"><p>This is the first section of content.</p> <hr> <p>This is the second section of content.</p></code>

Kedua -dua tag ini boleh digayakan lebih jauh dengan CSS untuk mengubah suai penampilan mereka, seperti mengubah ketinggian garis <br> atau gaya dan warna <hr> .

Apakah kod HTML untuk memasukkan peraturan mendatar?

Kod HTML untuk memasukkan peraturan mendatar ialah <hr> . Tag ini digunakan untuk membuat rehat tematik atau garis mendatar yang memisahkan kandungan. Ia adalah tag penutup diri, yang bermaksud ia tidak memerlukan tag penutupan yang berasingan. Berikut adalah contoh cara menggunakan tag <hr> dalam html:

 <code class="html"><p>Content above the horizontal rule.</p> <hr> <p>Content below the horizontal rule.</p></code>

Anda juga boleh menambah atribut ke tag <hr> untuk mengubah suai penampilannya, seperti menetapkan saiz, lebar, atau penjajaran. Walau bagaimanapun, menggunakan CSS untuk gaya adalah disyorkan untuk kawalan yang lebih tepat dan pemisahan kandungan dan persembahan yang lebih baik.

Bolehkah Break Line ditambah dalam HTML tanpa menggunakan tag <br> ?

Ya, rehat garis boleh ditambah dalam HTML tanpa menggunakan tag <br> . Terdapat beberapa cara untuk mencapai matlamat ini:

1. Menggunakan CSS white-space Property: Anda boleh menggunakan harta CSS white-space untuk mengekalkan rehat garis dalam teks. Sebagai contoh, anda boleh menetapkan white-space: pre; atau white-space: pre-wrap; ke elemen <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> atau

   untuk memastikan garis pecah kerana mereka berada di sumber HTML:

    <code class="html"><div style="white-space: pre;"> This text has line breaks without using br tags. </div></code>

2. Menggunakan tag <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> : tag <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div><div class="contentsignin">Salin selepas log masuk</div></div> digunakan untuk memaparkan teks pra -preformatted, yang bermaksud ia mengekalkan kedua -dua ruang dan rehat garis:

    <code class="html"><pre class="brush:php;toolbar:false"> This text has line breaks without using br tags. 

3. Menggunakan atau Entiti: Ini adalah entiti HTML untuk makanan dan pulangan kereta, masing -masing. Walau bagaimanapun, kesannya boleh berbeza -beza bergantung kepada penyemak imbas dan konteks, dan mereka biasanya lebih berguna dalam konteks seperti kawasan input e -mel atau teks:

    <code class="html"><p>This text
   has a line break.</p></code>

Kaedah ini memberikan alternatif kepada tag <br> , yang membolehkan rehat garis tanpa penggunaan tag eksplisit.

Apakah perbezaan antara menggunakan <hr> dan CSS untuk peraturan mendatar dalam HTML?

Perbezaan antara menggunakan tag <hr> dan CSS untuk peraturan mendatar dalam HTML terutamanya berputar di sekitar fleksibiliti, semantik, dan pemisahan kandungan dan persembahan.

1. Semantik dan tujuan:

   • <hr> tag: tag <hr> adalah elemen HTML semantik yang dimaksudkan untuk mewakili rehat tematik antara bahagian kandungan. Ia sememangnya difahami oleh enjin carian dan alat kebolehaksesan seperti yang menunjukkan peralihan dalam topik atau seksyen.
   • CSS: Menggunakan CSS untuk peraturan mendatar tidak membawa makna semantik yang sama. Ia semata -mata pilihan gaya dan tidak menjejaskan struktur atau makna kandungan.

2. Fleksibiliti dan gaya:

   • <hr> tag: manakala tag <hr> boleh digayakan dengan CSS, gaya lalai mungkin tidak fleksibel seperti membuat peraturan mendatar semata -mata dengan CSS. Anda boleh mengubah warna, lebar, dan sifat lain, tetapi bermula dengan garis mendatar lalai boleh mengehadkan kreativiti.
   • CSS: Dengan CSS, anda mempunyai kawalan sepenuhnya ke atas kemunculan peraturan mendatar. Anda boleh membuat garis, kecerunan, imej, atau kesan animasi. Anda boleh menggunakan <div> atau mana-mana elemen lain dan memohon sifat CSS seperti <code>border , background , atau box-shadow untuk mencapai rupa yang dikehendaki.

   • Pemisahan kandungan dan persembahan:

     • <hr> tag: menggunakan tag <hr> mencampurkan struktur kandungan dengan persembahan. Walaupun anda boleh menggayakannya dengan CSS, tag itu sendiri adalah sebahagian daripada kandungan HTML.
     • CSS: Menggunakan CSS untuk membuat peraturan mendatar sejajar dengan amalan terbaik pembangunan web dengan memisahkan kandungan (HTML) dari persembahannya (CSS). Pendekatan ini menjadikan kod anda lebih mudah dipelihara dan lebih mudah untuk dikemas kini.

   • Sokongan dan konsistensi penyemak imbas:

     • <hr> tag: tag <hr> disokong oleh semua penyemak imbas dan akan memaparkan secara konsisten merentasi pelayar yang berbeza, walaupun dengan gaya lalai yang mungkin berbeza sedikit.
     • CSS: Walaupun CSS menawarkan kebebasan yang lebih kreatif, penampilan yang tepat mungkin berbeza -beza di seluruh pelayar. Memastikan gaya yang konsisten merentasi platform yang berbeza mungkin memerlukan tweak CSS tambahan dan peraturan khusus penyemak imbas.

   Ringkasnya, menggunakan tag <hr> memberikan makna semantik dan cara cepat untuk memasukkan peraturan mendatar, tetapi CSS menawarkan fleksibiliti yang lebih besar dan selaras dengan amalan pembangunan web moden yang difokuskan untuk memisahkan kandungan dan persembahan.