方格精選
【自學程式】如果網頁是一台小車車？淺談網頁三巨頭：HTML、CSS及JavaScript
許多初學網頁開發的朋友們，一開始都不太理解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
｜聯絡我：[email protected]
此篇文章會顯示動態置底廣告
為什麼會看到廣告
422會員
99內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎，是台南地區一所特別的實驗學校。小學部分經營已經有七年，從一開始僅有八位學生到如今成長至七十多名學生，這樣的發展過程中，需要家長們慢慢了解並認同蒙特梭利的教育理念。
在這幾年的疫情風波中，學校經歷了許多挑戰，但已逐漸趨於穩定。上華蒙特梭利小
第二題練習題～應用的內容跟判斷質數差不多，甚至再更少一點（因為沒有要用到迴圈），所以這次寫起來就快很多，除了題目難度比較低之外，經過上次的洗禮之後，對於解題應該有再抓到更多感覺，所以寫這題比較有成就感一點XD
主題：宣告變數和判斷式的的綜合小應用
題目：每個人都有心目中夢想的身高，像小鳴就夢想著
從跟著教學影片把老師的程式抄過一遍，變成看到題目能把題目轉為程式，對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程，以及我解題的方法是什麼。（也順便紀錄一下自己的思路）
※主題：流程控制為主的綜合小應用
※題目：讓使用者輸入一個數字，並用程式判斷該數字是否為質數
網路上提到自學程式的文章，都會說自學程式非常地辛苦，而且要很自律，決心夠強；而當自己踏上這條路後，才發現何止是辛苦，根本是佈滿荊棘，常常寸步難行，且被刺地遍體鱗傷(喂～是不是有點太浮誇了），但在每個寫出程式豁然開朗的當下，卻又成就感滿滿，所以想藉著寫部落格紀錄一下自己的學習過程！
程式語言只是工具，更重要的是程式邏輯
【運算思維】
1.拆解: 將一個任務或問題拆解成數個步驟或部分。
2.找出規律: 預測問題的規律，並找出模式做測試。
3.歸納與抽象化: 找出最主要導致此模式的原則或因素。
4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
最近很多人私訊我他們自學遇到的瓶頸，有些人會覺得學不會程式，是自己太笨沒天分，或從小數理能力就差，才學不起來。但以我自己這些年自學程式並創業的經驗，我認為可能原因是自己操之過急了，因為想要快速達到像是轉職或是創業等等目標，所以覺得得學得越快越好。但這個領域需要的是長時間的磨練，慢慢一點點累積
設定好你的目標，做好目標分解，接下來就是學習與實作，在過程中，肯定會遇到各種問題需要debug，這應該是剛入門自學程式的人最痛苦的部分，可能看到bug不知道google要下甚麼關鍵字，也可能搜出一堆文章看得頭昏腦脹，所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程，是怎麼面對這種狀況的
之前跟大家分享【表現目標】和【學習目標】，有助於設定自學的終點，但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】，這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法，希望對剛入門自學程式的朋友有幫助
除了增進程式技術和技巧以外，我覺得建立起正確的【自學心態】更重要，保持正確的態度能讓你持續不斷的精進學習，不會半途而廢，也更能享受進步帶來的成就感，我從自己過去零基礎開始自學程式然後做出線上服務的經驗，整理出一些入門自學的朋友應該抱持的心態，相信會很有幫助