---
# System prepended metadata

title: '[HTML] 前端學習筆記 (1) - 基本結構與網頁元素'

---

# [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還有許多其他用途的標籤，將放在下一篇介紹，屆時會再介紹網頁內容分割的方式與其常用的標籤。

作為一篇學習筆記，或許會有許多謬誤之處，還請麻煩協助勘誤，留言指教，謝謝！