HTML (HyperText Markup Language) 不是一種程式語言，而是一種標記語言。
它利用各式各樣的「標籤」(Tags) 來告訴瀏覽器，網頁上的內容哪些是標題、哪些是段落或圖片。
1. HTML 的核心結構：標籤 (Tags)
大多數的 HTML 元素都是由「開始標籤」和「結束標籤」組成的：<p>這是一個段落內容</p>
^^ ^^
開始標籤 結束標籤 (多了一個斜線 /)
常用基礎標籤
<h1>到<h6>：標題 (Heading)，<h1>最大，<h6>最小。<p>：段落 (Paragraph)。<a>：超連結 (Anchor)。<img>：圖片 (Image)，這是少數不需要結束標籤的元素。<ul>與<li>：無序清單 (Unordered List)。
2. 標準網頁骨架
每個 HTML 檔案都應該包含以下基本結構：
<!DOCTYPE html> <!-- 宣告這是一個 HTML5 文件 -->
<html lang="zh-TW"> <!-- 整個網頁的根節點 -->
<head>
<meta charset="UTF-8"> <!-- 設定編碼，防止亂碼 -->
<title>我的第一個網頁</title> <!-- 瀏覽器分頁上的標題 -->
</head>
<body>
<!-- 這裡才是使用者會看到的內容 -->
<h1>哈囉，世界！</h1>
<p>這是我學習 HTML 的起點。</p>
</body>
</html>
3. 屬性 (Attributes) 的概念
標籤可以擁有「屬性」來提供額外的資訊。屬性總是寫在開始標籤內。
- 超連結：使用
href屬性指定目的地。<a href="[https://www.google.com](https://www.google.com)">點我前往 Google</a>
- 圖片：使用
src指定路徑，alt提供替代文字。<img src="logo.png" alt="公司標誌">
4. 巢狀結構 (Nesting)
標籤可以一層套一層，但必須正確閉合（先開的後關，後開的先關）。
<div>
<h2>購物清單</h2>
<ul>
<li>蘋果</li>
<li>香蕉</li>
</ul>
</div>
5. 即學即用：簡單範例
你可以嘗試將以下程式碼存成一個 .html 檔案並用瀏覽器打開：
<!DOCTYPE html>
<html>
<head>
<title>我的小練習</title>
</head>
<body>
<h1>關於我</h1>
<p>我正在跟 <b>專業工程師</b> 學習網頁設計。</p>
<h3>我的興趣</h3>
<ul>
<li>寫程式</li>
<li>看電影</li>
<li>旅行</li>
</ul>
<a href="[https://github.com](https://github.com)">前往 GitHub 看看</a>
</body>
</html>
給新手的建議
- 縮排很重要：良好的縮排能讓你一眼看清標籤的父子關係。
- 小寫標籤：雖然 HTML 不分大小寫，但業界標準習慣使用小寫（例如
<p>而非<P>）。 - 多看多做：在任何網頁點擊右鍵選擇「檢查」或「檢視網頁原始碼」，看看別人是怎麼寫的。
