HTML 範例怎麼用？複製、存檔，就能開啟網頁
把下方的 HTML 範例複製到 VS Code，儲存為 index.html，再用瀏覽器開啟，就能看到包含標題、導覽列、內容與表單的網頁。HTML 負責內容結構，CSS 負責外觀，JavaScript 負責互動；初學者可以先練習 HTML，不必一次學完三種技術。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="我的第一個 HTML 練習網站。">
<title>我的第一個 HTML 網頁</title>
</head>
<body>
<header>
<h1>我的學習筆記</h1>
<nav aria-label="主要導覽">
<a href="#about">關於本站</a>
<a href="#practice">練習內容</a>
</nav>
</header>
<main>
<h2 id="about">關於本站</h2>
<p>這是使用 HTML 建立的第一個網頁。</p>
<h2 id="practice">練習內容</h2>
<ul>
<li>認識常用標籤</li>
<li>練習修改文字與連結</li>
</ul>
<form method="get">
<label for="keyword">練習輸入關鍵字</label>
<input id="keyword" name="keyword" type="text">
<button type="submit">送出練習</button>
</form>
</main>
<footer>
<p>本站為 HTML 學習用途。</p>
</footer>
</body>
</html>這份程式碼是教學示範，不是實際營運網站。表單送出時只會導向目前頁面的網址並附加查詢參數，沒有資料庫，也不會自動寄信。
HTML 用什麼寫？HTML 網頁編輯器與前置準備
HTML 是純文字檔案，可以用文字編輯器撰寫。新手推薦使用 VS Code，因為它提供語法上色、標籤補齊與檔案管理功能；也可以使用記事本，但應避免使用 Word 等文書軟體儲存網頁原始碼。
開始前，先建立 html-practice 資料夾，再用 VS Code 開啟資料夾並新增 index.html。若要放置圖片，可另外建立 images 資料夾，方便管理相對路徑。
編輯器與網站平台比較
| 工具或平台 | 主要用途 | 免費使用情況 | 適合對象 |
|---|---|---|---|
| VS Code | 編輯本機 HTML、CSS、JavaScript | 免費 | 想學原始碼的新手 |
| CodePen | 線上撰寫與預覽前端程式碼 | 提供免費方案，功能有限制 | 想快速測試片段的人 |
| Wix | 視覺化建站 | 提供免費方案，網域及功能有限制 | 不想自行寫程式的人 |
| WordPress.com | 部落格與內容網站 | 提供免費方案，功能依方案而異 | 以文章管理為主的人 |
| Webflow | 視覺化設計網站 | 提供免費入門方案，匯出程式碼另有方案限制 | 重視版面設計的人 |
| Squarespace | 整合式網站建置 | 主要提供試用，非永久免費建站 | 願意付費使用整合服務的人 |
上述平台不是同一類產品。免費使用編輯器、免費套用版型、免費下載 HTML 原始碼，是三件不同的事；方案與功能應以各平台當下公告為準。
HTML 基本語法：先看懂標籤、屬性與文件結構
多數 HTML 元素由開始標籤、內容與結束標籤組成，例如 <p>這是一段文字</p>。屬性寫在開始標籤內，用來補充設定，例如 <a href="about.html">關於我們</a> 的 href 就是連結目的地。
<!DOCTYPE html> 是文件類型宣告，不是一般內容標籤，主要用來讓瀏覽器採用標準模式解析頁面，不會替你自動校正程式碼。HTML 文件通常分成 head 與 body：前者放網頁資訊，後者放主要顯示內容。
撰寫 HTML 語法時，建議統一使用小寫標籤、替屬性值加引號，並維持縮排。img、meta、input 屬於空元素，不需要另外寫結束標籤。
20 個常用標籤：它是什麼、怎麼用與最小範例
以下片段應放進對應位置練習：網頁資訊放在 head，可見內容通常放在 body。整份文件只需保留一組主要架構，不要把每個架構片段重複貼進同一頁。
1. html：整份文件的根元素
它是什麼：包住 HTML 文件內容的最外層元素。
怎麼用：以 lang 說明頁面語言，繁體中文可使用 zh-Hant。
最小範例：<html lang="zh-Hant">...</html>。省略號代表放入 head 與 body 的位置。
2. head：放網頁設定資訊
它是什麼：存放編碼、網頁標題與樣式連結等資訊的區域。
怎麼用：放在 html 裡、body 前面。
最小範例：<head><title>練習頁</title></head>。
3. title：設定瀏覽器分頁標題
它是什麼：網頁本身的名稱，不是內文大標題。
怎麼用：放在 head，用清楚文字描述頁面主題；搜尋引擎也可能參考它產生搜尋結果標題。
最小範例：<title>HTML 基礎練習｜學習筆記</title>。
4. meta：提供中繼資料
它是什麼：補充編碼、頁面描述與行動裝置顯示設定的元素。
怎麼用：放在 head；新手先設定 UTF-8，降低中文字出現亂碼的機會。
最小範例：<meta charset="UTF-8">。
5. body：放主要顯示內容
它是什麼：承載網頁文字、圖片、連結與表單的區域。
怎麼用：放在 head 後面。
最小範例：<body><p>你好，HTML！</p></body>。
6. h1：標示頁面主要標題
它是什麼：最高層級的內容標題。
怎麼用：初學時建議用一個清楚的 h1 說明頁面主題，而不是單純拿來放大文字。
最小範例：<h1>我的作品集</h1>。
7. h2：標示主要章節
它是什麼：第二層級標題，用來整理主要內容區塊。
怎麼用：放在 h1 所屬主題下；更細的子章節再使用 h3。
最小範例：<h2>網站設計作品</h2>。
8. p：建立文字段落
它是什麼：表達一段完整文字的元素。
怎麼用：不同段落分別使用 p，不要用連續空白或換行硬排版。
最小範例：<p>今天練習建立第一個網頁。</p>。
9. a：建立超連結
它是什麼：連到其他頁面、網站或同頁指定位置的元素。
怎麼用：在 href 填入目的地，連結文字應說明點擊後會看到什麼。
最小範例：<a href="about.html">認識本站</a>。
10. img：嵌入圖片
它是什麼：在頁面載入圖片的元素。
怎麼用：src 指定檔案路徑，alt 提供替代文字；純裝飾圖片可使用空的 alt。
最小範例：<img src="images/work.jpg" alt="作品首頁畫面">。練習時須自行放入對應圖片檔。
11. ul：建立無序清單
它是什麼：適合呈現沒有先後順序的項目集合。
怎麼用：搭配 li 放入每個項目。
最小範例：<ul><li>網頁設計</li><li>內容撰寫</li></ul>。
12. li：定義清單項目
它是什麼：清單中的單一項目。
怎麼用：放在 ul 或 ol 裡，不要獨立用來當普通段落。
最小範例：<ol><li>建立檔案</li><li>開啟瀏覽器</li></ol>。
13. div：建立通用容器
它是什麼：本身沒有特定內容語意的分組元素。
怎麼用：需要包裝內容以便套用 CSS，且沒有更合適的語意元素時使用。
最小範例：<div class="card"><p>作品介紹</p></div>。
14. header：標示介紹區域
它是什麼：頁面或內容區塊的介紹區域。
怎麼用：常用來放網站名稱、標誌與導覽。
最小範例：<header><h1>學習日誌</h1></header>。
15. nav：標示主要導覽
它是什麼：集中主要導覽連結的區域。
怎麼用：放首頁、關於本站等重要連結，不必把所有連結都包進去。
最小範例：<nav><a href="index.html">首頁</a></nav>。
16. main：標示頁面主要內容
它是什麼：承載該頁核心資訊的區域。
怎麼用：一般頁面保留一個可見的 main，避免把重複的全站導覽放進去。
最小範例：<main><h2>最新文章</h2><p>文章摘要。</p></main>。
17. footer：標示頁尾資訊
它是什麼：頁面或內容區塊的收尾區域。
怎麼用：可放版權說明、聯絡方式或相關資訊。
最小範例：<footer><p>聯絡信箱：[email protected]</p></footer>。
18. form：建立資料輸入表單
它是什麼：收集並提交使用者輸入內容的容器。
怎麼用：以 action 指定處理網址，method 指定提交方法。
最小範例：<form action="/search" method="get"><button>搜尋</button></form>。其中 /search 必須有對應服務才會產生搜尋結果。
19. input：建立輸入欄位
它是什麼：提供文字、電子郵件等不同輸入形式的元素。
怎麼用：用 type 選擇類型，搭配 label 說明欄位用途；提交資料時通常需要 name。
最小範例：<label>Email<input type="email" name="email"></label>。
20. button：建立按鈕
它是什麼：讓使用者提交表單或觸發操作的元素。
怎麼用：明確指定 type，避免一般操作按鈕意外提交表單。
最小範例：<button type="button">查看內容</button>。這顆按鈕若要切換內容，還需要搭配 JavaScript。
HTML 轉成網頁怎麼做？從 HTML 建立到預覽
HTML 不需要先轉成另一種檔案才能顯示；所謂「HTML 轉成網頁」，通常就是讓瀏覽器讀取並解析 .html 檔案。
完成 HTML 建立後，先確認檔名不是 index.html.txt，再用瀏覽器開啟。每次修改都要儲存，並重新整理頁面。也能安裝 VS Code 的本機預覽擴充功能，但並非必要步驟。
若要讓其他人透過網址瀏覽，則需部署到網站主機或靜態網站服務。本機開得起來，不代表網站已經公開上線。
網頁設計 HTML 範例的三個練習方向
第一個 HTML 練習是修改首頁的 title、h1 與段落，觀察分頁名稱和頁面內容的差別。
第二個練習是建立 about.html，再從首頁連過去，熟悉相對路徑。
第三個練習是加入 CSS，例如 <p style="color: #165dba;">藍色文字</p>。這種行內樣式適合快速測試，正式網站通常改用獨立樣式表，較容易維護。
HTML 範例下載與免費 HTML 模板怎麼挑？
想找 HTML 範例下載，可參考 MDN Learning Area GitHub 儲存庫，閱讀教學程式碼與檔案結構；不同範例的操作方式仍應查看專案說明。
需要完整視覺版型，可查看 HTML5 UP 與 Start Bootstrap。HTML5 UP 的免費模板採 Creative Commons Attribution 授權，使用時須遵守署名等條件；Start Bootstrap 的免費主題與模板通常採 MIT 授權，仍應核對個別專案的授權檔。
免費下載不等於沒有使用限制。 商用前須分別確認模板程式碼、圖片、字型與圖示的授權，也不要把 Wix、WordPress.com 等平台內的版型，當成一定能下載的獨立 HTML 模板。
HTML 教學結論：先把結構寫對，再處理外觀
學習 HTML 最有效的起點，是把完整範例存成檔案，逐一修改標籤並觀察結果。排版應使用 CSS，不建議沿用舊式 frame、frameset，也不應拿表格當整頁排版工具；表格適合呈現具有欄列關係的資料。
語法可查閱 MDN HTML 文件 與 WHATWG HTML 標準。清楚的標題、語意結構與有用內容，有助搜尋引擎理解頁面，但不保證排名；SEO 也不應靠重複堆疊關鍵字。
HTML 範例常見問題
1. HTML 是程式語言嗎？
HTML 是標記語言，用來描述內容結構，不負責一般程式中的條件判斷與迴圈運算。
2. 寫 HTML 一定要用 VS Code 嗎？
不用。任何能儲存純文字的編輯器都可以，VS Code 只是比較方便。
3. 為什麼中文會變成亂碼？
請確認檔案以 UTF-8 儲存，並設定 <meta charset="UTF-8">；網站伺服器的編碼設定也可能影響結果。
4. .htm 和 .html 有什麼不同？
兩者都能作為 HTML 副檔名。新專案通常使用 .html，並保持命名一致。
5. HTML 可以單獨做網站嗎？
可以建立靜態內容網站，但細緻外觀通常需要 CSS，動態互動則可能需要 JavaScript。
6. 為什麼圖片無法顯示？
常見原因是路徑、檔名大小寫或副檔名不一致，也可能是圖片沒有一起上傳。
7. 表單送出後會自動寄信嗎？
不會。需要串接後端程式或表單服務，才能處理資料與寄送郵件。
8. 加入 viewport 就會自動變成手機版嗎？
不會。它只是重要設定之一，仍須配合彈性尺寸與響應式 CSS。
9. 免費模板可以直接商用嗎？
必須先確認授權。程式碼允許商用，不代表內附圖片與字型也具有相同權利。
10. 學會這 20 個標籤後，下一步是什麼？
先完成首頁與內頁，再學 CSS 盒模型、Flexbox、Grid，以及基礎無障礙設計。