---
# System prepended metadata

title: 【HTML 筆記】從零開始的 HTML【part 1】
tags: [HTML, 網頁程式設計, 網頁]

---

【HTML 筆記】從零開始的 HTML【part 1】
===

[TOC]

Hello Guys，我是 LukeTseng，自從大學放榜後，我就積極不間斷的學習資訊相關的東西，持續地茁壯自己，主要最大的成分還是興趣與熱愛這個學科來支撐的～總之，廢話不多說，本文主要透過網路上的各大免費平台自學，並且整理成一篇筆記以供自己閱讀的同時，也能促進個人的學習軌跡。

HTML 介紹
---

### HTML 是什麼？
---

HTML 的英文全名為 HyperText Markup Language，翻譯成中文就是「超文本標記語言」，簡稱 HTML。

HTML 是用來建構網頁內容與結構的標準語言。需要注意的是：它不是一種程式語言，而是一種標記語言（Markup Language），用來描述網頁上的文字、圖像、連結、表格、表單等內容的結構與意義。

根據 [W3Schools](https://www.w3schools.com/html/html_intro.asp)、[菜鳥教程](https://www.runoob.com/html/html-intro.html) 列出下列幾點：

* HTML 代表超文本標記語言
* HTML 是建立網頁的標準標記語言
* 標記語言是一套標記標籤 (markup tag)
* HTML 描述網頁的結構
* HTML 由一系列元素組成
* HTML 元素告訴瀏覽器如何顯示內容
* HTML 元素標記內容片段，例如「這是一個標題」、「這是一個段落」、「這是一個連結」等等。
* HTML 文件包含了 HTML 標籤及文字內容
* HTML 文檔也叫做 web 頁面

### 環境建置（Environment set up）
---

作者在此使用 VS Code 作為本系列文章的主要編輯器，具體安裝如下所示：

先去到這個網站：https://code.visualstudio.com/

之後點擊 Download for Windows（註：作者本人使用 Windows 作業系統）

![image](https://hackmd.io/_uploads/ryjVn1lRJe.png)

好了之後打開安裝檔，點選同意，並按下一步。

![image](https://hackmd.io/_uploads/B1-F31e0kx.png)

其他選項就預設不動，那個建立桌面圖示我建議選一下比較好，比較方便。

![image](https://hackmd.io/_uploads/HJes31xAJg.png)

按下一步後，就可以開始安裝了。

![image](https://hackmd.io/_uploads/rJf03yeRJg.png)

完成安裝後，在桌面上應該可以看到下面這個圖示：

![image](https://hackmd.io/_uploads/rkUWayg01g.png)

打開程式後，其餘的個人化設定可自行設定，若看不懂英文的話可至圖下紅框框起來的地方，那個叫做 extensions，就是擴展插件的意思。

![image](https://hackmd.io/_uploads/B1pYTylCJl.png)

之後就在搜尋框中打 Chinese 就會出現對應的中文插件了。我個人是習慣使用英文介面。

![image](https://hackmd.io/_uploads/rkqi6yx0Jl.png)

### 建立第一個 html 檔案
---

先建立一個資料夾，然後像以下圖片這樣把資料夾拖曳到 VSCODE 介面上。

![image](https://hackmd.io/_uploads/BJiJbleAJe.png)

之後滑到左上角的 HTML_PROJECT，右邊有個小小的文件 icon，點一下即可新增文件。

![image](https://hackmd.io/_uploads/Hytm-glCye.png)

然後取名叫做 index.html。

![image](https://hackmd.io/_uploads/Sk2VZee0Je.png)

點選 index.html 後，在空白處打上 html，即可看到以下圖片這樣的提示，點選 `html:5`。

![image](https://hackmd.io/_uploads/r1_9ZeeAke.png)

點完之後就出現這樣：

![image](https://hackmd.io/_uploads/ryUpWgx0Jl.png)

然後可以在上面打上 h1 title、p 段落，如下：

![image](https://hackmd.io/_uploads/ryQMMxg01e.png)

主要是在兩個 `<body>` 之間打上兩行字：

```html=
<h1>Hello HTML!</h1>
<p>我的第一個HTML專案!</p>
```

寫好之後呢，回到檔案總管看你的 html 文件，然後把它拖到瀏覽器的分頁上：

![image](https://hackmd.io/_uploads/SJ-jfggAyl.png)

之後就會出現如下圖的樣式了：

![image](https://hackmd.io/_uploads/HJMafgg01e.png)

以上這些文字就是我們剛剛打的東西。

認識一下 HTML 的結構：

![image](https://hackmd.io/_uploads/SJ1r7glRJg.png)

圖片來源：https://www.runoob.com/html/html-intro.html

`<!DOCTYPE html>` 宣告有助於瀏覽器正確顯示網頁，而他的宣告方式是不區分大小寫的，以下皆可（註：以下為 HTML 5 的宣告方式）：

```html=
<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>
```

HTML 中的 `<head>` 標籤是用來存放網頁的元資料（metadata），這些資料不會在瀏覽器中顯示，但對於網頁的運作和搜尋引擎的索引非常重要。

而裡面的 meta 元資料定義了網頁的編碼格式為 utf-8，那為什麼是 utf-8？因為最常用，根據維基百科的資料，他的使用比率到達 94.3%。原因是 utf-8 的相容性佳，出現亂碼的情形較少。

至於 `<title>` 的部分，其實就是瀏覽器分頁上會顯示的文字啦，如圖（就是那個【HTML筆記】...）：

![image](https://hackmd.io/_uploads/HJLlPxx01x.png)

`<body>` 元素內包含的是網頁內可見的內容，像是上圖就包含了 `<h1>` 和 `<p>`。

而 `<h1>` 就是最大的標題，`<p>` 為 paragraph 也就是段落的意思。

可看到 `</body>` 標籤前面有個斜線 `'/'`，這個表示已經到了結尾的意思。

以下是一個可視化的 html 頁面結構圖：

![image](https://hackmd.io/_uploads/SkhXqgxCkx.png)

Source：https://www.w3schools.com/html/html_intro.asp

註：只有白色區域才會被瀏覽器顯示，就是被 `<body>` 包含的結構。

### F12 檢查、開啟 debug 模式
---

眾所周知，可能有些人也不知道，在網頁上按下 F12 就可以看到 HTML 的結構，我以 Youtube 做示範：

![image](https://hackmd.io/_uploads/S1GsdegCJx.png)

這個就是 debug 模式，HTML 結構都放置於 Elements 處。

若對網頁任意處按下右鍵，再選擇檢查，也可看到一樣的東西：

![image](https://hackmd.io/_uploads/Hk_1Kxx0yg.png)

### HTML 術語解釋
---

HTML 標記標籤統稱為 HTML 標籤（HTML tag）。

* 一個 HTML 標籤由 `<>` 兩個大於小於的括號括起來，如：`<html>`。
* 然後一個標籤必有起頭跟結尾，如：`<a><\a>`，加上一個斜線 `'\'` 代表結尾。
* 開始和結束標籤也被稱為開放標籤和閉合標籤
* HTML 元素 = HTML 標籤，同樣意思。

### HTML 的歷史
---

| 年份 | 版本 |
| -------- | -------- |
| 1989 | 提姆·柏內茲-李（Tim Berners-Lee）發明了 www（World Wide Web） |
| 1991 | 提姆·柏內茲-李（Tim Berners-Lee）發明了 HTML（HyperText Markup Language） |
| 1993 | 戴夫·拉格特 (Dave Raggett) 起草了 HTML+ |
| 1995 | HTML 2.0 |
| 1997 | W3C 推薦標準（Recommendation）：HTML 3.2 |
| 1999 | W3C 推薦標準（Recommendation）：HTML 4.01 |
| 2000 | W3C 推薦標準（Recommendation）：XHTML 1.0 |
| 2008 | WHATWG HTML 5 第一個公開草稿 |
| 2012 | WHATWG HTML 5 的現行標準 |
| 2014 | W3C 推薦標準（Recommendation）：HTML 5 |
| 2016 | W3C 候選推薦標準：HTML 5.1 |
| 2017 | W3C 推薦標準（Recommendation）：HTML 5.1 第二版 |
| 2017 | W3C 推薦標準（Recommendation）：HTML 5.2 |

註：WHATWG（英文全名：Web Hypertext Application Technology Working Group、網頁超文字應用技術工作小組）

表格來源：https://www.w3schools.com/html/html_intro.asp

HTML 基礎語法
---

### HTML 標題

HTML 標題（Heading）有 `<h1>` 到 `<h6>`，如下：

![image](https://hackmd.io/_uploads/By9X0xlRJl.png)

之後丟到瀏覽器上顯示：

![image](https://hackmd.io/_uploads/r1bBCgl0ye.png)

### HTML 段落

HTML 段落的標籤為：`<p>`，小小範例如下：

![image](https://hackmd.io/_uploads/B1WiAge01l.png)

![image](https://hackmd.io/_uploads/HJisAglRyg.png)

### HTML 連結

HTML 的連結由標籤 `<a>` 所定義，如下：

![image](https://hackmd.io/_uploads/HkWV1blAyg.png)

![image](https://hackmd.io/_uploads/rkPVkZlAJe.png)

要注意開頭的標籤：`<a href="https://www.example.com">`，那個括號是包含連結的。

而 href（hypertext reference：超文本引用）為指定超連結目標的屬性，用來定義當用戶點擊該連結時將被導向的網址或資源。

### HTML 圖片

標籤為 `<img>` 所定義，如下：

![image](https://hackmd.io/_uploads/B1jZvX-A1e.png)

`src=""` 引號裡面放的是圖片網址，至於怎麼擷取圖片網址呢？如下圖片所示：

![image](https://hackmd.io/_uploads/HkRNwm-01g.png)

就是對任意一張圖片按下右鍵，再按複製圖片網址，就可取得了。

之後將 HTML 放到瀏覽器的畫面就如下：

![image](https://hackmd.io/_uploads/rkZtDX-0kg.png)

至於 width、height 則為圖片的長寬，可自行調整。

圖片若與 html 檔案相同目錄，如下：

![image](https://hackmd.io/_uploads/H1yIuQWCkg.png)

那就可以在 html 內直接寫那個檔案的名稱：

![image](https://hackmd.io/_uploads/rkJYumbAke.png)

之後將 html 檔案放到瀏覽器就變這樣：

![image](https://hackmd.io/_uploads/Sy9c_7ZAkx.png)

那假設圖片放在 html_project 的資料夾內，但放的不是根目錄（最上層的目錄），而是在其他資料夾，如下：

![image](https://hackmd.io/_uploads/rJIj9VbAke.png)

若要擷取這張圖片，可寫以下的 html：

![image](https://hackmd.io/_uploads/ByeWjEbR1e.png)

就是 `資料夾名稱/圖片.jpg` 。

那如果圖片在 D 槽根目錄，就可以這樣寫：

![image](https://hackmd.io/_uploads/ByKfWSWA1x.png)

整理一下：

:::info
透過圖片網址擷取圖片（width、height 自定義）：`<img src="輸入你的圖片網址" width="100%" height="100%" />`
透過路徑擷取圖片（若跟 html 檔案放同一個目錄）：`<img src="天靈蓋.jpg" width="100%" height="100%"/>`
透過路徑擷取圖片（若在放 html 的資料夾，但圖片放在別的資料夾）：`<img src="鹿乃子乃子/天靈蓋.jpg" width="100%" height="100%"/>`
透過路徑擷取圖片（若在 html 的資料夾裡，但圖片放在 D 槽）：`<img src="鹿乃子乃子/天靈蓋.jpg" width="100%" height="100%"/>`
:::

總結
---

HTML 簡介：

* HTML（HyperText Markup Language）是一種標記語言（非程式語言），用來建構網頁的內容與結構。
* HTML 文檔由一系列的標籤（tag） 所構成，這些標籤會告訴瀏覽器如何顯示各種內容（文字、圖片、連結等）。
* HTML 檔案也被稱為網頁（web page）。

如何建立第一個 HTML：

* 建立 index.html 檔案後，在 VS Code 可透過 html:5 自動產生 HTML5 樣板。

然後在上下兩個 `<body>` 輸入：

```html=
<h1>Hello HTML!</h1>
<p>我的第一個HTML專案!</p>
```

把 HTML 檔案拖曳至瀏覽器即可預覽。

HTML 結構解釋：

* `<!DOCTYPE html>`：宣告 HTML5 文件類型，大小寫不拘。
* `<head>`：包含網頁的元資料（如字元編碼 `<meta charset="utf-8">`、網站標題 `<title>`）。
* `<body>`：網頁可見內容的主要區塊。
* `<h1>` 到 `<h6>`：標題等級。
* `<p>`：段落。
* `<a href="URL">`：超連結標籤，href 為目標網址。
* `<img src="路徑" width="寬度" height="高度" />`：插入圖片，可使用網址或本地路徑。

圖片載入處理方式（width、height 自定義、自己加）：

| 圖片位置 | 寫法 |
| -------- | -------- |
| 網址 | `<img src="圖片網址">` |
| 同資料夾內 | `<img src="圖片檔名.jpg">` |
| 子資料夾內 | `<img src="資料夾名稱/圖片檔名.jpg">` |
| 指定磁碟 | `<img src="D:/資料夾名稱/圖片檔名.jpg">` |

F12 開發者工具（Debug 模式）：

* 在瀏覽器按下 F12 可查看 HTML 結構，位置在「Elements」分頁。
* 也可以右鍵點選網頁任一區塊，選擇「檢查」進入 debug 模式。

HTML 術語解釋：

HTML 標記標籤統稱為 HTML 標籤（HTML tag）。

* 一個 HTML 標籤由 `<>` 兩個大於小於的括號括起來，如：`<html>`。
* 然後一個標籤必有起頭跟結尾，如：`<a><\a>`，加上一個斜線 `'\'` 代表結尾。
* 開始和結束標籤也被稱為開放標籤和閉合標籤
* HTML 元素 = HTML 標籤，同樣意思。

參考資料
---

[WHATWG - Wikipedia](https://en.wikipedia.org/wiki/WHATWG)

[UTF-8 - Wikipedia](https://en.wikipedia.org/wiki/UTF-8)

[HTML - Wikipedia](https://en.wikipedia.org/wiki/HTML)

[Introduction to HTML | W3Schools](https://www.w3schools.com/html/html_intro.asp)

[HTML 简介 | 菜鸟教程](https://www.runoob.com/html/html-intro.html)
