Elemen Block-level dan Inline dalam HTML
Artikel ini menerangkan elemen block-level dan inline dalam HTML.
Ini menerangkan perbezaan antara elemen tahap blok dan elemen sebaris, serta elemen utama tahap blok dan elemen sebaris.
YouTube Video
Elemen peringkat blok dan elemen sebaris
HTML mempunyai dua kategori utama elemen yang menentukan bagaimana ia dipaparkan di skrin: 'elemen tahap blok' dan 'elemen sebaris'. Elemen-elemen ini memainkan peranan penting dalam susun atur halaman dan secara langsung mempengaruhi bagaimana ia diletakkan. Di sini, kami akan menerangkan dengan terperinci ciri-ciri dan kegunaan setiap elemen.
Apakah elemen tahap blok?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Elemen tahap blok biasanya memenuhi keseluruhan lebar halaman dan muncul pada baris yang berasingan daripada elemen lain. Elemen-elemen ini boleh mengandungi elemen tahap blok atau elemen sebaris di dalamnya dan mentakrifkan struktur dokumen yang lebih besar.
Ciri-ciri:
- Elemen-elemen ini bermula pada baris baru dan meluas untuk memenuhi keluasan sebanyak mungkin (biasanya keseluruhan lebar elemen induk).
- Elemen-elemen ini dipisahkan secara menegak dengan margin digunakan di antara mereka.
- Mereka boleh mengandungi elemen blok atau inline lain di dalamnya.
Di sini, elemen tahap blok berikut digunakan:.
- Tag
<div>biasanya digunakan untuk membina reka letak. - Tag
<p>digunakan untuk mentakrifkan perenggan. <h1>hingga<h6>adalah elemen yang digunakan untuk mendefinisikan tajuk.<h1>adalah tajuk terbesar, dan<h6>adalah tajuk terkecil.- Tag
<ul>mencipta senarai tidak teratur. - Tag
<ol>mencipta senarai berurutan. - Tag
<section>mentakrifkan satu bahagian dalam dokumen.
Apakah elemen sebaris?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Elemen sebaris diletakkan pada baris yang sama dengan elemen lain dan biasanya hanya menggunakan lebar sebesar kandungan mereka. Elemen-elemen ini dianggap sebagai sebahagian daripada teks dan, tidak seperti elemen peringkat blok, tidak memenuhi seluruh baris.
Ciri-ciri:
- Elemen muncul pada baris yang sama dan diletakkan bersebelahan dengan elemen inline yang lain.
- Lebar ditentukan oleh kandungan elemen (teks atau imej).
- Mereka boleh dimasukkan ke dalam elemen tahap blok, tetapi tidak sebaliknya.
Di sini, elemen sebaris berikut digunakan:.
- Tag
<span>digunakan untuk menekankan sebahagian daripada teks dengan gaya tertentu. - Tag
<a>mentakrifkan hiper pautan. - Tag
<img>adalah elemen yang digunakan untuk menyisipkan imej. <strong>menonjolkan teks penting (biasanya dipaparkan dalam huruf tebal).<em>menunjukkan teks yang ditekankan (biasanya dipaparkan dalam huruf condong).
Perbezaan antara elemen tahap blok dan elemen sebaris
- Kaedah paparan: Elemen tahap blok dipaparkan pada baris baru dan memenuhi lebar penuh halaman, manakala elemen sebaris dipaparkan pada baris yang sama dengan elemen lain dan lebar mereka ditentukan oleh kandungan mereka.
- Pengendalian elemen dalaman: Elemen tahap blok boleh mengandungi elemen tahap blok lain serta elemen sebaris, tetapi elemen sebaris tidak boleh mengandungi elemen tahap blok.
- Peranan reka letak: Elemen tahap blok terutamanya digunakan untuk mencipta struktur reka letak halaman, manakala elemen sebaris mentakrifkan elemen kecil seperti teks dan pautan.
Titik penting untuk pembezaan
Mencipta reka letak: Gunakan elemen tahap blok seperti <div>, <section>, <article> untuk mentakrifkan bahagian-bahagian besar dan blok kandungan.
Hiasan teks dan pautan: Gunakan elemen sebaris seperti <span>, <a>, <strong>, <em> untuk menghiasi bahagian teks atau menambah pautan.
Mencampur elemen peringkat blok dan elemen sebaris
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Elemen peringkat-blok seperti
<main>,<header>, dan<section>digunakan, dan biasanya dihasilkan pada baris baru, mengambil lebar keseluruhan elemen induknya. - Elemen inline seperti
<a>,<strong>,<span>, dan<img>digunakan, dan mereka ditempatkan dalam baris tanpa mengambil lebar penuh dalam elemen peringkat-blok.
Menyertakan elemen sebaris dalam elemen peringkat blok adalah corak yang biasa. Sebagai contoh, adalah biasa untuk memasukkan pautan (<a>) atau penekanan (<strong>) di dalam perenggan (<p>). Walau bagaimanapun, memandangkan anda tidak boleh memasukkan elemen tahap blok di dalam elemen sebaris, adalah penting untuk menggunakannya dengan sesuai.
Ringkasan
Elemen tahap blok dan elemen sebaris adalah dua jenis asas elemen HTML, masing-masing dengan peranannya sendiri. Elemen tahap blok membentuk asas susun atur halaman, manakala elemen sebaris digunakan untuk menghias dan memanipulasi kandungan halus di dalamnya. Memahami dan menggunakan kedua-dua jenis elemen ini dengan betul membolehkan pengekodan HTML yang berkesan.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.