🖥️ 網頁設計基礎｜寫出第一個小網頁！

猿渡太太

發佈於🌱孩子睡了我在寫code

更新於 2025/04/27發佈於 2025/04/27閱讀時間約 1 分鐘

前言

網頁是由不同的元素和技術組合而成。一般來說，構成一個網頁的基本要素包括：

HTML：用來定義網頁的內容結構和各種元素（如文字、圖片、連結等）。
CSS：用來控制網頁的外觀，決定元素的顏色、字體、排列等。
JavaScript：用來增加網頁的互動性和動態效果，比如點擊按鈕後顯示隱藏內容等。

每種程式語言都有其獨特的語法（Syntax），透過掌握這些語法，我們能夠與各種設備、軟體及其他程式語言進行有效的交流，如果你有興趣學習網站開發，HTML 就是你學習的第一步。

HTML 就如同網頁的骨架，負責定義內容和結構。這篇文章會帶你了解 HTML 的基本概念、結構，以及手把手教你做出一個簡單的個人小網頁。即使是零基礎，也能輕鬆上手！

HTML 是什麼呢？

HTML，全名 HyperText Markup Language，中文叫做超文本標記語言。

它的作用是用標籤（HTML Tag）來告訴瀏覽器，這段文字是標題、這張圖片要放哪裡、這個按鈕連到哪個頁面等等。簡單來說，HTML 負責網站的「內容與結構」。

HTML 的基本結構

先來看一個最基本的 HTML 文件長什麼樣子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的第一個網頁</title>
  </head>
  <body>
    <h1>Hello！World！</h1>
    <p>這是我寫的第一個 HTML 頁面！</p>
  </body>
</html>

<!DOCTYPE html>：告訴瀏覽器這是 HTML5 文件。
<html>：整個網頁的根元素。
<head>：放網頁的資訊，比如標題、字元編碼等。
<title>：瀏覽器標籤上顯示的名稱。
<body>：真正呈現在畫面上的內容，都寫在這裡！

簡單說明一下：

在 HTML 裡，一個標籤通常是用一對尖括號 < > 包起來，裡面放一個有意義的小單字。大多數情況下，標籤都是成雙成對出現的。只要把你想放在網頁上的內容，夾在「起始標籤（Opening Tag）」和「結尾標籤（Closing Tag）」中間就可以了。記得，結尾標籤前面會多一個「/」符號，這樣瀏覽器才知道哪裡是開始，哪裡是結束！

常見的 HTML 標籤介紹

學會一些常用標籤，你就可以開始排版自己的內容了！

<h1>～<h6>：標題（h1 最大，h6 最小）

<p>：段落文字

<a>：超連結

<img>：插入圖片

<ul> <li>：無序清單（列點）

範例

<h1>大標題</h1>

<p>這是一段文字。</p>

<img src="圖片位置" alt="圖片說明文字">

<ul>
  <li>學 HTML</li>
  <li>學 CSS</li>
  <li>學 JavaScript</li>
</ul>

<a href="網址">點我</a>