# [HTML] 前端學習筆記 (1) - 基本結構與網頁元素 ![](https://i.imgur.com/A7HCgAT.jpg) 上網瀏覽網頁對現代人來說是一件很自然的事情，雖然輸入網址就可以跳轉到我們想去的頁面、頁面也能在幾秒內載入完整內容，但這背後的過程又是如何呢？ <br> <h2>網頁的原理</h2> 瀏覽網頁的過程可以拆分為以下幾個階段： 1. 使用者在瀏覽器中輸入路徑，**向網路伺服器發送請求HTML文件** 2. 伺服器**回傳對應的HTML文件**給瀏覽器 3. **瀏覽器開始解析**HTML並產生內容、解析CSS產生排版與樣式、解析JavaScript並產生網頁元素與使用者的互動機制...等等 4. 產生出我們看到的網頁畫面 而上述的HTML文件中，記載了我們在瀏覽器中看見的圖文內容，它是不好閱讀的，因為裡面的內容都被許多不同的**標籤**所包住，例如： ``` <body> <h1 class="title">今日待辦事項</h1> <h2 class="date">2020/10/21</h2> <div class="content"> <ul> <li>遛狗</li> <li>寫作業</li> <li>倒垃圾</li> </ul> </div> </body> ``` 因此我們需要工具來為我們**解析這些HTML文件，輸出成我們視覺上看了舒服、有結構性，且不含網頁標籤的內容**。而這工具就是網頁瀏覽器，**HTML做為共通標記語言，可在不同的瀏覽器上行使**。 以下是常見的網頁的基本結構圖： ![](https://i.imgur.com/1T727W0.png) (取自<a href="https://www.w3schools.com/html/html_intro.asp" target="_blank">w3schools.com</a>) ***特別須注意的是，最後的網頁僅會呈現出白色的內容區塊，其他都是對網頁的架構或屬性設定，並不會在瀏覽器中顯示。*** <br> <h2>什麼是HTML</h2> HTML為HyperText Markup Language的縮寫。**Markup Language 並非程式語言，是為「標記語言」，專門把內容結構化、資訊化。** 在HTML中，幾乎每一個網頁元素都被 **開始標籤<>** 與 **結束標籤</>** 包圍，只有少數例外。這些括號都是「標記」，Markup Language 便是把一些東西像螢光筆畫記一樣的**標記起來，去賦予它屬性和意義**。 我們在製作網頁時使用HTML，把網頁的所有內容拆解成最小單位─**網頁元素(elements)**，並且**透過標記屬性的方式，將其內容結構和資訊重要性做階層式的安排**。在以上例子中可以看到許多網頁元素，`<h1>`元素代表大標題、`<h2>`為次標(有`<h1>`~`<h6>`，6種階層)，`<div>`為區塊，`<ul>`、`<li>`為子彈清單等等。 而我們也可以**在元素中的標籤中加入屬性**，首先在元素後以**空格**隔開，並**用`=""`去賦予屬性內容**，以下舉例： ``` <a href="http://www.facebook.com" target="_blank">臉書網址</a> ``` 上述例子就是 `<a> `超連結的標籤，在起始標籤中空格賦予屬性，href="連結網址"(導向某一目標網址)，target="_blank"(另開新分頁)。 ``` <div class="title">標題</div> ``` 上述例子就是在`<div>`標籤中設立一個class屬性，並為之命名賦予特性，之後在CSS進行樣式調整時若要選擇這一標籤則用選擇器 `.title {}` 即可對該元素進行編輯。 <br> <h2>HTML結構</h2> 而HTML中有嚴格的**巢狀關係**，網頁中**每一項元素最終都必須被起始標籤與結束標籤包住**。而父元素與子元素如何判別，是依照標籤的前後順序決定階層。 ``` <div class="content"> <ul> <li>遛狗</li> <li>寫作業</li> <li>倒垃圾</li> </ul> </div> ``` <br> 由上述HTML可知，`<div>`為`<ul>`的父元素，而`<li>`則為`<ul>`的子元素。嚴格的巢狀關係意味著：任何元素的起始與結束標籤必須為 **「對稱」且「閉合」**，不能有交錯的情形發生。現在讓我們來觀察一份完整HTML文件的結構： ![](https://i.imgur.com/1T727W0.png) (取自<a href="https://www.w3schools.com/html/html_intro.asp" target="_blank">w3schools.com</a>) 一份完整的HTML文件由 **`<html></html>`作為最外層包裹住整個網站的內容與設定**。而 **`<head></head>`中通常為網站的標頭**，經常含有網站名稱、導覽列等等元素。**`<body></body>`中則放入了整個網站的內容資訊**，不管是文字、圖片、超連結，都可以放在這組標籤中，被瀏覽器呈現出來。 <br> ***通常一份正式的 HTML文件中，在`<html></html>`標籤之前還會再加上`<!DOCTYPE html>`的宣告，這是作為宣告文件類型，告訴瀏覽器這份HTML是什麼版本，才能正確呈現網頁的內容。但通常在程式編譯器例如 CodePen、Visual Studio Code中，都可以透過快速鍵來設定直接帶入預設值。*** <br> <h2>HTML常用元素</h2> 以下幾個為網頁內容中最基本的幾個元素分類： <h3>文字排版</h3> <h4>標題</h4> `<h>`，依照`<h1>`~`<h6>`的順序決定標題的權重。 ``` <h1>第一順位</h1> <h2>第二順位</h2> <h3>第三順位</h3> <h4>第四順位</h4> <h5>第五順位</h5> <h6>第六順位</h6> ``` 以上的標籤在HTML上呈現的結果如下圖右： ![](https://i.imgur.com/fB20mMH.png) <h4>段落</h4> `<p>`，用來包裹純文字的段落。 ![](https://i.imgur.com/rIKMyUe.png) <h4>斷行</h4> `<br>`，顧名思義，用來在文字中插入斷行。***注意：`<br>`沒有結尾標籤。 ![](https://i.imgur.com/LWr3hXv.png) <h4>水平線</h4> `<hr>`，插入水平線。***注意：`<hr>`也沒有結尾標籤。 ![](https://i.imgur.com/1HOMKVc.png) <h3>超連結與圖片</h3> <h4>超連結</h4> `<a>`，在標籤中可以加上屬性，例如`<a href="目標網址" target="_blank"(開啟新分頁)>`等。 ![](https://i.imgur.com/TXno2YS.png) <h4>圖片</h4> `<img>`，在標籤中可以加上屬性，例如`<img src="圖片網址路徑" alt="替代文字">`。***注意：`<img>`沒有結尾標籤。 * 替代文字：可作為無障礙設計，當圖片原始路徑失效時，或是瀏覽器無法顯示圖片，透過替代文字可以讓使用者知道原本放置的圖片是什麼。 ![](https://i.imgur.com/NjwlPOa.png) <h3>註解</h3> `<!-- -->` 當想要在HTML文件中作註解時，只要使用`<!--`跟`-->`將註解包圍起來就可以了。而註解中的文字也不會在瀏覽器上呈現。 ![](https://i.imgur.com/SMLQkAv.png) <br> --- <h2>結語</h2> HTML還有許多其他用途的標籤，將放在下一篇介紹，屆時會再介紹網頁內容分割的方式與其常用的標籤。 作為一篇學習筆記，或許會有許多謬誤之處，還請麻煩協助勘誤，留言指教，謝謝！