導讀：這篇文章聚焦於「HTML 自學 筆記」，幫你快速掌握重點。
認識網頁設計及HTML
在我們進行網頁設計的學習之前，先來了解什麼是網頁，以及它的結構。
如果你第一次看到我的文章，歡迎訂閱我的電子報，會陸續更新國中、高中的生物課內內容、筆記重點整理以及大學研究所上遇到的種種乃至於畢業、找工作、談薪水等職涯規掛，以及每周一篇的新知分享，包含部落格、生物新科技等等內容。
一共可以分為前端與後端兩種。前端較注重使用者體驗以及網頁整體視覺及互動的部分，而後端部分，則是處理前端經由互動後，收集使用者給予回饋的資訊並加以處理的部分。
舉例而言，時常有網路購物的經驗，例如蝦皮購物點進網頁後會看到許多品項、版面、排版、動畫都是屬於前段的部分，而加入購物車後，幫你計算需要多少錢、有哪些品項、要送到哪裡、你的訂單編號、名稱等等都是屬於後端的範疇。
平常我們能夠看到的網頁，是經過原始碼撰寫包含HTML,CSS,Javascript等的方式，告訴電腦要呈現的樣子。隨後把這個寫好的原始碼放到雲端上面，好讓我們在網路的世界當中能夠瀏覽並視覺化。
網頁設計編寫語言
其中最主要的編寫語言共粗分為三項:
| 語言 | 主要功能 |
|---|---|
| HTML | 負責文字的部分，包含標題、內文、按鈕文字等等所有可視的文字。 |
| CSS | 美化網頁、增加易讀性與設計感，進行網頁頁面的排版。 |
| Javascipt | 增加使用者互動感，以事件的方式增加動畫或給予回饋。例如點擊事件後按鈕下要顯示出文字說明等。 |
因此，通常在設計網頁的過程順序為 : HTML處理主要文字後，CSS加以排版美化頁面，最後以JS的方式增加此網頁使用者的互動感，達到較好的使用者體驗。
HTML
接下來，進入到HTML的部分，首先要說明究竟什麼是HTML?
全名為 Hyper Text Markup Language ，也就是指在純文字的表現上，能夠透過瀏覽器達到超連結到其他網站或子網頁。舉例來說，你告訴電腦說你想要透過連結到達購物車時，你的螢幕頁面就會從選單跳到購物車頁面。
HTML是一個以標籤（element）為主巢狀方式編寫的語言。意思就是要以標籤與標籤中間放入文字來告訴電腦你要編寫的內容。
HTML 巢狀結構示意：標籤內層層嵌套，形成樹狀結構
HTML Tags
主要大標籤可以分為 : head, title, body三個部分，但大標籤必須被html標籤包住好讓電腦知道這個文件是html的內容
至於小標籤，主要在body中撰寫最主要的頁面文字內容時會使用到，首先介紹幾個較常用的標籤
| 標籤 | 功能 |
|---|---|
| h1 ~ h6 | 作為文字標題，根據數字增加而減小標題文字大小 |
| p (段落) | 為內文文字的標籤，適合使用在說明、講述時 |
| img | 能夠在網頁中放入圖片 |
| a (連結) | 能夠經過點擊協助使用者到另一個網頁 |
後記
如果你喜歡這樣解說的方式的話，幫我按讚拍手分享，讓更多人了解設計的有趣之處 ! 如果你覺得有疑問或者有錯誤的話，歡迎在下面留言告訴我 !
