【Day 25】為什麼我莫名其妙變成了寫 HTML 跟 CSS 的人？

發表於 2025-09-25 分類於學習經驗

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

請我喝一杯咖啡

這篇筆記文章如果對你有幫助，
你可以也可以請我「喝一杯咖啡(Donate)」。

｜

莫名被指派切版的生存筆記：用故事帶你補齊 HTML 語意與結構、空元素與自閉合差異，並掌握 CSS 佈局與響應式核心，避開初學者最容易忽略的相容性地雷。

為什麼我莫名其妙變成了寫 HTML 跟 CSS 的人？

在我出社會頭 2～3 年裡，開發 Web 應用程式基本都靠 PHP，不過那時候的我，對 HTML 的理解只能說是「能顯示就好」，畫面結構、語意之類的完全沒在管。

雖然我算是很早就接觸 Web 開發，但那個時候 HTML5 還沒流行，主流的排版方式甚至還在用 Table，不過話說回來，也有可能只是因為我自己只會用 Table 來做佈局 XD。

直到後來進入了新公司才開始真正的開學習 HTML。

「你們有誰熟悉 Web、HTML、CSS 的？」主管一邊寫著 PHP 一邊問著團隊（只有五個人）。

「前端有夠難的，HTML 跟 CSS 有夠複雜。」主管問著團隊後，馬上接著抱怨講這句話。

「啊，那個 Ray，你來寫 HTML 跟 CSS 吧。」主管指著我。

說真的，當時我完全是莫名其妙就被推去負責 HTML 和 CSS。

原本我手上的武器是 PHP，結果臨時被丟去戰場，只能拿著 <div>跟<span>硬上，連 <h1>、<p> 這些都還在新手村的等級。(ಥ﹏ಥ)

「好，我試試看。」我沒有拒絕主管的要求，倒不是因為多熱血，而是因為我手上帶著兩個新人。

說穿了，其實是我自己也不懂，乾脆邊學邊裝懂，再假裝很專業地帶著他們一起學，結果我們三個就像是一支新手村的隊伍 XD。

回想起來，當時我在找 HTML 和 CSS 的學習資源時，第一個冒出來的就是 W3Schools —— 畢竟它算是相當老牌的教學網站，不過自己看了大概三十分鐘就有點看不下去，於是開始到處翻找其他線上課程資源，像是 TibaMe、Udemy 等等。

最後，我決定在 Udemy 上買了一門課程，名字就叫做 「使用 HTML、CSS 開發一個網站」。

使用 HTML、CSS 開發一個網站（圖源網路)

是的，這就是我的第一個 HTML 與 CSS 課程，也就是從這個課程開始，我才真正的認識 HTML 與 CSS 的世界，在學習的過程，也讓我想到以前的「無名小站」。

無名小站（圖源網路)

早期的無名小站是一個非常流行的部落格平台，我當時也常在上面寫文章。雖然它後來倒閉了，但對我來說仍是很重要的回憶。

因為那時候，為了讓自己的部落格看起來更漂亮，大家都會自己動手改版面，而改版面所需要的技術，正是 HTML 和 CSS。所以當我再次接觸 HTML 與 CSS 的時候，腦海裡立刻浮現出當年在無名小站熬夜改版面的畫面。

這邊也分享一下當時幾個滿流行的平台：

無名小站（wretch.cc）： 由交大學生開發，之後成立「無名小站股份有限公司」，再被 Yahoo! 收購，成為 Yahoo! 奇摩的一部分，2013 年 12 月 26 日正式關閉，當時 Yahoo! 奇摩部落格也一併收掉。
yam 天空部落格（blog.yam.com）： 算是無名用戶的重要避風港，不少人搬家到這裡，但最終也在 2018 年 10 月 1 日關閉並刪除所有資料。
痞客邦（pixnet.net）： 至今仍在運作，應該算是台灣最大的部落格平台之一（吧？）。不過我個人並沒有使用過。
Blogger（blogger.com）： Google 旗下的部落格平台，在台灣沒有像無名或痞客邦那樣熱門，但在國際上仍有一定用戶基礎，甚至不少 Google 工程師會用來寫技術文章。

部落格平台（圖源網路）

以上算是當時滿流行的幾個平台，雖然現在大部分的人都改用像是 Medium、WordPress 或是自架的部落格，但這些平台在當時對於推廣網路文化和技術分享有很大的貢獻。

Note
如果有想要回顧以前的網站，你可以使用一個叫做 Wayback Machine（網路時光機）的網站，你只要輸入你想要回顧的網站網址，它就會幫你抓取過去的版本，讓你可以看到以前的樣子，但是並不是所有的網站都有被抓取到，這點要注意。

HTML 基本概念

HTML 全名是 HyperText Markup Language，簡單來講就是描述一個網頁上的內容與結構的語言。

底下是一個基本的 HTML 範例：

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

檔案名稱會是以 .html 為副檔名為主，但是你也會有機會看到 .htm 的副檔名，這是屬於比較早期的 HTML 檔案格式，以現代開發來講，都是以 .html 為主。

而我們所知的 <div>、<span>、<h1>、<p> 等等，這些都被稱為 HTML 標籤（HTML Tags），它們用來定義或描述網頁的結構與內容，在前面的範例中，我們可以看到一些基本的 HTML 結構，而這些標籤都有屬於它的作用：

<!DOCTYPE html>： 這一行告訴瀏覽器這是一個 HTML5 文件，這是 HTML 文件的標準宣告。
<html lang="zh-Hant-TW">： 這一行定義了 HTML 文件的根元素，並指定語言為繁體中文。
<head>： 這一部分包含了文檔的元數據，例如字符集、視窗設定和標題。
<meta charset="UTF-8">： 這一行指定了文檔的字符編碼為 UTF-8，這是目前網頁開發中最常用的編碼。
<meta name="viewport" content="width=device-width, initial-scale=1.0">： 這一行設定了視窗的寬度和縮放比例，這對於響應式設計非常重要。
<title>： 這一行定義了文檔的標題，這個標題會顯示在瀏覽器的標籤上。
<body>： 這一部分包含了文檔的主要內容，所有顯示在瀏覽器上的內容都應該放在這個標籤內。

Note
響應式設計（Responsive Design）是一種設計方法，旨在使網頁能夠根據不同設備的螢幕大小和解析度自動調整佈局和內容，以提供最佳的使用者體驗。這通常通過使用 CSS 媒體查詢（Media Queries）來實現，讓網頁在桌面、平板和手機等不同設備上都能夠良好顯示。

你可能會問

「那 </title>、</head>、</body> 這些是什麼？」

在 HTML 標籤中，會有許多的 「開啟標籤」 與 「關閉標籤」 ，開啟標籤是用來定義一個元素的開始，而關閉標籤則是用來定義這個元素的結束，當然你可能會看到有些標籤是沒有關閉標籤的，這些標籤被稱為 「自閉合標籤」 ，例如 <img>、<br> 等等，這部分我們後面再來解釋。

如果你去翻閱 HTML 的相關資源，你會看到非常非常多的標籤，這些標籤有的用來定義文字、圖片、連結、表格等等，這些標籤都有各自的用途與屬性，但實際上你全部都要看懂嗎？老實講，不需要，因為你真正需要的只有常用的幾個標籤，像是 <div>、<span>、<p>、<a>、<img> 等等，這些標籤就足夠應付大部分的情境需求，而它底下的屬性也是相對簡單的。

只是我認為 HTML 的學習過程中，有兩點是比較需要注意的：

語意化： HTML 標籤不僅僅是用來呈現內容，更重要的是要能夠表達內容的語意，例如使用 <h1> 到 <h6> 來定義標題的重要性，使用 <p> 來定義段落，這些語意化不單純只是讓搜尋引擎更容易理解內容，對於開發者來說，也能夠更清楚地了解內容的結構與意圖。
元素特性： 每個標籤都有屬於它自己的元素特性，這邊所講的元素特性並不是指標籤可以接受的屬性，而是所謂的 區塊元素 與 行內元素 ，區塊元素會佔據整個行的寬度，而行內元素則不會，這對於佈局與樣式的設計非常重要，尤其是響應式設計中，這個概念更是不可或缺。

那麼前面有提到 HTML 標籤有自閉合標籤，這是什麼意思呢？

自閉合標籤是指那些不需要結束標籤的 HTML 標籤，那麼為什麼會有這樣的標籤呢？這邊要額外補充一個概念，也就是 Void elements（空元素）跟 Normal elements（普通元素）。

在 HTML 中除了有所謂的行內元素與區塊元素之外，還有一個分類就是空元素，這些空元素不需要結束標籤，因為它們本身是沒有內容的（甚至不允許有內容），所以這些標籤就不需要結束標籤，常見的空元素有：

元素	用途	寫法範例
`<area>`	影像地圖中的可點擊區域	`<area shape="rect" coords="34,44,270,350" href="link.html" alt="區域">`
`<base>`	設定頁面內所有相對 URL 的基準路徑	`<base href="https://example.com/">`
`<br>`	換行符（Line Break）	`<br>`
`<col>`	表格欄位設定（需配合 `<colgroup>`）	`<col span="2" style="background:yellow">`
`<embed>`	嵌入外部資源（如影片、PDF）	`<embed src="file.pdf" type="application/pdf" width="600" height="400">`
`<hr>`	水平線分隔	`<hr>`
`<img>`	插入圖片	`<img src="image.jpg" alt="描述文字">`
`<input>`	表單輸入欄位	`<input type="text" name="username" placeholder="輸入名稱">`
`<link>`	引入外部資源（常用於 CSS）	`<link rel="stylesheet" href="style.css">`
`<meta>`	設定頁面中繼資訊（SEO, 編碼）	`<meta charset="UTF-8">`
`<source>`	`<audio>` 或 `<video>` 的媒體來源	`<source src="video.mp4" type="video/mp4">`
`<track>`	`<video>` 或 `<audio>` 的字幕檔	`<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">`
`<wbr>`	建議換行點（Word Break Opportunity）	`<wbr >`

那麼你可能會看到有人這樣寫 <img src="image.jpg" alt="描述文字" />，這種狀況是因為 XHTML（XML 的一種）規範要求所有標籤都必須閉合，所以 <img> 這個標籤就會寫成 <img src="image.jpg" alt="描述文字" />，但在 HTML5 中，這個閉合斜線是可以省略的，所以你可以直接寫成 <img src="image.jpg" alt="描述文字">，甚至在 HTML5 中，這兩種寫法都是正確的。

「XHTML 是什麼？」

我知道你可能會提問這個問題，XHTML 其實是 HTML 的一種延伸擴充，只是通常來講我們開發還是比較常用 HTML 就是了，所以這部分就不多做解釋。

CSS 基本概念

CSS 全名是 Cascading Style Sheets，中文翻譯是「層疊樣式表/階層樣式表」，最主要是用來描述 HTML 元素的樣式與佈局。

底下是一個基本的 CSS 範例：

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}
h1 {
  color: #333;
  font-size: 2em;
}

CSS 是無法單純運作的，它需要搭配 HTML 來使用，通常我們會在 HTML 的 <head> 區塊中使用 <style> 標籤來寫 CSS，或者是使用外部的 CSS 檔案。

較早期來講，其實滿多人都不在意 CSS 的，畢竟瀏覽器的支援性並不一致，許多瀏覽器對於 CSS 的支援都不太好，但隨著人們對於畫面的要求度越來越高，瀏覽器對於 CSS 的支援度也越來越好，CSS 對於網頁開發來講也變成了一種顯學。

通常學習 CSS 的人，都會得到一個結論：

「易學難精。」

其實這件事情一點也沒有錯，CSS 的語法非常簡單且直覺，在前面的範例中，你應該可以很快的理解每一行程式碼的意思，直接翻譯成中文就是：

background-color：背景顏色
font-family：字型
color：文字顏色
font-size：字型大小

至於 body 跟 h1 呢？指的就是 HTML 中的 <body> 跟 <h1> 標籤，所以以 body 為例，這段 CSS 的意思就是：

「我要將 HTML 中的 <body> 標籤的背景顏色設為 #f0f0f0，字型設為 Arial 或者是 sans-serif。」

是不是非常淺顯易懂呢？沒錯，CSS 就是這個簡單，就是因為這麼簡單才會讓你粗心大意，讓你不願意去深入了解它。

那麼 CSS 真正易學難精的點是哪些呢？我認為主要有以下幾個點：

選擇器： CSS 的選擇器非常多樣化，從基本的元素選擇器到複雜的組合選擇器、偽類選擇器等，這些都需要時間去理解與掌握。
佈局模型： CSS 有多種佈局模型，如盒模型、Flexbox、Grid 等等，每種模型都有其特點與使用場景，這些模型的理解與應用需要時間去練習。
響應式設計： 隨著移動設備的普及，響應式設計變得越來越重要，這需要對媒體查詢、彈性佈局等有深入的理解。
瀏覽器兼容性： 不同瀏覽器對於 CSS 的支援程度不同，這需要開發者去測試與調整，確保在各種瀏覽器上都能正常顯示。
性能優化： CSS 的性能優化也是一個重要的課題，如何減少重繪與重排、如何使用合適的選擇器等，這些都需要深入的理解。

那麼我們該怎麼樣開始好好的學習 CSS 呢？我認為可以從幾個方面入手：

基礎語法： 先掌握 CSS 的基本語法與選擇器，了解 CSS 常見的語法以及使用方式，實際開發上其實也就那幾個語法跟用法而已。
佈局模型： 在進入響應式設計之前，必須要先懂的 CSS 佈局模型，如盒模型、Flexbox、Grid 等等，這些都是非常重要的概念，否則你在還原設計稿時，會時常因為那 1px 的差異而感到困惑。
實際練習： 有輸入也要有輸出，找一些範本或設計稿試著還原，有助於自己對於語法的熟悉度與掌握度，一開始速度慢沒關係，但是慢慢地再重複練習上要越來越快速，這樣才有其意義。
響應式版型： 現代幾乎人手一隻手機，在早期來講響應式設計並沒有那麼重要，但現在響應式設計已經成為了網頁開發的必備技能，必須要學習並了解什麼尺寸下該如何調整樣式，這部分可以從媒體查詢開始學習。

兼容性跟性能呢？其實我認為先不用考慮到那麼深，等到你開始學習出一個心得與成就感再說，畢竟這些問題都是在你開始實際開發後才會遇到的。

這裡有一件事值得特別提一下，那就是 「兼容性」 。前面提過，每個瀏覽器對 CSS 的支援度不盡相同，因此畫面呈現也可能有所差異，那麼問題來了 —— 如果今天瀏覽器完全不支援某個 CSS 屬性，會發生什麼事呢？

簡單來講就是…直接忽略這個屬性，而不會出現錯誤。

一般來說，我們在寫程式碼時，如果用了不存在的語法，通常會出現錯誤提示，或者 IDE（開發環境編輯器）會提醒你這個屬性不存在，但 CSS 並沒有這種特性。

這點雖然有點令人困惑，卻也算是一種好處：
你的網頁不會因為寫了一個不存在的 CSS 屬性就整個崩壞；相對的，你也無法立即得知這個屬性是否真的存在，只能自己去查各個瀏覽器的支援度。

結語

回想起來，當時無名小站有滿多很好聽的歌，但隨著無名小站的消失，滿多都歌都找不到了 QQ

同步更新

本文將同步更新至以下網站：