【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 作業系統）
好了之後打開安裝檔，點選同意，並按下一步。
其他選項就預設不動，那個建立桌面圖示我建議選一下比較好，比較方便。
按下一步後，就可以開始安裝了。
完成安裝後，在桌面上應該可以看到下面這個圖示：
打開程式後，其餘的個人化設定可自行設定，若看不懂英文的話可至圖下紅框框起來的地方，那個叫做 extensions，就是擴展插件的意思。
之後就在搜尋框中打 Chinese 就會出現對應的中文插件了。我個人是習慣使用英文介面。
### 建立第一個 html 檔案
---
先建立一個資料夾，然後像以下圖片這樣把資料夾拖曳到 VSCODE 介面上。
之後滑到左上角的 HTML_PROJECT，右邊有個小小的文件 icon，點一下即可新增文件。
然後取名叫做 index.html。
點選 index.html 後，在空白處打上 html，即可看到以下圖片這樣的提示，點選 `html:5`。
點完之後就出現這樣：
然後可以在上面打上 h1 title、p 段落，如下：
主要是在兩個 `<body>` 之間打上兩行字：
```html=
<h1>Hello HTML!</h1>
<p>我的第一個HTML專案!</p>
```
寫好之後呢，回到檔案總管看你的 html 文件，然後把它拖到瀏覽器的分頁上：
之後就會出現如下圖的樣式了：
以上這些文字就是我們剛剛打的東西。
認識一下 HTML 的結構：
圖片來源：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筆記】...）：
`<body>` 元素內包含的是網頁內可見的內容，像是上圖就包含了 `<h1>` 和 `<p>`。
而 `<h1>` 就是最大的標題，`<p>` 為 paragraph 也就是段落的意思。
可看到 `</body>` 標籤前面有個斜線 `'/'`，這個表示已經到了結尾的意思。
以下是一個可視化的 html 頁面結構圖：
Source：https://www.w3schools.com/html/html_intro.asp
註：只有白色區域才會被瀏覽器顯示，就是被 `<body>` 包含的結構。
### F12 檢查、開啟 debug 模式
---
眾所周知，可能有些人也不知道，在網頁上按下 F12 就可以看到 HTML 的結構，我以 Youtube 做示範：
這個就是 debug 模式，HTML 結構都放置於 Elements 處。
若對網頁任意處按下右鍵，再選擇檢查，也可看到一樣的東西：
### 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>`，如下：
之後丟到瀏覽器上顯示：
### HTML 段落
HTML 段落的標籤為：`<p>`，小小範例如下：
### HTML 連結
HTML 的連結由標籤 `<a>` 所定義，如下：
要注意開頭的標籤：`<a href="https://www.example.com">`，那個括號是包含連結的。
而 href（hypertext reference：超文本引用）為指定超連結目標的屬性，用來定義當用戶點擊該連結時將被導向的網址或資源。
### HTML 圖片
標籤為 `<img>` 所定義，如下：
`src=""` 引號裡面放的是圖片網址，至於怎麼擷取圖片網址呢？如下圖片所示：
就是對任意一張圖片按下右鍵，再按複製圖片網址，就可取得了。
之後將 HTML 放到瀏覽器的畫面就如下：
至於 width、height 則為圖片的長寬，可自行調整。
圖片若與 html 檔案相同目錄，如下：
那就可以在 html 內直接寫那個檔案的名稱：
之後將 html 檔案放到瀏覽器就變這樣：
那假設圖片放在 html_project 的資料夾內，但放的不是根目錄（最上層的目錄），而是在其他資料夾，如下：
若要擷取這張圖片，可寫以下的 html：
就是 `資料夾名稱/圖片.jpg` 。
那如果圖片在 D 槽根目錄，就可以這樣寫：
整理一下：
:::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)
Sign in via Google
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet