常用 HTML 標籤

上一課學了 HTML 的基本概念，這一課來認識最常用的標籤。學會這些，你就能寫出一個像樣的網頁。

標題：h1 ~ h6

HTML 有 6 種大小的標題，<h1> 最大，<h6> 最小：

實務上最常用 h1 ~ h3。一個頁面通常只有一個 <h1>。

段落與換行：p、br

<p> 是段落，段落之間會自動空一行。<br> 是強制換行（不需要關標籤）：

文字裝飾：strong、em

• <strong> = 粗體（語意是「重要」）
• <em> = 斜體（語意是「強調」）

超連結：a

<a> 讓文字變成可以點擊的連結。href 指定要連到哪裡：

target="_blank" 會在新分頁開啟連結，使用者不會離開當前頁面。

圖片：img

<img> 用來顯示圖片。它是「自閉合標籤」，不需要關標籤：

• src = 圖片的網址
• alt = 圖片無法顯示時的替代文字（也幫助視障使用者）

清單：ul、ol、li

兩種清單：

• <ul> = 無序清單（圓點）
• <ol> = 有序清單（數字）
• <li> = 清單項目

組合技：做一個簡單的個人頁面

把上面學到的標籤全部用起來：

AI 協作：學了這個，跟 AI 怎麼配合？

學會常用標籤，你就能跟 AI 精確溝通「我要什麼元素」而不是講得很模糊。

你的人類優勢：

• 你能用正確的標籤名稱跟 AI 溝通（「用 table 不要用 div 硬排」）
• 你能判斷 AI 選的標籤語義對不對（導航該用 nav、列表該用 ul）

可以這樣跟 AI 說：

幫我用 HTML 做一個商品比較表格，有 3 個商品、4 個規格欄位，用 table 標籤。

練習題