Learning Objectives
- 依內容的層級使用 h1～h6，說明為什麼標題不應該為了字的大小而跳級
- 說明 HTML 會把連續的空白與換行合併成一個空格，並分辨 p、br 與 pre 的用途
- 分辨 strong、em 與 b、i：前者表示意義，後者只表示樣式慣例
- 用 ul、ol、li 寫出項目清單與有順序的清單，並能寫出巢狀清單
- 用 HTML 實體顯示 <、>、& 等保留字元
網頁上的文字也有結構
打開一篇新聞或一份課程講義，你一眼就分得出哪裡是大標題、哪裡是小標題、哪幾行是條列的重點。 這是因為排版透露了結構：大標題字最大、小標題次之、清單前面有項目符號。
HTML 的工作是把這個結構寫明白：「這一行是第二層標題」「這三行是一份清單」。 寫明白之後，好處不只是外觀：
| 誰在讀這個結構 | 它怎麼用 |
|---|---|
| 瀏覽器 | 依結構套上預設樣式（標題變大變粗、清單加項目符號） |
| 螢幕閱讀器 | 列出所有標題讓視障使用者快速跳轉，唸清單時先說「清單，3 個項目」 |
| 搜尋引擎 | 從標題判斷這一頁在講什麼 |
| 你自己 | 之後用 CSS 改外觀時，可以直接選中「所有第二層標題」 |
所以這一課的重點是：依內容的意義選標籤，不要依想要的外觀選標籤。外觀交給 CSS（第 9 課開始）。
標題 h1～h6 與段落 p
HTML 有六層標題，<h1> 最重要，<h6> 最不重要：
<h1>資料結構期中考複習</h1> <!-- 整頁的主標題，通常一頁一個 -->
<h2>考試範圍</h2> <!-- 第二層：主標題底下的章節 -->
<h3>鏈結串列</h3> <!-- 第三層：章節底下的小節 -->
規則只有一條：依層級使用，不要跳級。h2 底下的小節用 h3，不要因為覺得 h3 太大就直接寫 h5。
想讓標題變小，之後用 CSS 改字的大小；層級是給機器看的目錄，跳級會讓目錄缺一層。
段落用 <p>。要注意一件事：HTML 會把連續的空白與換行合併成一個空格。
你在原始碼裡按 Enter 換行，網頁上不會換行：
<p>陣列、鏈結串列、堆疊與佇列。
考試時間 100 分鐘。</p>
網頁上會顯示成一行「陣列、鏈結串列、堆疊與佇列。 考試時間 100 分鐘。」。
真的要分段就寫兩個 <p>；同一段裡面要強制換行（例如地址、詩句）才用 <br>。
<br> 是空元素：沒有內容，所以不需要結束標籤。
強調：strong、em 與 b、i
HTML 有兩組看起來很像的標籤：
| 標籤 | 意思 | 預設外觀 | 什麼時候用 |
|---|---|---|---|
<strong> |
這段很重要 | 粗體 | 警告、截止日期、關鍵字 |
<em> |
語氣上的強調 | 斜體 | 唸的時候要加重的字（「我說的是明天，不是今天」） |
<b> |
只是習慣上用粗體 | 粗體 | 產品名稱、摘要裡的關鍵詞，沒有「重要」的意思 |
<i> |
只是習慣上用斜體 | 斜體 | 外文書名、學名（Homo sapiens）、專有名詞 |
前兩個表示意義，螢幕閱讀器可能改變語氣；後兩個只是樣式慣例。
拿不準的時候問自己：「把它換成一般文字，意思有沒有變？」意思會變就用 strong／em。
中文的強調習慣用粗體，斜體的中文字通常是瀏覽器硬把字形歪斜，不好讀；所以中文網頁的
em常會用 CSS 改成粗體或加底線。
清單：ul、ol、li
條列的內容用清單，不要用「-」或「1.」開頭的段落假裝：
<ul> <!-- unordered list：沒有順序的清單，預設是圓點 -->
<li>王小明：資料蒐集</li>
<li>陳小華：網頁設計</li>
</ul>
<ol> <!-- ordered list：有順序的清單，預設是 1. 2. 3. -->
<li>決定題目</li>
<li>蒐集資料</li>
</ol>
- 清單的直接子元素只能是
<li>。 - 要在清單裡再分一層，把新的
<ul>放在某個<li>裡面（不是放在兩個li之間）。 ol可以加start="3"從 3 開始數、reversed倒著數；項目符號的樣子（圓點、方塊、羅馬數字）交給 CSS 的list-style。
還有一種描述清單 <dl>，用在「名詞與說明」成對出現的地方，例如名詞解釋：
<dl>
<dt>堆疊</dt> <dd>後進先出的資料結構</dd>
<dt>佇列</dt> <dd>先進先出的資料結構</dd>
</dl>
小測驗：標題、段落與清單
覺得 <h2> 的字太大，想讓章節標題小一點。下面哪個做法正確？
原始碼分成兩行：第一行是 <p>早安 你好（「早安」後面有三個空格），第二行是 各位</p>。網頁上顯示什麼？
巢狀清單的子清單 <ul> 應該放在哪裡？
「提醒：繳交期限是 11 月 20 日」這句裡的粗體，用哪個標籤最恰當？
引用、程式碼與預先排好的文字
| 標籤 | 用途 | 範例 |
|---|---|---|
<blockquote> |
一整段引用別人的話，cite 屬性寫來源網址 |
書摘、法條 |
<q> |
句子裡的短引用，瀏覽器會自動加引號 | 他說 <q>先寫測試</q> |
<code> |
一小段程式碼或檔名、指令 | 執行 <code>python app.py</code> |
<pre> |
保留原本的空白與換行（不合併） | 程式碼區塊、文字畫 |
<kbd> |
鍵盤按鍵 | 按 <kbd>Ctrl</kbd> + <kbd>C</kbd> |
程式碼區塊通常把兩個合起來用：<pre><code>…</code></pre>：pre 負責保留縮排，code 說明「這是程式碼」。
HTML 實體：顯示保留字元
< 和 > 在 HTML 裡用來寫標籤。想在網頁上顯示一個小於符號，直接寫 <，瀏覽器會以為後面是標籤的開頭。
這時要改寫成 HTML 實體（entity）：以 & 開頭、; 結尾的代碼。
| 想顯示 | 寫成 | 說明 |
|---|---|---|
< |
< |
less than |
> |
> |
greater than |
& |
& |
因為 & 是實體的開頭，本身也要改寫 |
" |
" |
在屬性值裡用雙引號時 |
| © | © |
著作權符號 |
| 不換行的空格 | |
讓兩個字不要被拆到兩行（例如「100 分鐘」） |
中文、emoji 這些字元不需要改寫：只要文件宣告了 <meta charset="utf-8">（第 2 課），直接打字就好。
小測驗：強調、程式碼與實體
想在網頁上顯示文字「a && b」，HTML 原始碼最正確的寫法是？
貼一段有縮排的 Python 程式碼到網頁，想保留縮排，應該用？
下面哪一個是空元素（不需要結束標籤）？
重點整理
- 依意義選標籤，外觀交給 CSS；標題 h1～h6 依層級使用、不跳級。
- HTML 把連續空白與換行合併成一個空格：分段用
p，段內換行用br，要保留排版用pre。 strong、em表示重要與語氣；b、i只是樣式慣例。- 清單用
ul／ol＋li，子清單放在li裡面；名詞解釋用dl、dt、dd。 <、>、&要寫成<、>、&；中文與 emoji 直接打字即可。
下一課講連結與路徑：<a> 怎麼連到別的頁面、同一頁的某一段，以及相對路徑怎麼算。