方格精選
【自學程式】如果網頁是一台小車車？淺談網頁三巨頭：HTML、CSS及JavaScript
更新於 2022/11/10閱讀時間約 8 分鐘
許多初學網頁開發的朋友們，一開始都不太理解HTML、CSS、 JavaScript之間的差異性，導致初期規劃學習計畫時毫無頭緒。
會有這樣的困擾，主要在於不了解HTML、CSS、 JavaScript之間的關係，以及這三者在網頁運作時所扮演什麼角色，導致越學越阿雜的狀況。
今天就要跟大家聊聊，什麼是網頁三巨頭？以及初學網頁開發該注意些什麼：
如果網頁是一台小車車⋯⋯
你可以想像現在有一台粉紅色的車，這台車有很多的配件：車窗、引擎、座椅⋯⋯所有你看的到以及看不到的車零件。
賣車的業務會跟你說，這些車子零件組裝的方式及配備規格會影響到它的性能，但座椅、烤漆外觀相關的要素，可以隨意更改。
但身為飆仔的你怎麼可能什麼都不改只改座椅？所以你可會接著改排氣管、改車輪匡，爆改一通後，性能可能變好，可能變差。
而你買了這台車後，開上路後你可以選擇要開去哪，可以開去旅遊、上班，當然也可以停在那邊都不動。
聽到這裡，是不是覺得這台小車車是不是跟什麼東西很像？
沒有錯！其實網頁的運作原理就跟一台車運作的原理很相似：網頁會有他的零件架構，就好比車會有引擎、零件；同樣地，就跟你可以改變車子的烤漆顏色、選擇車尾燈要不要像七彩霓虹燈一樣，我們可以隨意改變網頁的外觀、顏色。
HTML、CSS、 JavaScript
一個成功的網頁，主要由HTML、CSS、 JavaScript三種程式語言所構成。
你可以藉由使用HTML來控制網頁要有幾個欄位，藉由CSS來決定字要多大、什麼顏色，透過JavaScript控制網頁會在你點擊「購買」時，跳出結帳頁面。
我在初學網頁開發時，總會有非常多疑問，像是：「為什麼不能用一種語言解決所有網頁的事？要三個語言來處理？」
又或者是，HTML明明也可以控制「網頁外觀」這件事，我們會什麼不這樣做？
試想看看，如果網頁開發就好比產製一台車，你會把所有的工作都交給一個公司嗎？還是會透過分工合作，分別將任務指派給專精零件、烤漆、電路系統的廠商呢？
我們都在公民課上學過，將工作任務依照比較利益分配給適合的人，最後得出的效益會更高。
網頁的建構開發也是如此，網頁三巨頭，正是構成網頁的主要要素：
HTML專門負責網頁的架構、CSS 負責網頁的外觀，JavaScript則是控制網頁的行為。
透過HTML控制網頁架構、CSS負責外觀，而JavaScript負責網頁行為的方式，程式碼才能有效率的分工、溝通，有效做出一個「效能好」的網站，而效能好的網站才會帶來流量。
網頁的零件結構：HTML
先前提到，HTML就好比是網頁的零件，組裝的好不好，用的零件恰不恰當，會嚴重影響到網頁的SEO（影響到網站被搜尋到的機率）、使用者的瀏覽方便度。
HTML（Hypertext Markup Language）是一種專門用來管理網頁內容的標注語言，透過HTML所建立出來的檔案，會建立出以.html結尾的文件格式，需要透過網頁瀏覽器才可以把它打開。
我們可以透過操作HTML標籤（HTML Tag），來幫網頁新增元素（element），像是新增圖片、段落標題等。
常見的網頁標籤像是：建立標題以h開頭的標籤，依照標題的大小從<h1>排列至<h6>，或是用來建立文字段落的<p>標籤。
另外值得一提的是，我們常見一頁式網站、單欄、雙欄、三欄的網頁樣式，也都需要透過HTML的區塊（<div>）元素，來做切割與排版，這就好比是幫一台車建立出基本的「型」，要有好的基礎才能跑得快、讓使用者喜歡。
標籤的使用範例如上，我使用了<h1>標籤建立出一段標題，也使用了<p>標籤建立出一個字型較小的段落。
通常這些建立文字的標籤會有一個opening tag（起始標籤）及closing tag（結尾標籤），而我們要呈現文字的就會被包裹在標籤中間。
雖然<h1>與<p>標籤都是屬於建立文字的標籤，但是預設字體、大小，以及對瀏覽器的功能不同，HTML裡其他的標籤也是用此方式建立出網頁的架構。
那重點來了，如果我不想要標題那麼大怎麼辦？想要改顏色怎麼辦？
外觀交給我：CSS
CSS是專門用來更改HTML檔案樣式的文件格式，可以藉由CSS選擇器（CSS selector）來選擇你要更改的HTML元素，並在該元素裡加上你想要的樣式。
CSS選擇器使用的方式，是在你想要選擇的HTML標籤，去掉外面的<>後，會變成我們所謂的CSS選擇器，之後加上兩個大括號（curly braces），並在大括號的中間加上CSS屬性（Attribute），並賦予該屬性值（value），就能用來操控網頁呈現的樣式。
像是：h1 { color:red;}。
通常一開始學程式時，上面那一段文字一定非常不好懂，但簡單用車子案例來說就是：車頂{烤漆： 紅色}。
這又是什麼意思呢？
如果網頁是一台小車車，我們可以選擇想改變的區塊，今天我想要車頂跟其他地方的烤漆顏色長得不一樣，所以我跟老闆說：「老闆我的『車頂{烤漆： 紅色}。」老闆就會幫你車頂的烤漆換成紅色。
也會有人說：「我難道不行只跟老闆說，我要『車頂紅色』嗎？」
在這裡要跟大家說明一下：
電腦就跟車行老闆一樣，你不講清楚，他們會聽不懂！搞不好你這樣說，老闆還以為你的車頂的透天窗玻璃弄成紅色的。
所以這個時候我們就需要一套標準化的溝通方式，讓我們與各家車行老闆的認知對齊（對齊開發者與各家瀏覽器的認知），這就是CSS selector。
回到剛剛的案例，我們有兩個文字段落，而一開始的大標題顏色是黑色的，我們覺得不太顯眼，想要把它改成紅色的，這樣怎麼做呢？
我們在h1選擇器後面加上{ }，並在其中加入「color:red; 」，把標題預設的字體顏色改成紅色的，如果要更改其他元素的樣式，也需要用同樣的方式去做更改。
在這裡補充：網頁的程式語法使用規範，是由W3C這個機構制定的，為的就是所有開發者可以用同一套「標準化」的溝通方式與瀏覽器交流，才不會有早期網頁開法語法使用都不一致，導致同一套語法可能不能適用大部分瀏覽器的狀況出現。
網頁的大腦：JavaScript
如果說有一台漂亮到不行的小車車，但它卻發不動，也不能開上路，這像話嗎？
JavaScript是專門為網頁開發而生的程式語言，與HTML跟CSS功能完全不同，如果說HTML是車子的零件架構，CSS是掌管車子的外觀，那JavaScript就是掌管車子往哪開的大腦了。
在剛開始初學網頁開發時，我曾經詢問使用Java開發Android的朋友J：「JavaScript跟Java是親戚嗎？」
朋友J大傻眼說：「Java跟JavaScript的差異就好像car跟carpet一樣。」
當年Java這個程式語言誕生時，紅極一時，於是JavaScript的名字改了又改，最後名字竟然還跟Java長得像兄弟。
但實際上這兩者的關係，就好像car跟carpet這兩個單字一樣，雖然長得很像，但做的事跟意思完全不一樣。
雖然這兩者是完全不一樣的東西，但在JavaScript發展的過程中，借鑒了不少類似C語言的（像是Java）的語法，學習起來倒是有幾分相似。
那麼JavaScript是如何操作網頁這台小車車呢？
相較於HTML及CSS，JavaScript才真正涉及到運算、邏輯判斷，我們會透過DOM（文件物件模型）去選取網頁元素，並進行邏輯判斷，決定網頁的呈現方式。
舉例來說，我希望使用者可以點擊網頁上的按鈕，而不是其他地方，我就可以設置一套邏輯，當點擊到錯誤地方時，就跳出警示訊息。
然而我們要如何知道點錯地方呢？這時候就必須要對HTML元素有很深的了解，才有辦法透過JavaScript開這部網頁小車車。
之後的章節，我們會來解析更多有關HTML元素、標籤的應用！關於網頁技術的問題，歡迎你下方留言跟我討論與交流：）
我是Vivian，我們下次見。
關於我：
2019年從英文系畢業，2021下定決心開啟轉職工程師的新生活，相信不斷學習會有成長的一天。
｜Instagram: Vivian Yeh｜vivian_enlife
｜聯絡我：vivian.enlife@gmail.com
430會員
100內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助