本文將介紹靜態網頁設計的基本概念和常用代碼，幫助初學者快速入門。靜態網頁是指不包含服務器端處理程序的網頁，其內容在客戶端瀏覽器中直接呈現。靜態網頁的設計主要依賴于HTML、CSS和JavaScript等技術。本文將重點介紹HTML和CSS的基本知識。
一、HTML簡介
HTML（HyperText Markup Language，超文本標記語言）是一種用于創建網頁的標準標記語言。它使用一系列標簽來描述網頁的內容和結構。以下是一個簡單的HTML文檔示例：
“`html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>靜態網頁設計代碼入門</title>
</head>
<body>
<h1>歡迎來到我的網站！</h1>
<p>這是一個簡單的靜態網頁。</p>
</body>
</html>
“`
二、HTML常用標簽
1. 標題標簽：`<h1>`至`<h6>`，用于定義不同級別的標題。`<h1>`最高級別，`<h6>`最低級別。
2. 段落標簽：`<p>`，用于定義一個段落。
3. 鏈接標簽：`<a>`，用于創建超鏈接。例如：`<a href=”https://www.example.com”>點擊這里訪問示例網站</a>`。
4. 圖像標簽：`<img>`，用于插入圖像。例如：`<img src=”image.jpg” alt=”示例圖片”>`。
5. 列表標簽：有序列表（`<ol>`）、無序列表（`<ul>`）和列表項（`<li>`）。例如：
“`html
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
“`
三、CSS簡介
CSS（Cascading Style Sheets，層疊樣式表）是一種用于描述HTML文檔外觀和格式的語言。通過使用CSS，可以實現對網頁元素的樣式控制，如字體、顏色、布局等。以下是一個簡單的CSS樣式示例：
“`html
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>靜態網頁設計代碼入門</title>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #f00;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>歡迎來到我的網站！</h1>
<p>這是一個簡單的靜態網頁。</p>
</body>
</html>
“`
四、CSS常用屬性和選擇器
1. 字體屬性：`font-family`、`font-size`、`font-weight`等，用于設置文本的字體樣式。例如：`font-family: Arial, sans-serif;`。
2. 顏色屬性：`color`，用于設置文本的顏色。例如：`color: #f00;`。
3. 選擇器：用于選擇HTML元素并應用樣式。常用的選擇器有元素選擇器（如`h1`、`p`等）、類選擇器（以`.`開頭，如`.myClass`）、ID選擇器（以`#`開頭，如`#myId`）等。例如：`h1 { color: #f00; }`表示將所有`h1`元素的文字顏色設置為紅色。
