一家補習班的主任在驗收會議上提了三個需求：把報名按鈕改成橘色、首頁多一段「師資介紹」、試聽表單送出後自動跳出可選的上課時段。工程師回答：「顏色是 CSS，十分鐘；師資介紹是 HTML，半天；時段選擇要寫 JavaScript 還要接後端，三天。」主任聽不懂為什麼差這麼多，也不好意思問。這三個詞是網站的骨架、衣服和神經，一起講清楚，你就看得懂報價單上每一行為什麼是這個價錢。
名詞 1：HTML ── 網站的骨架與隔間
一句話定義：HTML 決定頁面上「有什麼」：標題、段落、圖片、按鈕、表單。
類比：HTML 像房子的隔間圖。哪裡是客廳、哪裡是廚房、門開在哪，都在這一層決定。它不管牆壁漆什麼顏色，只管房間存不存在。
例子：補習班首頁的「課程列表」「師資介紹」「試聽表單」三個區塊，就是 HTML。新增一個區塊等於多隔一個房間，要決定放在哪、裡面有哪些欄位，還要顧到搜尋引擎怎麼讀它。依 MDN 的 HTML 說明，標題層級與語意標籤會影響搜尋引擎與螢幕閱讀器的理解，所以「只是多一段文字」常常也牽涉 SEO。
名詞 2：CSS ── 網站的裝潢與穿搭
一句話定義：CSS 決定頁面「長什麼樣子」：顏色、字體、間距、排版，以及手機和電腦上怎麼排。
類比：CSS 是裝潢與穿搭。同一間房子，換油漆、換燈、換家具擺法，住起來感覺完全不同，但房間數量沒變。
例子：把報名按鈕改成橘色，就是改一行 CSS，十分鐘。但如果網站有做好設計規範，「主色」是一個共用設定，改一次全站同步；如果每個按鈕的顏色是分開寫死的，就得一個一個找，十分鐘可能變成半天。這就是為什麼同樣是「改顏色」，不同廠商報價能差十倍。
名詞 3：JavaScript ── 網站的神經與肌肉
一句話定義：JavaScript 決定頁面「會做什麼」：點了之後的反應、即時計算、跟伺服器要資料。
類比：JavaScript 是房子裡的電路與自動門。按下開關燈會亮、有人靠近門會開，這些「反應」都要佈線，而且線路牽得越多，出問題時越難找。
例子：試聽表單送出後跳出可選時段，要用 JavaScript 向後端詢問哪些時段還有空位、處理兩個家長同時搶同一個時段、在網路不穩時顯示提示。這不是畫面問題，是邏輯問題，所以是三天。JavaScript 也是網站變慢的主因之一：HTTP Archive 2024 年報告指出，手機網頁載入的 JavaScript 中位數已達 558 KB，一年成長 14%，過多的腳本會拖慢 INP 互動反應指標。
三者之間的關係
想像一張由下往上的三層圖：最底層是 HTML 骨架，中間是 CSS 外觀，最上層是 JavaScript 行為，JavaScript 再伸出一條線連到後端伺服器與資料庫。越往上層、越接近後端，改動的影響範圍越大、測試越多。常聽到的 React、Vue 等前端框架，是把這三層包成一個個可重複使用的「元件」，像系統櫃：前期規劃多花時間，後期擴充與維護比較快。
對客戶決策的具體影響
- 預算：純 CSS 修改多以小時計（NT$1,000–3,000）；HTML 新區塊半天到一天；牽涉 JavaScript 與後端的新功能以天計（NT$15,000 起）。
- 時程：JavaScript 功能需要測試不同瀏覽器與手機，通常要多留 30% 的測試時間。
- 風險：外掛與追蹤碼多半是 JavaScript，每裝一個，網站就多一分變慢與出錯的可能。
該問廠商的 5 個問題
- 「這個修改是 HTML、CSS 還是 JavaScript？有沒有動到後端？」
- 「網站的顏色與字體是共用設定，還是每頁分開寫？」
- 「新增這段內容，標題層級和結構化資料會一起處理嗎？」
- 「這個功能會增加多少 JavaScript？對手機速度和 INP 有什麼影響？」
- 「上線前會在哪些瀏覽器和手機上測試？」
常見問題 FAQ
HTML、CSS、JavaScript 差在哪？
HTML 決定頁面有什麼內容，CSS 決定長什麼樣子，JavaScript 決定會做什麼反應。用房子比喻就是隔間、裝潢和電路。
為什麼改顏色很快，加功能要好幾天？
改顏色通常只動 CSS，影響範圍小；新功能多半要寫 JavaScript 並串接後端，還要處理例外狀況與多種裝置測試。
網站用 WordPress 還需要懂這三個詞嗎？
需要。佈景主題與外掛本質上也是 HTML、CSS、JavaScript，外掛裝太多會讓 JavaScript 暴增，拖慢速度並增加相容性問題。
畫面看起來差不多，工程量就差不多嗎？
不一定，這是最常見的誤解。畫面相同的兩個功能，一個只改 CSS，一個要接後端，工時可能差十倍以上。
行動呼籲
看不懂報價單上的工時為什麼這樣估？帶著你的需求清單預約 30 分鐘技術諮詢，我們會逐項告訴你是哪一層、為什麼這個價錢：
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p