HTML（超文本標記語言）與 CSS（階層式樣式表）是網頁設計的基石。HTML 負責結構與內容，而 CSS 則美化網頁的外觀與排版。在這篇文章中，我們將深入了解這兩種技術的基礎知識，並學習如何將它們結合來創建一個完整的網頁。
第一部分：HTML 基礎
HTML 是用來構建網頁結構的標記語言。以下是一個簡單的 HTML 文件範例：
<!DOCTYPE html>
<html lang="zh-Hant">
<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>解釋：
<!DOCTYPE html>：定義文件為HTML5標準。<html lang="zh-Hant">：指定網頁語言為繁體中文。<meta charset="UTF-8">：設定文件編碼為UTF-8，以支持多語言字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">：確保網頁在行動裝置上正確顯示。<title>：設定瀏覽器標籤的標題。
第二部分：CSS 基礎
CSS 用來控制網頁看起來怎麼樣。以下是一個基本的 CSS 範例：
h1 {
color: #1e90ff;
font-size: 2rem;
text-align: center;
}
p {
color: #32cd32;
font-size: 1rem;
line-height: 1.5;
}解釋：
color：設定文字顏色。font-size：設定字體大小，rem 單位根據根元素的字體大小調整。text-align：設定文字對齊方式。line-height：設定行高，改善閱讀體驗。
第三部分：結合 HTML 與 CSS
現在，我們將HTML和CSS結合，建立一個完整的網頁：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一個網頁</title>
<style>
h1 {
color: #1e90ff;
font-size: 2rem;
text-align: center;
}
p {
color: #32cd32;
font-size: 1rem;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>歡迎來到我的網頁！</h1>
<p>這是一個示範網頁的段落文字。</p>
</body>
</html>這個範例展示了如何在 <style> 標籤中內嵌 CSS 樣式，將其應用於 HTML 元素中。這種方式適合簡單的頁面，但對於更大型的網站，建議將CSS分離到外部樣式表中。
結語
這篇文章提供了 HTML 和 CSS 的基礎知識，讓你可以開始建立自己的網頁。隨著學習的深入，你可以探索更多進階技術，如響應式設計、CSS 框架等，來提升網頁設計的品質和效率。持續學習並實踐，終將能夠設計出功能豐富且視覺吸引力強的網站。
祝你在網頁設計的旅程中不斷進步，創造出精彩的作品！