最專業的 HTML 教學平台

HTML 教學及練習範例網站

從基礎到進階，全面掌握 HTML 網頁開發技能。 豐富的範例、互動式練習，讓你快速成為網頁設計大師。

開始學習 查看範例
index.html
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8">
    <title>我的第一個網頁</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>歡迎來到 HTML 的世界</p>
  </body>
</html>
向下滾動
學習路徑

系統化學習 HTML

從基礎概念到實際應用，循序漸進掌握 HTML 開發技能

HTML 基礎入門

了解 HTML 的基本概念、結構和語法

HTML 簡介 基本結構 元素與標籤
30 分鐘

文本格式化

學習各種文本標籤和格式化技巧

標題標籤 段落與換行 強調與斜體
45 分鐘

連結與導航

創建連結、導航菜單和頁面跳轉

超連結 錨點連結 導航結構
40 分鐘

圖片與媒體

嵌入圖片、視頻和音頻內容

圖片標籤 響應式圖片 媒體元素
35 分鐘

表格與表單

創建數據表格和用戶輸入表單

表格結構 表單元素 輸入驗證
50 分鐘
快速參考

HTML 元素參考手冊

完整的 HTML 元素列表，包含詳細說明和使用範例

基礎元素

<html> HTML 文檔根元素 <head> 文檔頭部信息 <body> 文檔主體內容 <title> 文檔標題

文本元素

<h1>-<h6> 標題元素 <p> 段落元素 <br> 換行元素 <hr> 水平分隔線

連結元素

<a> 超連結元素 <nav> 導航區域 <link> 外部資源連結

媒體元素

<img> 圖片元素 <video> 視頻元素 <audio> 音頻元素 <source> 媒體資源

表格元素

<table> 表格容器 <tr> 表格行 <td> 表格單元格 <th> 表格標題單元格

表單元素

<form> 表單容器 <input> 輸入元素 <textarea> 多行文本輸入 <button> 按鈕元素 <label> 標籤元素 <fieldset> 字段集

語義元素

<header> 頁面頭部 <main> 主要內容 <footer> 頁面底部 <article> 文章內容 <section> 內容區段 <aside> 側邊內容
查看完整參考手冊
實用範例

互動式程式碼範例

實際可運行的程式碼範例，即時查看效果並可編輯修改

個人簡歷網頁

使用 HTML 創建一個專業的個人簡歷頁面

頭像

張小明

前端開發工程師

[email protected] +123456
技能專長
HTML5 CSS3 JavaScript React
工作經歷
前端工程師

科技公司 | 2020 - 至今

HTML 程式碼 
<header class="resume-header">
  <img src="avatar.jpg" alt="頭像" class="avatar">
  <div class="resume-info">
    <h1>張小明</h1>
    <p>前端開發工程師</p>
    <div class="contact-info">
      <span><i class="fas fa-envelope"></i> [email protected]</span>
      <span><i class="fas fa-phone"></i> +123456</span>
    </div>
  </div>
</header>

導航菜單

響應式導航菜單

圖片庫

圖片展示佈局

圖片1 圖片2 圖片3 圖片4

聯繫表單

基本聯繫表單

查看更多範例
實踐練習

互動式程式碼練習

在瀏覽器中直接編寫和測試 HTML 程式碼，即時查看結果

HTML
預覽

練習挑戰

基礎挑戰

簡單

創建一個包含標題和段落的簡單網頁

連結練習

簡單

創建一個包含多個連結的導航頁面

圖片展示

中等

創建一個包含圖片和說明的展示頁面

表單設計

困難

創建一個功能完整的聯繫表單