HTML（HyperText Markup Language）是構建網頁的基石。無論你是想成為前端開發者，還是只想了解網頁如何運作，掌握HTML都是第一步。本文將帶你了解HTML網頁設計的基本概念，并手把手指導你創建第一個網頁。

1. 什么是HTML？

HTML是一種標記語言，用于定義網頁的結構和內容。它由一系列元素組成，這些元素告訴瀏覽器如何顯示文本、圖像、鏈接等內容。HTML不是編程語言，它沒有邏輯和計算能力，但它與CSS和JavaScript共同構成了現代網頁的三大核心技術。

2. HTML文檔的基本結構

一個標準的HTML文檔包含以下部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
<!-- 網頁內容 -->
</body>
</html>

• <!DOCTYPE html>：聲明文檔類型為HTML5。
• <html>：根元素，包含整個頁面。
• <head>：包含頁面的元信息，如字符集、標題、樣式等。
• <body>：包含頁面的可見內容。

3. 常用HTML標簽

• 標題：<h1>到<h6>，定義不同級別的標題。
• 段落：<p>，定義段落。
• 鏈接：<a href="url">鏈接文本</a>，創建超鏈接。
• 圖像：<img src="image.jpg" alt="描述">，插入圖像。
• 列表：<ul>（無序列表）、<ol>（有序列表）、``（列表項）。
• 容器：<div>（塊級容器）、<span>（行內容器）。
• 表格：<table>、<tr>、<td>等。

4. 創建一個簡單的網頁

讓我們創建一個顯示“Hello, World!”的網頁。

1. 新建一個文本文件，將其重命名為index.html。
2. 用文本編輯器打開，輸入以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>歡迎來到我的網頁。</p>
</body>
</html>

1. 保存文件，用瀏覽器打開，你將看到標題和段落。

5. 使用CSS美化網頁

HTML負責結構，CSS負責樣式。你可以在<head>中使用<style>標簽添加CSS，或鏈接外部CSS文件。

例如：

<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>

6. 網頁設計的最佳實踐

• 使用語義化標簽：如<header>、<nav>、<main>、<footer>，提高可訪問性和SEO。
• 確保代碼縮進和注釋，便于維護。
• 使用響應式設計，適配不同設備。
• 驗證HTML代碼，使用W3C驗證器檢查錯誤。

7. 下一步學習方向

• 深入學習CSS布局（Flexbox、Grid）。
• 學習JavaScript實現交互。
• 了解前端框架（React、Vue等）。
• 學習響應式設計和移動優先。

HTML網頁設計是進入Web開發世界的敲門磚。通過不斷練習和探索，你將能夠構建出功能豐富、美觀的網頁。現在就開始你的第一個項目吧！