教學課程

HTML 基礎教學

從零開始，系統化學習 HTML 網頁開發

課程進度：0%

課程目錄

第1章

HTML 簡介

了解 HTML 的基本概念和歷史背景

15 分鐘

什麼是 HTML？

HTML（HyperText Markup Language，超文本標記語言）是構建網頁的標準標記語言。 它使用標記標籤來描述網頁的結構和內容。

HTML 的主要特點：

  • 簡單易學，使用標記標籤描述內容
  • 跨平台，可以在任何設備上運行
  • 與 CSS 和 JavaScript 完美配合
  • 不斷發展，HTML5 是最新版本

HTML 的歷史

HTML 由 Tim Berners-Lee 在 1991 年創建，經歷了多個版本的發展：

1991

HTML 1.0

第一個版本，基本網頁結構

1995

HTML 2.0

標準化版本，更多元素

2014

HTML5

現代版本，豐富的新特性

第一個 HTML 網頁

讓我們創建您的第一個 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>
提示：將這段程式碼保存為 index.html，然後在瀏覽器中打開它！
第2章

HTML 基本結構

了解 HTML 文檔的基本結構和語法規則

20 分鐘

HTML 文檔結構

每個 HTML 文檔都有基本的結構，包含以下主要部分：

基本結構 
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <!-- 頭部信息 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網頁標題</title>
  </head>
  <body>
    <!-- 網頁內容 -->
    <h1>主要內容</h1>
    <p>這是網頁的內容。</p>
  </body>
</html>

DOCTYPE 聲明

<!DOCTYPE html> 告訴瀏覽器這是一個 HTML5 文檔。 這個聲明必須放在文檔的最開頭。

沒有 DOCTYPE 聲明可能會導致瀏覽器以怪異模式渲染頁面。

HTML 標籤

<html> 標籤是所有 HTML 元素的容器。lang 屬性指定了網頁的語言。 

<html lang="zh-TW">
  <!-- 網頁內容 -->
</html>

HEAD 部分

<head> 包含網頁的元數據，如字符編碼、視口設置、標題等。 

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="網頁描述">
  <meta name="keywords" content="關鍵詞1, 關鍵詞2">
  <title>網頁標題</title>
</head>
第3章

HTML 元素

深入了解 HTML 元素的概念和使用方法

25 分鐘

什麼是 HTML 元素？

HTML 元素是從開始標籤到結束標籤的所有代碼。元素可以包含其他元素、文本或兩者兼有。 

<p>這是一個段落元素</p>
<h1>這是一個標題元素</h1>
<div>
  <p>這是嵌套在 DIV 中的段落</p>
</div>
實踐練習

立即練習

通過實際編寫程式碼來鞏固所學知識

HTML
預覽

章節練習

基礎練習

簡單

創建一個包含正確結構的 HTML 文檔

元素練習

簡單

使用不同的 HTML 元素創建內容

綜合練習

中等

創建一個包含多種元素的完整網頁