今天要學會 HTML 最重要的基礎：網頁結構、文字標籤、清單標籤。
最後，我們來試著寫一頁「自我介紹頁」！

一、HTML 基本結構

一個完整的 HTML 網頁，基本上會由這三個主要區塊組成：
• < html >：整份網頁的最外層標籤，所有內容都放在裡面。
• < head >：放置網頁的「設定」資訊，例如網頁標題 < title >、編碼方式 < meta >、連結 CSS、JS。
• < body >：真正會顯示在瀏覽器中的內容（文字、圖片、按鈕……）。

二、< title > 標籤的作用

< title > 用來設定「網頁標題」，它不會顯示在畫面上，而是會出現在：
• 瀏覽器分頁的名稱
• 加入書籤時的標題
• 搜尋引擎結果（SEO 會用它作為頁面名稱）

![https://ithelp.ithome.com.tw/upload/images/20250917/20178705kvzwXYoVcF.png](https://ithelp.ithome.com.tw/upload/images/20250917/20178705kvzwXYoVcF.png)

小提醒：每個頁面的 < title > 應該 有意義且唯一，避免只寫「Untitled」

三、文字標籤

標題 < h1 > ~ < h6 >
• < h1 >：最大、最重要
• < h6 >：最小、層級最低

段落 < p >:用來呈現一段文字。

文字強調
• < strong >：粗體，表示「重要」
• < em >：斜體，表示「強調」
• < span >：行內元素，用來標記局部文字，方便加上樣式 CSS 或 JS 控制
範例：< p >我最喜歡的顏色是 < span style="color: red;" >紅色< /span >。< /p >
這樣「紅色」會變紅字，但整段文字還是保持在同一行。

四、清單標籤

HTML 提供兩種主要清單：

無序清單 (Unordered List) → < ul >
• 用來表示沒有特定順序的項目
• 預設會用「圓點」符號顯示
• 搭配 < li > (list item) 表示每個條目

![https://ithelp.ithome.com.tw/upload/images/20250917/20178705XqfT2gfnnf.png](https://ithelp.ithome.com.tw/upload/images/20250917/20178705XqfT2gfnnf.png)

有序清單 (Ordered List) → < ol >
• 用來表示有「順序」或「步驟」的內容
• 預設會用數字 1, 2, 3 編號
• 同樣搭配 < li > 表示每個條目

補充:
巢狀清單 (Nested Lists)
• 清單裡面可以再放清單，形成階層。

![https://ithelp.ithome.com.tw/upload/images/20250917/20178705oECx1h5V82.png](https://ithelp.ithome.com.tw/upload/images/20250917/20178705oECx1h5V82.png)

小結:
• < ul >：無序清單 → 用圓點，適合「興趣、購物清單」
• < ol >：有序清單 → 用數字，適合「步驟、流程」
• < li >：清單項目的標籤，必須放在 < ul > 或 < ol > 裡

接著，我們來整合今天學習的內容吧!
做個簡單的自我介紹。

最後恭喜你已經學會html最基本的架構啦~
已經進入前端世界的新大門了🤩
我們下一篇再見囉！
下篇會繼續學習其他html的知識，敬請期待！