剛開始學習網頁設計時，常會同時遇到很多新名詞。它們看起來彼此相似，其實各自負責不同工作。這篇筆記把我最常遇到的問題整理在一起，之後忘記時也能快速回來查找。

1. HTML、CSS、JavaScript 分別是什麼？

HTML 負責網頁的內容與結構，例如標題、段落、圖片、文章和按鈕。它像房子的樑柱與房間配置，先決定頁面裡有哪些東西。

CSS 負責外觀與排版，例如顏色、字體、間距、欄位和手機版樣式。它像室內設計，決定同一份內容要如何被看見。

JavaScript 負責互動與邏輯，例如搜尋文章、開啟手機選單、切換分類或驗證表單。它像房子裡的開關與自動設備，讓使用者操作後能得到回應。

HTML 放內容，CSS 管外觀，JavaScript 做互動。

2. 網址、網域與網站空間有什麼不同？

網址（URL） 是某個頁面的完整地址，例如 https://example.com/articles/start.html。它包含使用的通訊方式、網域與頁面路徑。

網域（Domain） 是網址中容易記住的名稱，例如 example.com。它把人帶到正確的網站，就像商店的門牌名稱。

網站空間（Hosting） 是實際存放 HTML、CSS、圖片等檔案的伺服器。可以把網域想成地址，把網站空間想成放置所有物品的房子。

3. GitHub Pages 是什麼？

GitHub Pages 是 GitHub 提供的靜態網站託管服務。把網站檔案放進 GitHub 儲存庫並啟用 Pages 後，就能獲得一個公開網址。

它適合作品集、學習筆記、說明文件與純前端網站，可以免費使用 HTML、CSS 和 JavaScript。不過它不直接提供資料庫、會員登入或伺服器端程式，所以複雜功能需要其他服務配合。

4. 什麼是 RWD 響應式網站？

RWD 是 Responsive Web Design 的縮寫，意思是網站會依照螢幕寬度調整排版。桌面版可以使用多欄，手機版則可能改成單欄、放大按鈕並簡化導覽。

它不只是把桌面畫面縮小，而是重新安排閱讀順序、字級、間距與操作範圍，讓手機、平板和電腦都能舒服使用。

5. 什麼是 SEO？

SEO 是 Search Engine Optimization，中文常稱搜尋引擎最佳化。目的是讓搜尋引擎更容易理解網站內容，也讓真正需要內容的人更容易找到它。

基本工作包括清楚的頁面標題、合適的摘要、語意正確的 HTML、可閱讀的文章、良好的手機版、合理的載入速度與正確的內部連結。SEO 能增加被理解與收錄的機會，但不保證一定排在搜尋結果第一名。

6. 網頁字型的 400、600、700 是什麼？

這些數字是 CSS 的 font-weight，用來表示字體粗細。一般來說，400 是正常字重，適合正文；600 是半粗體，適合小標題；700 是粗體，適合重要標題。

不是數字越大越好。粗體太多會讓每個地方都像重點，反而失去層級；而且字型檔本身必須支援該字重，才會呈現最自然的效果。

7. 網站為什麼需要 title？

<title> 會顯示在瀏覽器分頁、書籤名稱，也常成為搜尋結果的主要標題。它能讓使用者在開啟很多分頁時快速辨認頁面，也幫助搜尋引擎理解每一頁的主題。

每個重要頁面應該有獨立、清楚的 title，例如「網頁設計入門｜設計網頁之路」，不要讓所有文章都只顯示網站名稱。

8. Meta description 有什麼用途？

Meta description 是放在 HTML <head> 裡的頁面摘要。搜尋引擎可能把它顯示在搜尋結果標題下方，讓使用者在點擊前先知道頁面內容。

好的摘要應該簡潔、具體並與頁面內容一致。搜尋引擎有時會自行選取其他段落，因此它不是保證顯示的文字，也不是單靠填入關鍵字就能提升排名的工具。

導覽列是網站中通往主要頁面的選單，例如「首頁、全部文章、作品、關於」。它通常放在頁首，並在不同頁面維持一致位置，讓訪客知道自己可以去哪裡。

好的導覽列不需要塞滿所有連結，而是保留最重要的入口；手機版空間不足時，則可以收進容易操作的選單按鈕。

10. 什麼是 CTA 按鈕？

CTA 是 Call to Action，意思是引導使用者採取下一步行動。常見例子有「閱讀最新筆記」、「查看作品」、「立即訂閱」或「開始使用」。

CTA 的文字應該直接說明點擊後會發生什麼，視覺上也要比次要連結明顯。一個區塊通常只需要一個最主要的 CTA，避免每個按鈕都在搶注意力。

11. 為什麼網頁需要留白？

留白是文字、圖片與區塊周圍刻意保留的空間。它能分開不同內容、建立閱讀順序、減少壓迫感，也讓重要元素更容易被注意。

留白不是「什麼都沒做」，而是版面設計的一部分。真正要避免的是沒有功能的巨大空洞；有目的的間距則能讓網站更清楚、更好讀。

12. 什麼是 JavaScript 備援內容？

JavaScript 可能因為網路、程式錯誤、瀏覽器設定或載入失敗而無法執行。備援內容就是在這種情況下，仍讓使用者看到核心資訊或找到可行出口。

例如文章列表直接寫在 HTML 中，即使搜尋功能失效，文章連結仍能開啟；也可以用 <noscript> 提醒使用者互動功能暫時不可用。重點是備援提示只能在真的需要時出現，不能和正常內容同時顯示。

一個穩定的網站，不只照顧功能正常的時候，也替功能失效時保留閱讀的路。