【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)