HTML - 塊元素與行內元素

你好，未來的網頁開發者！今天，我們將要深入HTML的精彩世界，探討塊元素和行內元素。作為你們親切友善的電腦老師，我會帶領你們踏上這個旅程，並提供大量的範例和解釋。所以，拿起你們最喜歡的飲料，放鬆身心，我們開始編程吧！

塊元素

想像你正在用樂高積木蓋房子。其中一些積木很大，能夠獨自佔滿一整行。這些就像HTML中的塊元素。它們從新一行開始，並佔滿可用的全部寬度。

讓我們看看一些常見的塊元素：

<div>我是一個塊元素</div>
<p>我也是一個塊元素</p>
<h1>我是一個標題，同時也是一個塊元素！</h1>

當你運行這段代碼時，每個元素都會顯示在新一行上。就像它們在說："我需要自己的空間，非常感謝！"

這裡有一個常見塊元素的表格：

元素	描述
<div>	一個通用容器
<p>	一個段落
<h1> 至 <h6>	標題
<ul>	非排序列表
<ol>	排序列表
<li>	列表項目

行內元素

現在，讓我們想想那些可以並排放在同一行的較小的樂高部件。這些就像HTML中的行內元素。它們只佔據必需的寬度，並不從新一行開始。

這裡有一個範例：

<span>我是一個行內元素</span>
<a href="#">我是一個鏈接，同時也是行內的</a>
<strong>我加粗，也是行內的！</strong>

這些元素都會在同一行上顯示（如果有足夠的空間）。

這裡有一個常見行內元素的表格：

元素	描述
<span>	一個通用行內容器
<a>	一個超鏈接
<strong>	加粗文字
<em>	斜體文字
<img>	一個圖像
<br>	一個換行

組合HTML的塊元素和行內元素

現在我們已經了解了塊元素和行內元素，讓我們看看如何將它們組合起來。這就像把你的樂高部件組織到工具箱的不同隔間裡。

使用 <div> 標籤進行組合

<div> 標籤就像一個大盒子，你可以把多個元素放在一起。它本身就是一個塊級元素，所以它會從新一行開始。

讓我們看一個範例：

<div style="background-color: lightblue; padding: 20px;">
<h2>歡迎來到我們的網站</h2>
<p>這是一個放在 div 內的段落。</p>
<p>這裡有另一個段落，裡面有 <span style="color: red;">一些紅色文字</span>。</p>
</div>

在這個範例中，我們將一個標題和兩個段落放在一個 <div> 內。我們還添加了一些樣式，使其在視覺上更加突出。第二個段落內的 <span> 是一個行內元素，我們用它來改變一些文字的顏色。

使用 <span> 標籤進行組合

<span> 標籤就像一個小而透明的容器，你可以用它來組合行內元素，或者甚至是塊元素內的文字部分。

這裡有一個範例：

<p>
我喜歡 <span style="color: blue;">藍色</span> 和
<span style="color: green;">綠色</span>。
</p>

在這個例子中，我們使用 <span> 來給段落中的特定單詞應用不同的顏色。

記住，<div> 是用來組合塊級元素（或創建塊級組合）的，而 <span> 則是用來組合行內元素或文字部分。

組合所有知識

現在，讓我們把我們學到的知識結合起來，創造一個更複雜的範例：

<div style="background-color: #f0f0f0; padding: 20px; border: 1px solid #ccc;">
<h1>我的個人博客</h1>
<div style="margin-bottom: 20px;">
<h2>最新文章：編程的樂趣</h2>
<p>
編程就像解謎題。它具有挑戰性，但當你終於讓你的程序運行起來時，它會
<span style="font-weight: bold; color: #ff6600;">非常令人滿足</span>！
</p>
</div>
<div>
<h3>快速鏈接</h3>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於</a></li>
<li><a href="#">聯繫</a></li>
</ul>
</div>
</div>

在這個範例中，我們使用各種塊和行內元素創建了一個簡單的博客佈局。我們使用 <div> 標籤來組合相關內容，使用 <span> 來樣式化特定文字部分，並混合使用其他塊和行內元素來結構化我們的內容。

記住，HTML就像用樂高積木蓋房子。從基本的積木開始，等你反應過來，你已經創造出了驚人的結構！持續練習，不要害怕嘗試。我們都是這樣學會的！

祝編程愉快，未來的網頁魔法師！?‍♂️?

Credits: Image by storyset