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

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

HTML 介紹

HTML 是什麼？

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

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

根據 W3Schools、菜鳥教程列出下列幾點：

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> 之間打上兩行字：

1 2	<h1>Hello HTML!</h1> <p>我的第一個HTML專案!</p>

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

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

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

認識一下 HTML 的結構：

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

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

<!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> 輸入：

1 2	<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 模式）：