在我出社會頭 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 的時候，腦海裡立刻浮現出當年在無名小站熬夜改版面的畫面。
這邊也分享一下當時幾個滿流行的平台：
以上算是當時滿流行的幾個平台，雖然現在大部分的人都改用像是 Medium、WordPress 或是自架的部落格，但這些平台在當時對於推廣網路文化和技術分享有很大的貢獻。
Note
如果有想要回顧以前的網站，你可以使用一個叫做 Wayback Machine（網路時光機） 的網站，你只要輸入你想要回顧的網站網址，它就會幫你抓取過去的版本，讓你可以看到以前的樣子，但是並不是所有的網站都有被抓取到，這點要注意。
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 的學習過程中，有兩點是比較需要注意的：
<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 全名是 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 的支援度不盡相同，因此畫面呈現也可能有所差異，那麼問題來了 —— 如果今天瀏覽器完全不支援某個 CSS 屬性，會發生什麼事呢？
簡單來講就是...直接忽略這個屬性，而不會出現錯誤。
一般來說，我們在寫程式碼時，如果用了不存在的語法，通常會出現錯誤提示，或者 IDE（開發環境編輯器）會提醒你這個屬性不存在，但 CSS 並沒有這種特性。
這點雖然有點令人困惑，卻也算是一種好處：
你的網頁不會因為寫了一個不存在的 CSS 屬性就整個崩壞；相對的，你也無法立即得知這個屬性是否真的存在，只能自己去查各個瀏覽器的支援度。
回想起來，當時無名小站有滿多很好聽的歌，但隨著無名小站的消失，滿多都歌都找不到了 QQ
本文將同步更新至以下網站：
iThome鐵人賽
看影片追技術