HTML 元素、標籤和屬性：網頁組成的基本概念

學習 HTML 就像學習蓋房子，要先了解房子的基本組成：磚塊、水泥、鋼筋等等。在 HTML 的世界裡，這些基本組成就是元素、標籤和屬性。這篇文章將帶您深入了解這三個核心概念，並提供範例程式碼，讓您輕鬆掌握 HTML 的基礎！

1. HTML 元素 (Element)

定義： HTML 元素是 HTML 文件的基本組成單位。一個元素通常由一個開始標籤、內容和一個結束標籤組成。
結構：
```
<tagname attribute1="value1" attribute2="value2">內容</tagname>
                
```
- tagname：標籤名稱（例如 p、h1、div、a 等）。
- attribute1, attribute2：屬性（可選），用於提供元素的額外資訊。
- value1, value2：屬性值。
- 內容：元素包含的文字、圖片、其他元素等。
範例：
```
<p>這是一個段落。</p>
                
```
在這個範例中：
- <p> 是開始標籤。
- </p> 是結束標籤。
- 「這是一個段落。」是內容。
- 整個 <p>這是一個段落。</p> 是一個完整的 HTML 元素.
空元素 (Empty Element/Void Element)： 有些元素沒有內容，也沒有結束標籤，它們被稱為空元素。空元素通常用於插入某些東西到頁面中，例如圖片、換行等。
- 範例：
```
<img src="image.jpg" alt="圖片">
<br>
<hr>
<input type="text">
                
```
  這些都是空元素，它們只有開始標籤，沒有內容和結束標籤。在 HTML5 中，空元素的結尾斜線 `/` 是可選的（例如 `<br>` 和 `<br/>` 都是合法的）。

巢狀元素 (Nested Elements): 元素可以包含其他元素, 形成巢狀結構. 例如:

<div>
  <p>This is a paragraph <em>inside</em> a div.</p>
  <p>Another paragraph</p>
</div>

2. HTML 標籤 (Tag)

定義： 標籤是 HTML 元素的組成部分，用於定義元素的類型和作用。標籤用 < 和 > 括起來。
分類：
- 開始標籤 (Start Tag)： 標記元素的開始。例如：<p>, <div>, <h1>。
- 結束標籤 (End Tag)： 標記元素的結束。結束標籤與開始標籤的名稱相同，但在前面加上一個斜線 /。例如：</p>, </div>, </h1>。
- 空元素標籤 (Empty Element Tag/ Self-closing Tag): 沒有內容, 也沒有結尾標籤. 例如: <img src="url">, <br>, <hr>
範例：
```
<h1>這是一個標題</h1>
                
```
在這個範例中：
- <h1> 是開始標籤，表示這是一個 h1 標題元素。
- </h1> 是結束標籤。

結構：

<tagname attribute_name="attribute_value">

範例：
```
<img src="image.jpg" alt="風景圖片" width="500" height="300">
                
```
在這個範例中：
- <img> 是標籤。
- src, alt, width, height 是屬性名稱。
- "image.jpg", "風景圖片", "500", "300" 是屬性值。
- src="image.jpg" 是一個完整的屬性。
- 這些屬性提供了關於圖片的資訊：
  - src：圖片的 URL。
  - alt：圖片的替代文字（當圖片無法顯示時顯示）。
  - width：圖片的寬度。
  - height：圖片的高度。
常見屬性 (這些屬性通常可以用在很多 tag):
- id: 為元素定義唯一的 ID, 通常用於 CSS 或 JavaScript 選取元素
- class: 為元素定義一個或多個 class name, 通常用於 CSS 選取一群具有相同 class 的元素
- style: 直接在元素上定義 CSS 樣式 (inline style)
- title: 提供元素的額外說明, 通常在滑鼠 hover 到元素上時顯示
- data-*: 自定義屬性, 可以儲存自訂的資料在元素上

可以用一個比喻來理解：

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">連結到 Example 網站</a>

元素： <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">連結到 Example 網站</a>
標籤：
- 開始標籤：<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
- 結束標籤：</a>
屬性：
- href="https://www.example.com"
- target="_blank"
- rel="noopener noreferrer"
內容： 連結到 Example 網站

掌握 HTML 元素、標籤和屬性的概念是學習 HTML 的基礎。瞭解它們的定義、用法和關係，您就能更輕鬆地理解和編寫 HTML 程式碼，打造出結構良好、語義清晰的網頁！