482 字
2 分鐘
從零開始:做出你的第一個網頁

《從零開始:做出你的第一個網頁》#

如果你完全沒有寫過網頁,別緊張 —— 做出你的第一個網站其實比想像中更簡單。你只需要一個資料夾,再新增一個叫做 index.html 的檔案,然後把下面這段程式碼貼進去,立刻就能看到你的第一個網頁誕生。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
<style>
body {
font-family: sans-serif;
padding: 40px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>哈囉,世界!</h1>
<p>這是我做出的第一個網頁。</p>
</body>
</html>

每一段程式碼在做什麼?#

  1. <!DOCTYPE html>

它的作用只有一句話: ➡️ 告訴瀏覽器這是一份 HTML5 文件。

沒有它瀏覽器也能開,但可能用較舊的模式解析,導致跑版或怪怪的行為。


  1. <html>:整個網頁的最外層

所有內容都包在 <html> ... </html> 裡。 可以把它想成網站的整個房子外框。


  1. <head>:放設定、不會直接顯示

裡面有幾個重要的小設定:

<meta charset="UTF-8"> 避免中文顯示成亂碼。

<title> 控制瀏覽器分頁(tab)的名稱。

<style> 這是 CSS,它負責調整網頁的外觀。例如:

body {
font-family: sans-serif;
padding: 40px;
}

讓整體字體更自然、頁面四周有舒服的留白。 h1 的深灰色也是在這裡設定:

h1 {
color: #333;
}

  1. <body>:真正會顯示的內容

所有使用者看得到的文字、圖片、按鈕都放在這裡:

<h1>哈囉,世界!</h1>
<p>這是我做出的第一個網頁。</p>
<h1> 是主標題,<p> 是一般文字段落。

如何查看你的網頁?#

  1. 存檔。
  2. 在資料夾裡找到 index.html。
  3. 直接雙擊它。
  4. 瀏覽器就會把你的作品開起來。✨

你第一個網頁就這樣完成了。 沒有框架、沒有工具,只靠一個檔案就能開始 —— 超純粹、超經典。

從零開始:做出你的第一個網頁
https://kairo.qzz.io/posts/create-first-web/
作者
Kairo
發佈於
2025-11-23
許可協議
CC BY-NC-SA 4.0