【網頁設計自學】HTML的空格、註解、換行
這篇整理 HTML 裡很常用的三個基礎觀念：空格、換行與註解。它們看起來很小，但寫網頁時幾乎天天會遇到。
📘 HTML｜空格、換行、註解教學
為什麼要學這三個？
在 HTML 裡，瀏覽器會自動處理很多空白與換行，所以你在原始碼裡打了很多空格，畫面上不一定會照樣顯示。
因此，如果想要控制畫面上的空格、換行，或是在程式碼中留下備註，就需要使用對應的 HTML 語法。
- 空格：用來控制文字之間的距離。
- 換行：用來讓文字或段落換到下一行。
- 註解：用來在原始碼裡留下備註，不會顯示在網頁畫面上。
🔹 HTML 空格｜Space
HTML 會壓縮連續空格
在 HTML 中，如果你連續輸入很多個空格，瀏覽器通常只會顯示成一個空格。
如果想要強制保留多個空格，可以使用 HTML 的特殊字元。
常見空格寫法
| 寫法 | 名稱 | 用途 |
|---|---|---|
| | 不斷行空白 | 最常用，常用來保留空格。 |
|   | 半形空格 | 寬度約為半個中文字左右。 |
|   | 全形空格 | 寬度約為一個中文字左右。 |
空格範例
阿 元 → 阿 元
阿 元 → 阿 元
阿 元 → 阿 元
最常見的是 。如果只是想在文字中保留一點距離，通常先記這個就夠用了。
↩️ HTML 換行｜Line Break
常見換行方式
HTML 裡有好幾種方式可以換行，不同標籤代表的語意也不太一樣。
- <br>：強制換行，適合單純想換到下一行。
- <p>：段落標籤，適合文章段落。
- <pre>：保留原始碼中的空白與換行。
換行範例
第一行<br>
第二行
<p>第一段</p>
<p>第二段</p>
<pre>
這裡 的空格會被保留
換行也會保留
</pre>
顯示概念
第一行
第二行
第二行
第一段
第二段
這裡 的空格會被保留 換行也會保留
如果是寫文章內容，通常建議使用 <p>。如果只是單純要在同一段裡換行，才使用 <br>。
💬 HTML 註解｜Comment
註解的用途
HTML 註解不會出現在網頁畫面上，只會保留在原始碼中。
它很適合用來做筆記、標記區塊，或暫時隱藏某段 HTML。
註解語法
<!-- 這裡是註解 -->
<!--
這裡可以放一段完整 HTML
<p>這段不會顯示</p>
-->
- 單行註解：適合簡短備註。
- 多行註解：適合暫時關閉一整段 HTML。
- 注意事項：註解雖然不會顯示在頁面上，但使用者仍可能從原始碼看到。
🧪 完整 HTML 示範
下面是一個簡單的 HTML 範例，示範標題、段落、換行與註解的寫法。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 空格、換行、註解教學</title>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落的文字</p>
<br>
<br>
<!-- 這一段是 HTML 註解，不會顯示在網頁畫面上 -->
<h2>這一段 h2 是第二段標題</h2>
<p>這是一個段落的文字</p>
</body>
</html>
✅ 小結
HTML 的空格、換行與註解都是非常基礎，但也非常常用的語法。
- 想保留空格：可以使用 、 、 。
- 想換行：可以使用 <br>、<p> 或 <pre>。
- 想寫註解：可以使用 <!-- 註解內容 -->。
簡單記法：
空格用 ，換行看情況用 <br> 或 <p>，註解則用 <!-- --> 包起來。
空格用 ，換行看情況用 <br> 或 <p>，註解則用 <!-- --> 包起來。
留言
張貼留言