用超白話學會 20 個常用標籤
每個標籤都用「它是什麼 → 怎麼用」＋最小範例。你可以把範例直接複製去 VS Code 練習。
Ⅰ. 骨架（5 個）
<html> 整頁大盒子
把整個網頁包起來的最外層。
<html lang="zh-Hant">...</html><head> 看不見的設定區
放網站資料與設定（例如字元編碼、描述、載入 CSS）。
<head>
<meta charset="utf-8" />
<title>我的網站</title>
</head><meta> 小貼紙（各種資訊）
常見：charset、viewport、description 等。
<meta name="description" content="這頁在做什麼" /><title> 分頁標題
瀏覽器分頁上的文字，也會當書籤名稱。
<title>我的首頁</title><body> 看得見的內容
畫面上會看到的東西都放這裡（文字、圖片、影片…）。
<body>這裡放內容</body>Ⅱ. 頁面結構（5 個）
<header> 頁首
通常放 Logo、網站名稱、導覽列。
<header>我的網站名稱</header><nav> 導覽列
放一串連結，帶人到各頁面。
<nav>
<a href="index.html">首頁</a>
<a href="about.html">關於</a>
</nav><main> 主要內容
網頁裡最重要的那一塊內容，通常一頁只放一個。
<main>這一區是本文</main><section> 章節
把內容分段落或主題塊，像課本的章節。
<section>最新消息</section><footer> 頁尾
放版權、聯絡方式、社群連結等。
<footer>© 2025 我的小站</footer>Ⅲ. 文字（3 組）
<h1>~<h6> 標題
h1 最大最重要，h6 最小。每頁通常只有一個 h1。
<h1>主標題</h1>
<h2>副標題</h2><p> 段落
一段文字就是一個 <p>，比較好閱讀。
<p>這裡是一個段落內容。</p><a> 連結（超連結）
點了會到其他頁或其他網站。
href：要去的地方（網址、站內檔案、#定位、tel、mailto）。target="_blank"新分頁；搭配rel="noopener"比較安全。
<a href="https://example.com" target="_blank" rel="noopener">看更多</a>Ⅳ. 媒體（3 個）
<img> 圖片
src 是路徑，alt 是替代文字（圖掛了/協助視障朋友）。
<img src="images/cat.jpg" alt="一隻可愛小貓" width="300" /><video> 影片
加 controls 就有播放鈕；可以用 <source> 指影片檔。
<video controls width="560" poster="cover.jpg">
<source src="media/demo.mp4" type="video/mp4" />
</video><audio> 音訊
一段聲音（音樂/錄音）；也用 <source> 指音檔。
<audio controls>
<source src="media/demo.mp3" type="audio/mpeg" />
</audio>Ⅴ. 其他常用（6 個）
<ul> 無序清單（點點）
<ul>
<li>牛奶</li>
<li>麵包</li>
</ul><ol> 有序清單（1. 2. 3.）
<ol>
<li>第一步</li>
<li>第二步</li>
</ol><li> 清單項目
放在 <ul> 或 <ol> 裡面的一條。
<ul><li>一條項目</li></ul><div> 通用大積木
拿來包一坨內容，方便一起排版或加樣式。
<div class="card">這是一塊區塊</div><span> 行內小貼紙
只包住一小段文字，像在句子上貼小標籤。
<p>今天<span class="tag">特價</span>！</p><button> 按鈕（做動作）
type="button"純按（建議預設）。type="submit"送出表單；type="reset"清空表單。
<button type="button">按我</button>到這裡剛好 20 個：
html、head、meta、title、body、header、nav、main、section、footer、h1~h6、p、a、img、ul、ol、li、div、span、button。