HTML 區塊級元素和內聯元素
本文解釋了 HTML 的區塊級元素和內聯元素。
這解釋了區塊級元素和內聯元素之間的差異，以及主要的區塊級元素和內聯元素。
YouTube Video
塊級元素和行內元素
HTML 有兩個主要的元素類別決定它們在螢幕上的顯示方式：'區塊級元素' 和 '行內元素'。這些元素在頁面佈局中起著重要作用，並直接影響它們的定位方式。在此，我們將詳細說明每個元素的特性和使用方法。
什麼是區塊級元素？
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>區塊級元素通常佔據頁面的整個寬度，並與其他元素位於不同的行上。這些元素可以包含其他區塊級元素或行內元素，並定義文件的較大結構。
特點：
- 這些元素從新的一行開始，並擴展以佔據盡可能多的寬度（通常是父元素的全部寬度）。
- 它們與其他區塊元素在垂直方向上分隔，並應用邊距。
- 它們內部可以包含其他塊或內聯元素。
在此，使用了以下區塊級元素：。
<div>標籤通常用於構建版面。<p>標籤用來定義段落。<h1>到<h6>是用於定義標題的元素。<h1>是最大的標題，<h6>是最小的標題。<ul>標籤會創建一個無序列表。<ol>標籤會創建一個有序列表。<section>標籤定義了文件中的一個區段。
什麼是行內元素？
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>行內元素與其他元素位於同一行，通常只佔據其內容所需的寬度。這些元素被視為文字的一部分，與塊級元素不同，不會佔據整行。
特點：
- 元素出現在同一行，並與其他內聯元素並排放置。
- 寬度由元素的內容（文字或圖像）決定。
- 它們可以包含在區塊級元素內，但區塊級元素不能包含在行內元素內。
在此，使用了以下行內元素：。
<span>標籤用於以特定樣式強調文字的一部分。<a>標籤定義了一個超連結。<img>標籤是一個用於嵌入圖像的元素。<strong>強調重要文字（通常以粗體顯示）。<em>表示強調文本（通常以斜體顯示）。
區塊級元素和行內元素的區別
- 顯示方式：區塊級元素顯示在新的一行，並佔據頁面的全部寬度，而行內元素與其他元素一起顯示在同一行，其寬度由內容決定。
- 內部元素處理：區塊級元素可以包含其他區塊級元素以及行內元素，但行內元素不能包含區塊級元素。
- 佈局角色：區塊級元素主要用於創建頁面的佈局結構，而行內元素用於定義小元素，例如文字和連結。
區分的要點
創建佈局：使用區塊級元素，例如 <div>、<section>、<article> 定義大的區段和內容區塊。
文字裝飾和連結：使用行內元素，例如 <span>、<a>、<strong>、<em>，來裝飾部分文字或添加連結。
混合使用區塊級和內聯元素
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>- 使用區塊級元素如
<main>、<header>和<section>，它們通常會在新行呈現，占據其父元素的整個寬度。 - 使用內聯元素如
<a>、<strong>、<span>和<img>，它們在行內使用，並不會占據區塊級元素的整個寬度。
在區塊級元素內包含內聯元素是常見的模式。例如，在段落（<p>）中常見會包含連結（<a>）或重點強調（<strong>）。然而，由於不能在內聯元素中包含區塊級元素，因此正確使用它們非常重要。
總結
區塊級元素與內聯元素是 HTML 的兩種基本類型元素，各自具有其特定的作用。區塊級元素構成頁面佈局的基礎，而內聯元素則用於修飾及操作其中的細節內容。了解並正確使用這兩種元素能提升 HTML 編碼的效率。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。