1. HTML 的標籤
什麼是 HTML？
HTML (HyperText Markup Language) 是一種標記語言， 用來創建和結構化網頁。透過 HTML，我們可以使用多種標籤和屬性來組織頁面內容， 這樣瀏覽器就知道如何呈現資訊。在這堂課程中，我們會討論一些 HTML 的基礎概念， 比如標籤、標籤樹、屬性、單一標籤和 HTML 文件的結構。
在 HTML 中，標籤是用來標記內容的關鍵元素。它們會包裹文字和其他元素， 幫助瀏覽器了解如何顯示它們。例如，<h1> 和 <p> 標籤指示瀏覽器裡面的文字是標題或段落。
標籤寫在尖括號裡面 <>。大多數標籤都有一個開始標籤和結束標籤。 例如：
<h1>這是一個標題</h1>
<p>這是一段文字。</p>
在這裡，<h1> 是開始標籤， 而 </h1> 是結束標籤。
標籤樹
HTML 文件有一個層次結構，標籤彼此嵌套，構成一個樹狀結構。 這個「標籤樹」定義了頁面元素的關係以及顯示的順序。
以下是一個簡單的標籤樹範例：
<html>
<head>
<title>頁面範例</title>
</head>
<body>
<h1>頁面標題</h1>
<p>這裡是一段文字。</p>
</body>
</html>
在這個範例中，<html> 是根元素， 裡面包含了 <head> 和 <body>。在 <body> 中，包含了 <h1> 和 <p> 的標籤。 這樣的結構可以邏輯性排序頁面內容。
屬性
HTML 的屬性是用於給標籤添加額外資訊。它們位於開始標籤內，由名稱和值組成。 例如：
<a href="https://example.com">網站連結</a>
<img src="image.jpg" alt="圖片描述">
href指定連結的地址。src是圖片的路徑。-
alt是替代文字，當圖片無法加載時會顯示。
屬性讓元素可以有更多的特徵，例如 ID (id)， 類別 (class)，樣式 (style) 等。
單一標籤
有些 HTML 標籤沒有內容也不需要結束標籤，這些稱為單一標籤。 例如，<img> 用於插入圖片，其結構如下：
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="圖片描述">
<img src="image.jpg" alt="圖片描述">
其他單一標籤的例子：
<br>— 用於換行。-
<hr>— 用於添加水平線。
2. 認識 HTML 文件
HTML 文件以聲明 <!DOCTYPE html> 開頭， 指示瀏覽器這是一個 HTML5 文件。然後是根標籤 <html>，其內包含 <head> 和 <body> 標籤。 在 <head> 中包含文件的元數據（標題、樣式、腳本）， 而 <body> 則包含頁面的主要內容。
HTML 文件範例
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>我的第一個頁面</title>
</head>
<body>
<h1>歡迎光臨！</h1>
<p>這是一個 HTML 文件範例。</p>
<a href="https://example.com">造訪我們的網站</a>
</body>
</html>
-
<!DOCTYPE html>告訴瀏覽器這是 HTML5 文件。 -
<html lang="zh-TW">指定文件語言。 -
<meta charset="UTF-8">指定編碼，確保正確顯示字符。 -
<title>設定頁面標題，會顯示在瀏覽器標籤中。
<head> 中的其他標籤
<head> 中包含不直接顯示在頁面上的資訊， 但對網站運作很重要。以下是可以添加的標籤：
-
<meta name="description" content="頁面描述">— 為搜尋引擎提供頁面的簡短描述。 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">— 讓網站對行動裝置更加友善。 -
<link rel="stylesheet" href="styles.css">— 加入 CSS 樣式表文件。 -
<script src="script.js"></script>— 加入外部 JavaScript 文件。
這些標籤有助於增強用戶互動體驗，優化網站，以及引入必要的資源。
GO TO FULL VERSION