D7 | 理解 HTML 格式：網頁裡暗藏的玄機真多 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 7

自我挑戰組

從零開始的AI學習之路：非本科轉職的30天挑戰記系列第 7 篇

D7 | 理解 HTML 格式：網頁裡暗藏的玄機真多

17th鐵人賽

galingainga

2025-08-12 13:53:30

239 瀏覽

分享至

最近學到了AI輔助開發還有網頁爬蟲，都需要理解HTML格式，這讓我先想起求學時期，最期待去的電腦教室，教室地板是架高的，要脫鞋子才能進去，我是超愛只穿襪子在地板上溜冰的屁孩。
電腦是那種超大台的元老級電腦（作業系統我記得應該是WINDOWS 95？），老師會先切自己的畫面，再切回來給我們練習的那種，七、八年級生應該都有經歷過，然後下課的時候大家都在玩踩地雷跟新接龍XD

為什麼會想到這段回憶呢，大概是因為第一次接觸網頁時：「哇！我在網路上寫的東西居然大家都看得到、我也能看到別人寫的東西」，這樣的驚喜感吧！還有第一個email帳號大家都亂取名字，沒想到會一路用到成年... ...

一直到學了前端的基本知識，了解了HTML是一種用於建立網頁的標準標記語言，它告訴瀏覽器如何顯示網頁內容的「骨架」、用各種標籤來定義網頁的結構，例如：標題、段落、列表、圖片等等，讓瀏覽器可以正確地呈現網頁。
（是說我每次打開網購頁面，看到那些密密麻麻的商品跟分類，都還是覺得工程師很了不起）

理解 HTML 格式，等於懂得如何讓內容被正確呈現、被搜尋引擎友善讀取、找尋自己想要的資料位置等等，不得不說是有那麼一點枯燥，但又必須要理解，沒事就打開F12觀察一番。

我先來記最基本的 HTML 文件結構：

<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <title>範例標題</title>
  </head>
  <body>
    <h1>主標題</h1>
    <p>段落文字。</p>
  </body>
</html>

元素（Elements）與標籤（Tags）
為何有的有加斜線 / 、有的沒有呢？
原來是有一類叫自閉合標籤（self-closing tags 或 void elements），它們本身就不需要結束標籤，因為它們沒有內容，例如：

<img src="cat.jpg" alt="可愛的貓">
<br>
<hr>
<meta charset="utf-8">

每一個 HTML 元素通常由開始標籤、內容、結束標籤組成，用<>包起來。有些標籤是自閉合（void），像 img、br。
元素可以是巢狀結構。

屬性（Attributes）
我的奇怪口訣：a超連結配href、img 圖片配 src + alt、id唯一身分證號、class可共用制服編號、div無意義大方塊、span無意義小盒子。
屬性提供額外資訊，例如連結文字。重要屬性有 id、class、src、alt（圖片描述）
語意化標籤（Semantic Tags）
我的奇怪口訣：Header 頁首，Nav 導航，Main 主內容，Article/Section 分文章，Aside 側邊，Footer 收尾。
從 HTML5 開始有很多語意化標籤，讓內容「說清楚自己是什麼」。例如一篇部落格文章是用article包起來，導航列用nav，有助於搜尋引擎理解內容結構，也讓語音閱讀器更會讀。
標題層級要有邏輯
從 h1 到 h6，代表內容層級。每頁應該有一個 h1（主要標題），接著用 h2、h3 等做章節分層。
表單（Forms）與互動
form, input, label, button, label...
多媒體：圖片、影片、音訊
圖片：img src="..." alt="描述"。
影片：video
音訊：audio

還有URL格式也是有它的邏輯的，例如：

https://www.example.com:443/products/shoes.html?color=red&size=42#reviews

拆解組成：
https:// → 協定（Protocol）
www.example.com → 網域（Domain）
:443 → 埠號（Port，443 是 HTTPS 預設可省略）
/products/shoes.html → 路徑（Path）
?color=red&size=42 → 查詢字串（Query String），表示顏色是紅色、尺寸是42
#reviews → 片段識別符（Fragment），定位到頁面上的「reviews」區塊
細節說明：
1️⃣ 協定（Protocol / Scheme）
常見有：http://、https://、ftp://、mailto:、tel:

HTML 裡 a 標籤的 href、img 的 src 都會用到。

注意：https 比 http 安全。(多一個S就是secure!)

原來按開網址旁邊的鈕可以看到這些細節！

2️⃣ 網域名稱（Domain Name）
例如：example.com
例如：可以是 IP 位址：192.168.1.1

3️⃣ 埠號（Port）
預設可省略（HTTP 預設 80，HTTPS 預設 443）
若不是預設，必須寫出來，例如：:3000

4️⃣ 路徑（Path）
指向資源位置，例如 /blog/article
沒寫路徑時會預設為 /（網站首頁）

5️⃣ 查詢字串（Query String）
? 後面是參數，例如：?id=5&lang=zh
（以前不懂的時候，還想說為什麼大家的網址裡都要塞那麼多個問號）
多個參數用 & 分隔

6️⃣ 片段識別符（Fragment / Anchor）
#後面是頁內定位點，例如：#comments
常搭配 HTML 的 id 使用

初步理解了 HTML 和 URL 後，打開了一扇窗，看到網路世界背後的規則和秩序。
(真的非常有秩序！懷疑每位工程師是不是都是J人🤣)
而且每一個標籤、每一個屬性，都不是隨意存在的，而是為了讓資訊更有條理、更易理解。
數年前曾學習過一點點前端網頁設計，當時切版切得很崩潰，也讓我明白，寫網頁不只是堆砌內容，而是在搭建橋梁，讓使用者、搜尋引擎、甚至輔助工具都能順利通行。