網頁程式設計入門，一文讀懂HTML、CSS｜ALPHA Camp Blog

網頁設計在進入工程的範疇時，通常最常聽到的名詞就是HTML/CSS！其實它們兩者在技術上都代表著不同的電腦語言工具，用來分別處理「網頁呈現」上的不同 ... Loading...首頁課程內容系列課程JavaScript全端開發課程學期一｜程式設計入門學期二｜掌握網頁開發學期三｜軟體工程師養成全年開課時間表最新消息非本科跨領域學程式最新課程DATA&AI公開課SQL14天入門課學習體驗成效Blog技術主題求職攻略數據入門文章首頁FAQ常見問題關於ALPHACamp加入我們舊生專屬福利📣8/11課程說名會馬上報名Web技術網頁程式設計入門，一文讀懂HTML、CSSPosted on 2020-12-29  by    byjiang你是否曾在閱讀網頁時，對於網頁設計的美感感到驚奇？你是否曾好奇這些美麗的頁面是怎麼被產出的？你是否曾拉動瀏覽器視窗，發現網頁會隨寬度變化出不同樣式風格？什麼是HTML/CSS呢？網頁設計在進入工程的範疇時，通常最常聽到的名詞就是HTML/CSS！其實它們兩者在技術上都代表著不同的電腦語言工具，用來分別處理「網頁呈現」上的不同事情；它們也同時代表著電腦中不同的檔案類型，而電腦或手機的瀏覽器則是透過網路，下載並讀取HTML與CSS的檔案後，經過背後一系列複雜運算、讀取後，才會產生出我們眼前這一頁頁優雅的網站內容喔（如圖一）！圖一：瀏覽器產出頁面的過程HTML接下來我們就來介紹什麼是HTML！圖二：HTML的程式片段示意。

HTML又被稱為超文本標記語言，主要是利用各種被公定的標記來定義文本內容的架構，使得文本可以從純文字，轉變成具有結構意義的檔案，進而使瀏覽器可以在讀取HTML檔案的時候，將文字內容以有層次的結構呈現在畫面上。

而這邊提到的結構意義雖然感覺很抽象，其實只要把它們想成是一般文章的標題、段落、表單、表格、圖片等等的內容結構就好唷！瀏覽器也需要知道這些文章內容的結構定義，來繪製出呈現在瀏覽器裡的頁面！這就需要透過HTML，來讓瀏覽器了解並解讀我們人類所寫的文章內容。

HTML語法教學，快速攻略網頁HTML標籤的基本元素CSS那既然有了結構，為啥我們還需要CSS?讓我們來設想一下：假設今天你是一位作文小老師，現在剛下課，國文老師要求你下課要收回全班學生在這一節作文課所撰寫的作文！在這一張張收回的作文內容中，你看到了如HTML中的標題、段落，但卻又能夠在這一張張作文中感受到它們的不同，為啥！？因為你發現，有人用黑筆、有人用藍筆、有人字寫得大、有人寫得小，有人作文紙弄得皺皺的、有人卻平整乾淨。

這些其實都充分表現了「樣式」與「風格」的特性！在瀏覽網頁時，網頁中的設計風格樣式的概念也跟這些作文紙的風格如出一徹！在前端工程師實作網頁的過程中，也會針對設計師的風格設計進行對應的樣式風格撰寫，這時候前端工程師就會拿出撰寫樣式語言的壓箱寶-CSS。

圖三：CSS的程式片段示意。

   CSS又被稱為階層樣式表，瀏覽器呈現HTML內容後，CSS就能夠賦予這些內容獨特的樣式！瀏覽器便是在讀取CSS檔後，搖身一變！成為不折不扣的畫家，將頁面上文字段落加上字的間距、加入美美的字體、改變典雅的顏色、更換優美的背景色等等說不完的美感實現！而在HTML/CSS中，我們也能夠為每個內容結構段落進行命名，來區分不同內容的類別。

如下圖圖四中，可以看見在HTML與CSS中都有對應的元素命名如：.my-header、.my-content，而HTML/CSS便是透過這些類別的命名產生文本與樣式之間的連結，瀏覽器進而能透過這樣的關聯建立，來賦予這些HTML內容獨特的CSS樣式！呈現出最終的頁面風格出來：）圖四：HTML/CSS在瀏覽器處理後，會產生具有內容與樣式頁面，上圖下半區為頁面的結果呈現（點擊這裡到Codepen上瀏覽）。

CSS教學語法入門：認識階層樣式表與Boxmodel介紹等等，說那麼多技術，那HTML/CSS到底跟哪個職位有關啊？所以，什麼是前端網頁設計？「沒錯～歡迎進入網頁前端工程師的結界！！」 旁白：「前端工程師其實很簡單，就是在『工程師』三個字前面加上『前端』兩個字，就可以結束這回合...」（大誤）在前端工程師眼中的網頁「設計」，其實跟一般的平面設計師、網頁設計師所認知的「設計」不太一樣，前端工程師不會像一般設計師一樣埋首在繪圖軟體裡的圖層中揮灑視覺才華，而是會埋頭在各位可能曾經聽過的HTML/CSS電腦語言之深海幽谷中漫遊取材，並且「將設計師們設計出的網頁畫面『實現』到瀏覽器的頁面上」。

圖五：前端工程師的任務就是要將設計師的設計，完美實現到瀏覽器上供使用者使用。

‍沒錯！這就是前端工程師的宗旨。

而「前端」兩個字，主要就是要表達在工程開發的面向上比較貼近終端使用者介面的開發、處理而得名，所以前端工程師的工作其實可以說是既理性又感性的結合：透過HTML/CSS語言理性地將設計實現於網頁畫面上，並且感性地詮釋與臨摹設計師的美感理念！前端工程師要會什麼？工作上會遇到什麼挑戰前端工程網頁設計該了解的三大面向前端工程的養成之路上，主要有三個面向值得好好把握：文本內容與HTML標籤的關聯建立掌握CSS切版學習的概念架構介面動態掌握掌握切版學習的概念架構學習CSS對於初學者來說，有時會深覺缺乏方向與架構，通常都只能從片面性的小切版練習中，去體會各種屬性之間的樣式在畫面上的作用呈現，並且自己也需要花時間，再去從這些瑣碎的小練習中學到的屬性中，去理解其他屬性值的設定所造成的不同畫面效果，可以說是偏向探索式地去挖深與探究。

雖然有這樣的初學困擾，但其實在CSS樣式語言的學習上是有脈絡可循的唷！學習架構的脈絡本質其實就在於嘗試建立架構的過程，前端在開發樣式的脈絡，或甚至是對於程式的撰寫架構上，很多時候會導入類似「降維打擊」的概念，其中最重要的就是要將複雜的目標進行適度的拆分後並一一攻破！當前端工程師接到一個頁面的需求設計稿時，通常會開啟「血輪眼」模式！將頁面中的各種區塊以類別、層級、功能性進行適度的降維拆分，以一般的頁面為例，它的拆分結果可能如下：表二：一般頁面的內容可以如表拆分出不同層級。

從上述的架構中，其實就能夠推導出一些頁面在樣式上的層級脈絡：     表三：依循同樣的「由大而小、由外而內」的脈絡來歸納CSS樣式屬性的學習。

從上面這樣的脈絡轉換，你或許就能稍微體會如何「由大而小、由外而內」地來針對頁面進行降維打擊的效果，也因此可以更有架構地藉由這樣的脈絡來學習CSS的各種屬性語法。

你也能夠很快遞將這樣的概念套用到其他屬性的學習上唷！這也是為什麼在CSS學習上，「從做中學」是個很重要的學習途徑，因為在架構頁面CSS樣式的脈絡與我們在閱讀頁面的的脈絡是如出一徹的概念過程，無形之中也有很多關聯性存在，只是我們習慣而不自知而已！如果你現在正覺得「CSS樣式好多...不知從何下手...」的狀態，不妨嘗試從Pinterest上找各種圖卡式的設計進行練習，並且將設計中的各種元素利用上述歸納出的樣式等級，來進行設計上的拆分，然後再開始進行實作練習。

並且在這歸納樣式的脈絡中，不斷去擴展學習新的CSS樣式屬性、歸納這些屬性的樣式等級、嘗試記憶不同屬性值的作用變化，相信練習一陣子後，你會昇華到另外一個境界，並且更有脈絡地（甚至是更內化地）去拆解設計稿的畫面！（截圖來源：https://www.pinterest.com/）圖七：網路上有許多設計資源可以參考，並當作練習HTML/CSS的小專案練習。

另外，在學習這些CSS屬性語法時，很重要的一點是要先掌握當前這個屬性在瀏覽器的「預設情況」會如何呈現？理解之後再往下理解、學習不同的屬性值變化唷！絕對不要捨近求遠，學了很多屬性值卻不知道哪一個設定是預設畫面設定！這樣可能會讓你在撰寫樣式時，因為沒有掌握預設設定而寫了更多樣式屬性來達成樣式本身預設就能做到的效果！不僅增加了很多不必要的屬性撰寫，也增加了維護上的困難。

文案內容與HTML標籤的關聯建立網頁絕對缺少不了的就是文案內容，在閱讀文案的時候，你一定會知道什麼是標題、什麼是副標題、主文在哪，或甚至是段落的切分在哪？這些對於文案內容認知的過程都會跟HTML標籤的定義有一定程度的相關性與連結度，也因此在學習HTML標籤時，最重要的就是去理解標籤本身所要表達的內容意義。

我們也能夠根據上一段提到的頁面架構拆分去分類頁面上不同區塊的意義，在HTML中，很多的標籤命名其實就明顯透露出它想要對應的文案內容，如