Learning Objectives
- 寫出一份完整 HTML 文件的骨架：doctype、html、head、body
- 說明 head 裡的 meta charset、viewport、title、link 各自的用途
- 分辨元素、標籤、屬性與屬性值，並認得常見的空元素
- 依正確的順序關閉巢狀元素，並用註解替程式碼加上說明
- 說明瀏覽器會修補寫錯的 HTML，並從 DOM 樹看出修補的結果
每一份 HTML 檔都有同一副骨架
上一課用開發者工具看網頁時，不管是哪個網站，最外層都長得差不多：一個 html，裡面分成 head 和 body。
這副骨架是瀏覽器讀 HTML 的起點：它告訴瀏覽器「這是哪一版的 HTML」「用什麼編碼讀文字」「頁面是什麼語言」「標題叫什麼」。
少了這些，畫面常常看起來還是正常的，因為瀏覽器很會猜；但猜錯的時候，中文會變成亂碼、手機上的字小到看不清楚、 螢幕閱讀器用錯誤的語言唸出內容。這一課把骨架的每一行講清楚，再學 HTML 的基本名詞：元素、標籤、屬性。
doctype、html、head 與 body
一份完整的 HTML 文件：
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>社團幹部交接手冊</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>社團幹部交接手冊</h1>
<p>這份手冊整理社長、總務、活動長的工作內容。</p>
</body>
</html>
| 這一行 | 作用 |
|---|---|
<!doctype html> |
放在第一行，讓瀏覽器用標準模式排版。少了它，瀏覽器會進入相容舊網頁的「怪異模式」（quirks mode），有些 CSS 的算法會不一樣。大小寫都可以 |
<html lang="zh-Hant"> |
整份文件的根元素；lang 說明內容的語言，螢幕閱讀器依它選擇發音。zh-Hant 是繁體中文，也常見 zh-TW |
<head> |
放關於這份文件的資訊，這些內容不會顯示在網頁上 |
<meta charset="utf-8"> |
用 UTF-8 編碼讀這份檔案。中文網頁少了它可能出現亂碼；規格要求它放在檔案的前 1024 個位元組之內，所以寫在 head 的第一行 |
<meta name="viewport" …> |
讓手機用裝置本身的寬度顯示網頁。少了它，手機瀏覽器會用一個較寬的虛擬寬度排版再整頁縮小，字變得很小 |
<title> |
頁面標題：顯示在瀏覽器分頁、書籤與搜尋結果上。每一頁都應該有，而且要能分辨是哪一頁 |
<link rel="stylesheet" href="…"> |
載入外部的 CSS 檔（第 9 課開始用） |
<body> |
所有顯示在畫面上的內容都寫在這裡 |
編輯器打
!再按 Tab（VS Code 等編輯器內建的縮寫功能），通常就會產生這副骨架。會用縮寫也要知道每一行在做什麼。
元素、標籤與屬性
拿一個連結來拆解：
<a href="https://example.com" title="社團網站">社團網站</a>
| 名詞 | 指的是 | 這個例子裡 |
|---|---|---|
| 標籤（tag） | 角括號括起來的標記 | 開始標籤 <a …>、結束標籤 </a>（多一個斜線） |
| 元素（element） | 開始標籤＋內容＋結束標籤，整個算一個 | 從 <a 到 </a> 這一整段 |
| 屬性（attribute） | 寫在開始標籤裡，替元素加上額外的資訊 | href、title |
| 屬性值（value） | 等號後面、引號裡面的內容 | "https://example.com" |
幾個寫法上的習慣：
- 標籤與屬性名稱不分大小寫，但一律寫小寫；屬性值一律加引號（雙引號最常見）。
- 一個開始標籤可以有好幾個屬性，用空格隔開，順序不影響意思。
- 有些屬性只要寫出名稱就有作用，例如
<input required>，這叫布林屬性（boolean attribute）。
空元素（void element）沒有內容，所以只有開始標籤、沒有結束標籤：
| 空元素 | 用途 |
|---|---|
<br> |
段落內換行 |
<hr> |
主題分隔線 |
<img> |
圖片（第 5 課） |
<input> |
表單欄位（第 7 課） |
<meta>、<link> |
head 裡的文件資訊與外部資源 |
你可能看過 <br /> 這種寫法：那是 XHTML 的習慣，HTML 會忽略那個斜線，寫不寫都一樣。
巢狀、關閉順序與註解
元素可以包在另一個元素裡，這叫巢狀（nesting）。被包住的是子元素，外面的是父元素；DOM 樹就是照這個關係長出來的。
規則：先開的後關，像把盒子一層層放進去，再一層層拿出來。
<!-- 正確：strong 在 p 裡面開始，也在 p 裡面結束 -->
<p>報名<strong>截止日是 12 月 5 日</strong></p>
<!-- 錯誤：p 先關、strong 後關，兩個元素交錯 -->
<p>報名<strong>截止日是 12 月 5 日</p></strong>
用縮排表示層級，一層兩個空格，巢狀結構一眼就看得出來：
<body>
<h1>交接手冊</h1>
<ul>
<li>社長</li>
<li>總務</li>
</ul>
</body>
<!-- … --> 是註解（comment）：瀏覽器不會顯示，用來替自己或組員留下說明。
但註解會跟著 HTML 一起送到使用者的瀏覽器，「檢視原始碼」就看得到，所以不要在註解裡寫密碼或不想公開的事。
小測驗：骨架與名詞
在 <a href="https://example.com">社團網站</a> 裡，href 是什麼？
下面哪一行應該寫在 <head> 裡？
哪一個的關閉順序正確？
下面哪一個不是空元素（需要結束標籤）？
瀏覽器會修補寫錯的 HTML
寫錯的 HTML 不會讓網頁打不開。HTML 規格把遇到錯誤時要怎麼處理寫得很清楚，所有主流瀏覽器照同一套規則修補， 修補後的結果就是 DOM 樹。所以原始碼寫錯，你要看 DOM 樹才知道瀏覽器實際建出了什麼：
| 原始碼 | 瀏覽器建出的 DOM | 原因 |
|---|---|---|
<p>說明<div>內容</div></p> |
<p>說明</p> <div>內容</div> <p></p> |
p 裡面不能放 div，遇到 div 時 p 自動結束；後面多出來的 </p> 變成一個空的 p |
<p><strong>重要</p></strong> |
<p><strong>重要</strong></p> |
交錯的標籤被調整成正確的巢狀 |
<li>瀏覽器 <li>編輯器（沒寫 </li>） |
兩個完整的 li | li 的結束標籤本來就可以省略：新的 li 開始時，上一個自動結束 |
既然會修補，為什麼還要寫對？
- 修補的結果不一定是你想要的：上面第一列多了一個空段落，版面會多一段空白，CSS 也可能選不到你以為的元素。
- 組員或未來的你讀原始碼時，看到的結構和瀏覽器實際的結構不一樣，很難除錯。
可以用 W3C 的檢查工具（validator.w3.org）把 HTML 貼上去，它會列出每一個錯誤與行號。
檔名與 index.html
HTML 檔要存成 .html 結尾的純文字檔（用 VS Code 這類程式碼編輯器，不要用 Word），編碼選 UTF-8。
檔名會變成網址的一部分，所以有幾個習慣：
| 建議 | 原因 | 例子 |
|---|---|---|
| 全部小寫 | 很多網頁伺服器（例如 Linux 上的）分大小寫，About.html 和 about.html 是兩個不同的檔案 |
about.html |
不用空格，用連字號 - 隔開單字 |
空格在網址裡會變成 %20，不好讀也容易打錯 |
club-handbook.html |
| 用英文與數字 | 中文檔名在網址裡會被編碼成一長串 %E7%A4%BE… |
week1-notes.html |
index.html 是資料夾的預設頁面：網址以資料夾結尾（例如 https://example.com/club/），沒有寫檔名時，
網頁伺服器通常會送出那個資料夾裡的 index.html。所以網站首頁的檔名通常就是 index.html。
小測驗：修補與檔名
原始碼是 <p>說明<div>內容</div></p>。瀏覽器建出的 DOM 樹，body 底下有哪些元素？
下面哪一個檔名最適合放上網站？
網址是 https://example.com/club/，沒有寫檔名。網頁伺服器通常會送出哪個檔案？
重點整理
- 文件骨架：
<!doctype html>、<html lang="…">、<head>、<body>。 - head 放文件資訊：
meta charset="utf-8"（寫在最前面）、viewport（手機用裝置寬度顯示）、title（分頁標題）、link（載入 CSS）；body 放要顯示的內容。 - 元素＝開始標籤＋內容＋結束標籤；屬性寫在開始標籤裡，名稱小寫、值加引號；空元素（br、img、input、meta、link）沒有結束標籤。
- 巢狀元素先開的後關；
<!-- -->是註解，不顯示但「檢視原始碼」看得到。 - 瀏覽器照規格修補寫錯的 HTML，DOM 樹是修補後的結果；寫對才能讓結構和你想的一樣。
- 檔名小寫、不用空格；資料夾的預設頁是 index.html。
下一課開始寫 body 裡的內容：標題、段落與清單。