在學習前端工程時，HTML 和 CSS 是最重要的基礎技術。這篇文章將帶你了解如何使用 HTML 建立結構、使用 CSS 美化版面，並搭配實戰案例，讓你打好前端開發的地基。
一、HTML 結構與標籤
1. 語意化標籤的重要性
使用語意化標籤能讓網頁結構更具可讀性與 SEO 優化。
<header>：網站或區塊的標頭<nav>：導覽列<main>：主要內容<footer>：頁尾<article>：獨立內容<section>：區塊內容
2. 常用標籤介紹
- 文字標籤：
<h1>到<h6>、<p>、<span> - 列表標籤：
<ul>、<ol>、<li> - 表單標籤：
<form>、<input>、<button>、<label> - 媒體標籤：
<img>、<video>、<audio>
3. HTML 小技巧
- 使用 placeholder 提示輸入格式
- 用 required、maxlength 等屬性提升表單 UX
- 使用 alt 屬性提升無障礙設計
二、CSS 基礎與排版
1. CSS 選擇器
- 基本選擇器：類別、ID、標籤選擇器
- 巢狀選擇器：子選擇器、後代選擇器
- 偽類、偽元素：
:hover、:focus、::before、::after
2. 盒模型（Box Model）
了解 content、padding、border、margin 的關係，正確控制元素間距與大小。
3. 常用排版技巧
- Flexbox：快速完成水平與垂直對齊
- Grid：建立複雜網格佈局
三、實戰練習：製作簡單響應式網頁
我們會用 HTML 與 CSS 製作一個簡單的個人介紹頁面，包含標頭、導覽列、主要內容與頁尾。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的個人網站</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header { background: #4CAF50; color: white; text-align: center; padding: 1rem; }
nav { display: flex; justify-content: center; gap: 1rem; }
main { padding: 2rem; }
footer { text-align: center; padding: 1rem; background: #ddd; }
</style>
</head>
<body>
<header>
<h1>歡迎來到我的網站</h1>
</header>
<nav>
<a href="#about">關於我</a>
<a href="#projects">作品集</a>
<a href="#contact">聯絡我</a>
</nav>
<main>
<section id="about">
<h2>關於我</h2>
<p>我是熱愛前端開發的工程師，喜歡分享技術知識。</p>
</section>
</main>
<footer>
© 2025 我的個人網站
</footer>
</body>
</html>HTML 與 CSS 是前端開發的根基，了解語意化標籤、CSS 排版技巧與實戰操作，能幫助你建立扎實的基礎。下一篇文章將進一步探討 CSS 的進階技巧，讓你的網頁設計更專業、具質感！