HTML 結構與常用標籤
基礎HTML 用成對標籤標記內容。骨架：DOCTYPE、html、head（給瀏覽器）、body（給訪客）。常用：h1-h6 標題、p 段落、ul/ol+li 清單、a 連結、img 圖片；語意化標籤 header/nav/main/footer 令機器都明網頁結構。
- HTML 是標記語言：成對標籤包住內容，先開的後關。
- 骨架四件：DOCTYPE、html、head（給瀏覽器）、body（給訪客）。
- 常用標籤：h1-h6 標題、p 段落、ul/ol 加 li 清單、a 連結、img 圖片。
文體小知識：編程教學課每個概念都配一段可以親手試的代碼例子，照住輸入、改一改，最快學會。
§課文原文 Passage
1網頁的骨架是 HTML（HyperText Markup Language，超文字標記語言）：它不是程式語言，而是一種標記語言 — 用一對對標籤告訴瀏覽器「這裡是標題、這裡是段落」。標籤絕大多數成對出現：＜p＞Hello!＜/p＞ 中，＜p＞ 是開始標籤、＜/p＞ 是結束標籤（帶斜線），中間就是內容。
2每個 HTML 檔都有固定骨架：＜!DOCTYPE html＞ 宣告這是 HTML5；＜html＞ 包住全部；＜head＞ 放給瀏覽器看的資訊（網頁標題、文字編碼），不會顯示在頁面上；＜body＞ 放給訪客看的一切內容。把代碼存成 index.html，用瀏覽器打開就見到網頁 — 寫網頁就是這樣開始的。
3最常用的標籤有幾組：標題 ＜h1＞ 到 ＜h6＞（一頁通常只有一個 ＜h1＞）；段落 ＜p＞；清單 ＜ul＞ 配 ＜li＞（無序、圓點）或 ＜ol＞ 配 ＜li＞（有序、編號）；超連結 ＜a href="網址">文字＜/a＞；圖片 ＜img src="相片.jpg" alt="說明"＞（單標籤，不用結束）。href 和 src、alt 這些掛在標籤上的額外資訊叫屬性（Attribute）。
4較新的 HTML 鼓勵用語意化標籤（Semantic Tags）：＜header＞ 頁首、＜nav＞ 導覽選單、＜main＞ 主要內容、＜footer＞ 頁尾。它們外表像 ＜div＞，但講明「這部分是什麼用途」，令搜尋引擎和螢幕閱讀器（視障人士用的朗讀軟件）都能理解網頁結構 — 網頁不只是畫給人看，還要講給機器聽。
1重點摘要 Summary
HTML 用成對標籤標記內容。骨架：DOCTYPE、html、head（給瀏覽器）、body（給訪客）。常用：h1-h6 標題、p 段落、ul/ol+li 清單、a 連結、img 圖片；語意化標籤 header/nav/main/footer 令機器都明網頁結構。
2生字卡 Vocabulary
編寫網頁的標記語言，用標籤描述內容的結構和意義。
尖括號包住的標記，多數成對出現：開始 ＜p＞、結束 ＜/p＞。
開始標籤、內容、結束標籤的整體，例如 ＜p＞Hello＜/p＞ 是一個段落元素。
掛在開始標籤上的額外資訊，例如 ＜a href="..."> 的 href、＜img> 的 src 和 alt。
head 放給瀏覽器看的資訊（標題、編碼）；body 放顯示給訪客的全部內容。
用 href 指定目的地、點擊後跳去的連結，例如 ＜a href="https://...">前往＜/a＞。
單標籤，用 src 指定圖片來源、alt 寫圖片說明文字。
表明用途的結構標籤：header 頁首、nav 導覽、main 主內容、footer 頁尾。
標籤一層層包住另一層；先開的後關，不可交錯。
3逐步講解 Steps
- 最小網頁骨架每個網頁檔案都有固定骨架：＜!DOCTYPE html＞ 宣告這是 HTML5 文件；＜html＞ 包住全部內容；＜head＞ 內放給瀏覽器看的資訊，例如 ＜title＞我的網頁＜/title＞，它顯示在瀏覽器分頁上而不顯示在頁面內；＜body＞ 放訪客看到的一切內容。把骨架存成 index.html 再用瀏覽器開啟，分頁顯示「我的網頁」，頁面顯示「你好！」。骨架是每個網頁的地基，必須一字不差地記熟。
- 標題與段落＜h1＞ 到 ＜h6＞ 是六級標題，h1 最大、h6 最小，一頁通常只用一個 h1 作為主標題，其餘章節用 h2、h3 逐級細分，切忌跳級。＜p＞ 包住一段文字，前後自動留白。例如 body 內寫 ＜h1＞3A班主頁＜/h1＞ 與 ＜p＞這是我的第一個網頁。＜/p＞。標題層級不只控制字體大小，更向搜尋引擎與螢幕閱讀器說明文件結構；亂用標題會令視障用戶難以理解頁面的組織。
- 兩種清單清單有兩種。無序清單 ul 配 li，項目前顯示圓點：＜ul＞＜li＞足球＜/li＞＜li＞象棋＜/li＞＜/ul＞；有序清單 ol 配 li，自動編號 1. 2.：＜ol＞＜li＞開機＜/li＞＜li＞登入＜/li＞＜/ol＞。選擇標準是次序有無意義：興趣清單沒有次序用 ul；操作步驟次序重要用 ol。每個 li 必須包在 ul 或 ol 之內，直接把 li 放在 body 是無效寫法，瀏覽器可能照樣顯示，但結構已經錯誤。
- 超連結與圖片超連結用 a 標籤：＜a href="https://www.labzstudy.com"＞前往 LabzStudy＜/a＞，href 屬性寫目的地網址，中間文字是可點擊部分；連向自己站內另一頁寫相對路徑 ＜a href="about.html"＞關於我們＜/a＞。圖片用 img 單標籤：＜img src="images/campus.jpg" alt="校園全景照片"＞，src 指向圖片位置，alt 是圖片無法顯示時的說明文字；視障人士的螢幕閱讀器靠 alt 朗讀，因此 alt 不可留空。
- 語意化標籤語意化標籤講明每部分的用途：＜header＞ 放頁首，＜nav＞ 放導覽選單，＜main＞ 放主要內容，＜footer＞ 放頁尾。例如 body 內依序放 ＜header＞3A班網站＜/header＞、＜nav＞主頁｜相簿＜/nav＞、＜main＞歡迎來到本班網站＜/main＞、＜footer＞© 2026 3A班＜/footer＞。它們外觀與 div 相似，但向機器講明「這部分是什麼」，搜尋引擎與螢幕閱讀器因此能理解網頁結構。網頁不只畫給人看，還要講給機器聽。
- 巢狀規矩：後開先關標籤嵌套必須「先開的後關」：段落內加粗，寫 ＜p＞這是＜strong＞重點＜/strong＞內容＜/p＞，strong 在 p 之內開啟，就要在 p 關閉之前關閉。寫成交錯的 ＜p＞...＜strong＞...＜/p＞＜/strong＞ 雖然部分瀏覽器勉強顯示，但結構已錯，排版可能混亂，網頁的 DOM 樹亦不合法。檢查方法由內向外：最後開啟的標籤必須最先關閉，如同行李箱先放大箱再放小箱，收拾時先取小箱。
- 屬性與學習方法屬性是掛在開始標籤內的額外資訊，格式為 name='值'：href、src、alt、class、id 都是屬性，一個標籤可以有多個屬性，以空格分隔。學 HTML 最有效的方法是一邊寫一邊看：用文字編輯器建立 index.html，每次修改後存檔並在瀏覽器按重新整理，即時看到效果。HTML 寫錯時通常不會報錯，而是靜靜地顯示異常，因此要養成小步修改、立即檢查的習慣，錯誤才不會累積。
4圖解 Diagrams
5例題示範 Example
例題：寫一個「自我介紹」小網頁，包含網頁標題、最大標題、一段自我介紹、興趣清單和一條站外連結。
- 寫骨架：＜!DOCTYPE html＞ ＜html＞ ＜head＞＜title>自我介紹＜/title＞＜/head＞ ＜body＞...＜/body＞ ＜/html＞ — title 顯示在瀏覽器分頁。
- 加最大標題和段落：body 內寫 ＜h1>我是小明＜/h1＞ ＜p>我是3A班的學生，喜歡運動和電腦。＜/p＞。
- 加興趣清單：＜ul＞＜li>籃球＜/li＞＜li>寫Python＜/li＞＜li>影相＜/li＞＜/ul＞ — 三個項目自動配圓點。
- 加連結並關閉：＜a href="https://www.labzstudy.com">我常用的學習網站＜/a＞，然後補上 ＜/body＞ ＜/html＞ 完成整頁。
- 答案：完整的自我介紹網頁由骨架加四個部分組成：title、h1+p、ul 清單、a 連結 — 存成 .html 檔瀏覽器即可開啟。
6常見錯誤 Mistakes
75 題快測 Quick check
Q1網頁的可見內容應放在哪個標籤內？A. ＜head＞ B. ＜body＞ C. ＜title＞
Q2一個網頁通常可以有多少個 ＜h1＞？
Q3寫出「連往 about.html、文字為『關於我們』」的超連結標籤。
Q4img 標籤的 alt 屬性有什麼作用？
Q5＜nav＞、＜main＞、＜footer＞ 這類標籤統稱為什麼？它們的好處是什麼？
8重點回顧 Recap
- HTML 是標記語言：成對標籤包住內容，先開的後關。
- 骨架四件：DOCTYPE、html、head（給瀏覽器）、body（給訪客）。
- 常用標籤：h1-h6 標題、p 段落、ul/ol 加 li 清單、a 連結、img 圖片。
- 屬性掛在開始標籤上：href 指連結目的地，src 指圖片來源，alt 是必填說明。
- 語意化標籤 header/nav/main/footer 令機器都讀得懂網頁結構。