HTML
HTML（超文本標記語言）和CSS（層疊樣式表）是構建和設計網頁的兩種主要技術。HTML用于創建網頁的結構和內容，而CSS用于控制其外觀和布局。
HTML基礎
HTML使用標簽來標記網頁中的不同部分。每個標簽通常有一個開始標簽和一個結束標簽，內容放在這兩個標簽之間。例如：
<!DOCTYPE html>
<html>
<head><title>我的第一個網頁</title>
</head>
<body><h1>歡迎來到我的網站</h1><p>這是一個段落。</p><a href="https://example.com">這是一個鏈接</a>
</body>
</html>
<!DOCTYPE html>: 聲明文檔類型，告訴瀏覽器這是一個HTML5文檔。<html>: HTML文檔的根元素。<head>: 包含網頁的元數據，比如標題和引用的樣式表。<title>: 網頁的標題，會顯示在瀏覽器標簽上。<body>: 包含網頁的主要內容。<h1>: 標題標簽，<h1>到<h6>表示不同級別的標題。<p>: 段落標簽。<a>: 鏈接標簽，href屬性指定鏈接目標。
CSS基礎
CSS用于為HTML元素添加樣式。CSS可以直接嵌入到HTML中，也可以作為獨立的文件引用。以下是CSS的幾種用法：
內聯樣式（Inline CSS）：直接在HTML標簽內使用style屬性。
<p style="color: red;">這是一個紅色的段落。</p>
內部樣式表（Internal CSS）：在HTML文檔的<head>部分使用<style>標簽。
<head><style>body {background-color: lightblue;}p {color: red;}</style>
</head>
外部樣式表（External CSS）：在獨立的CSS文件中定義樣式，并在HTML中引用。
<head><link rel="stylesheet" href="styles.css">
</head>
在styles.css文件中：
body {background-color: lightblue;
}
p {color: red;
}
CSS選擇器和屬性
標簽選擇器：選擇特定的HTML標簽。
p {color: red;
}
類選擇器：選擇特定類的元素，使用.表示。
.my-class {color: blue;
}
在HTML中：
<p class="my-class">這是一個藍色的段落。</p>
ID選擇器：選擇特定ID的元素，使用#表示。
#my-id {font-size: 20px;
}
在HTML中：
<p id="my-id">這是一個大號字體的段落。</p>
實際示例
以下是一個完整的示例，包括HTML和CSS：
HTML（index.html）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的網頁</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>歡迎</h1><p class="intro">這是一個介紹段落。</p><p>這是另一個段落。</p><a href="https://example.com" id="example-link">點擊這里</a>
</body>
</html>
CSS（styles.css）
body {font-family: Arial, sans-serif;background-color: #f0f0f0;
}h1 {color: #333;
}.intro {color: #555;font-size: 18px;
}p {color: #666;
}#example-link {color: #0088cc;text-decoration: none;
}#example-link:hover {text-decoration: underline;
}
