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>每一段程式碼在做什麼?
<!DOCTYPE html>
它的作用只有一句話: ➡️ 告訴瀏覽器這是一份 HTML5 文件。
沒有它瀏覽器也能開,但可能用較舊的模式解析,導致跑版或怪怪的行為。
<html>:整個網頁的最外層
所有內容都包在 <html> ... </html> 裡。
可以把它想成網站的整個房子外框。
<head>:放設定、不會直接顯示
裡面有幾個重要的小設定:
<meta charset="UTF-8">
避免中文顯示成亂碼。
<title>
控制瀏覽器分頁(tab)的名稱。
<style>
這是 CSS,它負責調整網頁的外觀。例如:
body { font-family: sans-serif; padding: 40px;}讓整體字體更自然、頁面四周有舒服的留白。 h1 的深灰色也是在這裡設定:
h1 { color: #333;}<body>:真正會顯示的內容
所有使用者看得到的文字、圖片、按鈕都放在這裡:
<h1>哈囉,世界!</h1><p>這是我做出的第一個網頁。</p>
<h1> 是主標題,<p> 是一般文字段落。如何查看你的網頁?
- 存檔。
- 在資料夾裡找到 index.html。
- 直接雙擊它。
- 瀏覽器就會把你的作品開起來。✨
你第一個網頁就這樣完成了。 沒有框架、沒有工具,只靠一個檔案就能開始 —— 超純粹、超經典。
從零開始:做出你的第一個網頁
https://kairo.qzz.io/posts/create-first-web/