Day 6: 網頁的骨架：HTML 基礎結構與常用標籤

2025 iThome 鐵人賽

DAY 7

Security

跨出第一步:D 從0到0.1的Web security 系列第 7 篇

17th鐵人賽

cloudyouo

2025-09-21 13:40:34

56 瀏覽

分享至

HTML (HyperText Markup Language，超文本標記語言) 是構成網頁的標準標記語言。它使用一系列的「標籤」(tags) 來定義網頁的內容與結構。瀏覽器會讀取 HTML 文件，

HTML 基礎結構
一個最基本的 HTML 文件結構包含以下幾個部分，它們就像是網頁的骨架：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
  </head>
  <body>
    <h1>這是一個標題</h1>
    <p>這是一個段落。</p>
  </body>
</html>

我們來看一下上面這個範例程式(因為這裡會濾掉HTML Code,所以我用另一個方式來寫)

<!DOCTYPE html>:

這不是一個 HTML 標籤，而是一個「文件類型宣告」(Document Type Declaration)。

它的作用是告訴瀏覽器，這個頁面是使用 HTML5 的標準來編寫的。這是現代網頁開發的標準宣告，應該放在所有 HTML 文件的最頂端。

<html>:

這是整個 HTML 文件的根元素 (root element)。所有其他的 HTML 元素都必須被包覆在這個標籤裡面。

你可以加入 lang 屬性來宣告網頁的主要語言，例如 <html lang="zh-Hant"> 代表繁體中文。

<head>:

這個區塊包含了網頁的「元數據」(metadata)，也就是描述網頁本身資訊的資料，這些資訊通常不會直接顯示在網頁的主要內容區域給使用者看。

常見的 <head> 內容包括：

<meta>: 提供元數據，例如 charset="UTF-8" 指定了網頁使用的字元編碼是 UTF-8，這是最廣泛使用的編碼，可以正確顯示各種語言的文字，避免亂碼。

<title>: 設定網頁的標題，會顯示在瀏覽器分頁的標籤上，以及搜尋引擎的結果頁面中。

<link>: 用於連結外部資源，最常見的是連結 CSS 樣式表。

<style>: 用於直接在 HTML 文件中編寫 CSS 樣式。

<script>: 用於連結外部 JavaScript 檔案或直接編寫 JavaScript 程式碼。

<body>:

這個區塊包含了網頁所有可見的內容，也就是使用者在瀏覽器視窗中能看到的所有東西，例如文字、圖片、連結、表格、列表等等。

網頁的主要內容都應該放在這個標籤裡面。

然後我們再來看一下其他常用的標籤

1. 文字與標題
這些標籤用於組織與呈現文字內容。

<h1> 到 <h6>: 標題 (Headings)

<h1> 是最高層級、最重要的標題，字體最大。<h6> 是最低層級、最不重要的標題，字體最小。

標題有助於建立文件的結構與大綱，對於 SEO (搜尋引擎優化) 也非常重要。

範例: <h1>網站主標題</h1>

<p>: 段落 (Paragraph)

用於定義一個文字段落。瀏覽器通常會在段落前後自動加上一些空白。

範例: <p>這是一段關於 HTML 的介紹文字。</p>

<a>: 超連結 (Anchor)

用於建立可以點擊的連結，將使用者引導到其他頁面、網站或文件中的某個位置。

href (Hypertext Reference) 屬性是必須的，它定義了連結的目標 URL。

target="_blank" 屬性可以讓連結在新分頁中開啟。

範例: <a href="https://www.google.com" target="_blank">前往 Google</a>

<span>: 行內區塊 (Span)

它是一個通用的「行內容器」，本身沒有任何語意。主要用途是將一小段文字或行內元素包裝起來，方便透過 CSS 或 JavaScript 對其進行樣式設定或操作，而不會打斷段落的流動。

範例: <p>這段文字中有<span style="color:red;">紅色的部分</span>。</p>

<strong> 和 <b>:

<strong>: 定義具有「重要性」的文字，瀏覽器預設會以粗體顯示。語意上強調重要性。

<b>: 也是用來顯示粗體文字，但它沒有 <strong> 的語意重要性，純粹是視覺上的樣式。

<em> 和 <i>:

<em>: (Emphasis) 強調文字，瀏覽器預設會以斜體顯示。語意上表示強調。

<i>: (Italic) 也是用來顯示斜體文字，但沒有語意，通常用於技術術語、外來詞彙等。

2. 圖片與媒體
<img>: 圖片 (Image)

用於在網頁中嵌入圖片。這是一個「空元素」(empty element)，沒有結束標籤。

src (Source) 屬性是必須的，它指定了圖片的來源路徑。

alt (Alternative text) 屬性提供了圖片的替代文字。當圖片無法載入時，會顯示這段文字。這對無障礙網頁 (accessibility) 和 SEO 非常重要。

範例: <img src="images/logo.png" alt="網站 Logo">

還有很多的標籤可以使用,不過這邊就簡單說明一些,有興趣的同學可以去w3schools學習一下