當前位置：
  1. 首頁
  2. 知識學院
  3. 正文

在HTML中制作靜態網頁是一個相對簡單的過程，它主要涉及使用HTML（HyperText Markup Language）標簽來構建網頁的結構和內容。下面是一些基本的步驟和示例，幫助你開始制作靜態網頁：

1. 創建HTML文件

首先，你需要創建一個HTML文件。你可以使用任何文本編輯器（如Notepad++, Visual Studio Code, Sublime Text等）來編寫你的HTML代碼。文件名應該以.html擴展名結尾，例如index.html。

2. 編寫基本HTML結構

每個HTML文檔都包含三個主要部分：<head>、<body>?和?<html>

<!DOCTYPE html>
<html lang=“en”>
<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>
3. 添加更多的HTML元素

你可以使用各種HTML標簽來添加文本、圖片、鏈接、列表等。

添加段落和標題：

<h1>主標題</h1>
<h2>副標題</h2>
<p>這是一個段落。</p>

添加鏈接：

<a href=“https://www.example.com”>訪問Example網站</a>
添加圖片：
<img src=“image.jpg” alt=“描述性文本”>
添加列表：
<ul> <!– 無序列表 –>
<li>列表項1</li>
<li>列表項2</li>
</ul>
<ol> <!– 有序列表 –>
<li>列表項1</li>
<li>列表項2</li>
</ol>
4. 使用CSS進行樣式設計（可選）

為了使你的網頁更加美觀，你可以使用CSS（層疊樣式表）。你可以在<head>部分通過<style>標簽直接編寫CSS，或者鏈接到一個外部的CSS文件。

內聯CSS示例：

<head>
…
<style>
body { font-family: Arial, sans-serif; }
h1 { color: blue; }
</style>
</head>
外部CSS文件示例：

在HTML文件中鏈接外部CSS文件：

<head>
…
<link rel=“stylesheet” href=“styles.css”>
</head>
在styles.css文件中：
body { font-family: Arial, sans-serif; }
h1 { color: blue; }5. 使用JavaScript（可選）

如果你想要添加交互性，可以使用JavaScript。同樣，你可以在<head>部分通過<script>標簽直接編寫JavaScript代碼，或者鏈接到一個外部的JavaScript文件。

內聯JavaScript示例：

<head>
…
<script>
function sayHello() { alert(“Hello, World!”); }
</script>
</head>
<body>
…
<button onclick=“sayHello()”>點擊我</button>
</body>
外部JavaScript文件示例：在HTML文件中鏈接外部JavaScript文件：
<head>
…
<script src=“script.js”></script>
</head>
在script.js文件中：
function sayHello() { alert(“Hello, World!”); }在HTML中使用：<button onclick="sayHello()">點擊我</button>。

通過以上步驟，你可以開始創建自己的靜態網頁。隨著實踐的增加，你可以探索更多高級的HTML、CSS和JavaScript功能來增強你的網頁。