第一部分：傳統前端大解密 HTML

📅 發布時間: 2024-06-10 🏷️ 標籤: HTML、前端開發、網頁基礎、VSCode

從零開始，一步一步解密網頁開發的三大基石：HTML、CSS、JavaScript。無論是初學者還是有基礎的開發者，都能從中受益。這是本系列的第一篇，專注 HTML。

今天的目標

• 網頁概念
  • 什麼是網頁？前端後端？語言與技術？
• HTML
  • 喝杯咖啡，這東西真的很容易，就是寫寫文字！

💻 網頁基礎概念

🎯 學習目標:理解網頁的產生過程：從網域到 IP、請求與回應認識網頁資料來源：按 F12 查看 HTML、CSS、JavaScript

步驟 1: 網頁基本概念

圖：瀏覽器如何產生漂亮畫面

我們先從最基本的概念開始。先來理解一下什麼是網頁，為啥我打開瀏覽器，就可以跑出那麼漂亮的畫面。

步驟 2: 網頁定義

圖：網頁就是瀏覽器顯示的漂亮畫面

什麼是網頁呢? 當你在瀏覽器中打開一個網址時，顯示出來漂亮的畫面就是網頁。最早網頁只是為了方便將資料傳給別人看，所以將一些文字、圖片，放在自己的電腦上，然後只要別人連線到我的電腦時，我就把這些文字、圖片傳給他。

步驟 3: 網頁連線過程 (IP 地址)

圖：全球網際網路如超級郵差，IP 地址如詳細住址

我們直觀的用右邊的圖表來展示一下網頁的連線過程吧。先有個先備知識，全球網際網路可以先想像成一個超級郵差，它可以幫你傳訊息。而且大家如果想傳訊息都會找這個郵差。而為了方便郵差送信，所有連上網路的電腦都有一個地址像是新竹市東區光復路二段101號 之類的，讓郵差或其他人可以很好的寄信給你。這個地址也就被稱之為 IP 地址。

步驟 4: 網域簡介

圖：網域是 IP 的易記縮寫

今天如果你想看 youtube，你會在瀏覽器當中輸入 youtube.com 這個網域。網域？其實就是地址太難記啦！所以郵差開放大家註冊自己的縮寫。好比說　新竹市東區光復路二段101號 的縮寫就是 清華大學。

步驟 5: 請求過程

圖：瀏覽器寄信請求網頁內容

回到剛剛的 youtube，當你想看 youtube 時，瀏覽器會幫妳寫好一封信，寄給 youtube.com。內容就是希望能請求取得網頁內容，然後寄給這個郵差，請他幫忙轉交給 youtube。

步驟 6: DNS 解析

圖：郵差查詢網域對應的真實 IP

當郵差收到這封要寄的信，看了一眼 youtube.com。他會去查之前跟他註冊的網域清單，然後就能知道 youtube.com 的真實 IP 142.250.65.206，然後就會轉寄給 Youtube 的電腦。

步驟 7: 回應過程

圖：伺服器回傳網頁內容

Youtube 從郵差那邊收到信以後，馬上就寫了一封回信，將整個網頁的內容放進去，然後再請郵差回傳給你。

步驟 8: 網頁內容揭曉

圖：回信內容即網頁，整個過程不到 0.1 秒

最後你收到了回信，回信的內容就是網頁啦~ 你就可以看到漂亮的網站了。值得一提的是，剛剛的整個過程時間不到 0.1 秒。那問題來了，回信的內容是網頁，那到底是什麼？一大坨的文字嗎？還是？這就是我們今天要學的東西的　網頁程式開發。

❓ 練習題

快問快答 - 請問我應該如何連上 Ray 的個人網站？

A) 打開瀏覽器，並輸入 https://ray-realms.com/ 網址，按下 Enter
B) 打開瀏覽器，並輸入 https://www.google.com/ 網址，按下 Enter
C) 用念力默念芝麻開網站
D) 放聲大哭，把媽媽吵過來

<details> <summary>💡 點擊查看解答</summary>

正確答案: Ａ、打開瀏覽器，並輸入 https://ray-realms.com/ 網址，按下 Enter

透過網域請求，郵差會幫你送達！

</details>

💻 網頁資料檢視

🎯 學習目標:使用 F12 查看網頁真實資料：HTML、CSS、JavaScript理解三種語言角色

步驟 1: 查看網頁資料

圖：按 F12 查看並編輯網頁資料（僅本地生效）

收到網頁的資料了！可是有什麼資料？在任何的網頁中，你都可以按 F12 去察看網頁真實的資料。你甚至可以修改他（不過你修改的只是你所收到的回信而已）。

步驟 2: 三種語言介紹

圖：HTML 架構、CSS 美術、JavaScript 邏輯

所有的網頁都只由這三種語言所構成 - HTML 司掌架構、定義了網頁的內容 - CSS 司掌美術、讓網頁變得好看 - JavaScript 司掌邏輯、小從數學運算、大致邏輯操作。而我們剛剛 F12 第一眼看到的便是他的 HTML。

❓ 練習題

快問快答 - 透過網頁 F12 開發人員工具，編輯 HTML，我可以輕易竄改任何聊天資訊

A) 可以啊，謝謝老師教我駭進 Facebook 的網頁
B) 完全沒有辦法
C) 可以，但是只能自嗨，重新整理後一切正常

<details> <summary>💡 點擊查看解答</summary>

正確答案: Ｃ、可以，但是只能自嗨，重新整理後一切正常

修改僅本地生效，伺服器資料不變。

</details>

💻 HTML 開發環境與元素基礎

🎯 學習目標:安裝 VSCode 與 Live Server建立 index.html 並生成模板理解元素（標籤）與屬性

步驟 1: HTML 介紹

圖：HTML 就是寫文字，很簡單

HTML，喝杯咖啡，這東西真的很容易，就是寫寫文字！

步驟 2: VSCode 與 Live Server

圖：安裝 Live Server 提升效率

我們將用 Visual Studio Code ( VSCode ) 這個文字編輯器來進行開發。請各位安裝 Live Server 這個 VSCode 內的延伸模組，可以提高開發效率。

步驟 3: 創建資料夾

圖：新建資料夾存放網站程式碼

創建一個新的資料夾，來放置我們的網站程式碼。

步驟 4: 開啟 VSCode

圖：將資料夾拖入 VSCode

將這個資料夾拉入 VSCode 中。

步驟 5: 新建 index.html

圖：命名為 index.html

透過 VSCode 創建一個檔案，命名為 index.html。

步驟 6: 生成模板

圖：輸入 ! 快速生成

點開這個檔案，輸入 !。

步驟 7: 模板完成

圖：按 Enter 生成完整 HTML 模板

按下 enter，能直接生成一整份 HTML 範本。

步驟 8: Go Live 預覽

圖：右下角 Go Live 即時預覽

點擊右下角的 Go Live，能即時預覽這個 Html 實際的網頁長什麼樣子。

步驟 9: 元素介紹

圖：元素如磚塊，大多有開頭與結尾標籤

在網頁中，元素就像是組成房子的磚塊。每個元素代表一個網頁上的部分，比如一段文字、一張圖片或一個按鈕。這些元素透過 HTML 標籤來表示，每個標籤都有不同的功能，讓我們可以有條理地建構和設計網頁。換句話說，元素是網頁內容的基本單位，所有的內容都是由這些元素組成的。另外大多數的元素都會有 開頭 與 結尾 包起來，才能成為一個真正的元素。

步驟 10: 屬性介紹

圖：屬性放在開頭標籤，提供額外資訊如 href

單純的一塊磚頭，沒辦法表達太多東西，所以我們替他加上了【屬性】。屬性就像是為這些磚塊添加的裝飾或說明。它們提供額外的訊息或修改元素的外觀和行為。Attributes 永遠都放在開頭標籤。例如，連結元素有一個 href 告訴網頁點擊這個連結後實際要跳轉到哪裡。屬性幫助我們更細緻地控制和定義元素，讓網頁變得更加豐富和有趣。

❓ 練習題

快問快答 - 請問以下 HTML 是否符合格式 <a> Ray 的個人官網 </a href="https://ray-realms.com/\">

A) 是，符合格式
B) 否，屬性不是只能放在開頭標籤嗎?
C) 很明顯他處在一個既對又錯的不穩定態中

<details> <summary>💡 點擊查看解答</summary>

正確答案: Ｂ、否，屬性不是只能放在開頭標籤嗎?

正確格式：<a href="...">文字</a>

</details>

💻 HTML 基本元素實作

🎯 學習目標:使用標題 (h1-h6)、段落 (p)、換行 (br)、空格 ( )文字強調 (em, strong, del)、圖片 (img)、連結 (a)、區塊 (div)、註解

步驟 1: 標題元素

<h1>超大標題字</h1>
<h2>大標題字</h2>
<h3>普通標題字</h3>
<h4>小標題字</h4>
<h5>更小標題字</h5>
<h6>超級小標題字</h6>

圖：h1~h6 分級組織內容

標題，顧名思義就是標題字，特別大、特別顯眼，能很好的分級和組織網頁內容，根據重要性，有 h1 ~ h6 六種標題。

步驟 2: 段落元素

<!-- [新增] 強調重點：段落自動新行，用來放置文字內容，為什麼？因為它定義了文字的語意結構，讓瀏覽器正確渲染段落間距 -->
<p>段落，會直接開始於新的一行。通常是用來放一段文字</p>

圖：p 標籤建立段落

段落（Paragraphs），段落用來放一段文字，使用 <p> 標籤。

步驟 3: 段落空格

<p>段落，會直接開始於新的一行。通常是用來放一段文字</p>

<!-- [新增] 多空格處理：HTML 壓縮多空白為一，使用 &nbsp; 插入非斷行空格，為什麼？維持設計精確控制空白*
<p>段落內有很多空白，也只會被視為一個空白的，你必須透過關鍵字 &nbsp; 才能放置多個空白</p>

圖：  創建多空白

需要注意的是，HTML 中段落內的空白不會顯示，可以使用   關鍵字來創建多個空白。

步驟 4: 段落換行

<p>段落，會直接開始於新的一行。通常是用來放一段文字</p>
<p>段落內有很多空白，也只會被視為一個空白的，你必須透過關鍵字 &nbsp; 才能放置多個空白</p>

<!-- [新增] 換行處理：段落內換行無效，用 <br/> 強制換行，為什麼？br 是自閉合標籤，單純控制布局不影響語意 -->
<p>
    <!-- [新增] br 實現換行 -->
    換行在段落中是沒有用的，你可以透過 br 標籤<br/>
    來創建換行，<br/>
    >因為功能單純，可以將開始標籤與結束標籤省略為同個東西
</p>

圖： 添加換行

HTML 中段落內的換行不會顯示，可以使用 標籤來添加換行效果。

步驟 5: 專用元素

圖：用文字操作如 Word 文件

為了撰寫複雜的文件格式，所以有很多專用的元素，來做類似的效果。你可以想像成用文字的方法，操作 word，撰寫文章。

步驟 6: 斜體強調

<!-- [新增] em 斜體：語意強調，為什麼？表示語意上的重點，讓螢幕閱讀器加強語調 -->
<em>可愛的貓貓</em>

圖：元素疊加效果

有意思的是，多個元素包再一起時，效果是會疊加的喔。

步驟 7: 疊加粗體

<!-- 前略 -->

<!-- [新增] strong 粗體：強烈重要，為什麼？語意標記重要內容，提升可讀性與無障礙 -->
<strong>
    <em>可愛的貓貓</em>
</strong>

圖：em + strong 疊加

我們替他加上粗體字效果。斜體與粗體被疊加了！

步驟 8: 疊加刪除線

<!-- 前略 -->

<!-- [新增] del 刪除線：表示已刪除內容，為什麼？語意顯示變更歷史，如版本比較 -->
<del>
    <strong>
        <em>可愛的貓貓</em>
    </strong>
</del>

圖：多層疊加

再疊加上一個刪除符號。

步驟 9: 圖片元素

<img 
    src="https://ghost-storage.ray-realms.com/blog-images/1718132244050-eq5mnk.jpg"
/>

圖：img 自閉合，src 指定來源

Image (img)，在網頁當中放置圖片，你可以透過 src 指定圖片網址，也一樣因為 img 功能單純，可以將開始標籤與結束標籤省略為同個東西。

步驟 10: 圖片尺寸

<img
    src="https://ghost-storage.ray-realms.com/blog-images/1718132244050-eq5mnk.jpg"
    <!-- [新增] width/height：控制顯示尺寸，為什麼？避免圖片過大影響性能與布局 -->
    width="300px"
    height="600px"
/>

圖：指定寬高

你可以透過 width 與 height 指定圖片寬度與高度。

步驟 11: 圖片 alt

<img
    src="https://ghost-storage.ray-realms.com/blog-images/1718132244050-eq5mnk.jpg"
    width="300px"
    height="600px"
    <!-- [新增] alt：替代文字，為什麼？圖載入失敗或無障礙時提供描述，提升包容性 -->
    alt="描述圖片的替代文字"
/>

圖：alt 文字顯示

另外 alt 屬性可以寫下圖片的替代文字，當圖片載入失敗時、或者有視覺障礙的人聆聽時便會顯示這段文字。

步驟 12: 連結元素

<!-- [新增] a 連結：href 指定目標，為什麼？提供導航功能，點擊跳轉頁面 -->
<a href="https://ray-realms.com/">這是一個點了會挑轉到 Ray 個人網站的連結</a>

圖：a 標籤導向外部資源

Links（連結），連結用來導向其他網頁或資源，使用 <a> 標籤。href 屬性指定目標網址。

步驟 13: 區塊元素

<div>
    <h3>區塊一標題</h3>
    <p>區塊通常是方便美術排版的</p>
</div>

<div>
    <h3>區塊二標題</h3>
    <p>區塊通常是方便程式碼的分類</p>
</div>

圖：div 分組與布局

Div（區塊），區塊的概念很簡單，就是用來分類程式碼或方便美術排版的。

步驟 14: 註解

<h3> 這是一個被無視的故事</h3>
<!-- 我被無視了 QAQ -->
<p>
    任何放在註解中的文字，都不會顯示在網頁上<br>
    註解只是給開發者看的文字
</p>

*圖：<!-- --> 不顯示，快捷鍵 Ctrl+/ *

Comments（註解），<!-- 註解文字，並不會被顯示出來，快捷鍵 ctrl + / -->。

挑戰題

嘗試運用標題字、段落、粗體字或其他格式

來撰寫一小段文字

（以下是範本，想不到寫什麼可以照抄）

這是一個貓貓的故事

從前有一隻貓貓，他叫燒賣

他住在北科旁邊的公園旁邊，大家有空要去看看他喔！

💻 挑戰題參考解答

🎯 學習目標:綜合運用 h1、p、strong、em、br

步驟 1: 大標題

<!-- [新增] h1 大標題：最高層級，為什麼？定義主要主題，提升文件結構與 SEO -->
<h1>
    這是一個貓貓的故事
</h1>

圖：h1 主要標題

挑戰題參考答案，大標題。

步驟 2: 內文綜合

<h1>
    這是一個貓貓的故事
</h1>

<!-- [新增] p + strong + em + br：綜合語意強調與布局，為什麼？模擬真實文章，層次分明 -->
<p>
    從前有一隻貓貓，他叫<strong>燒賣</strong><br/>
    他住在北科旁邊的公園旁邊，<em>大家有空要去看看他喔！</em>
</p>

圖：完整貓貓故事

內文。