1. 標題
HTML 提供許多用於格式化和組織文本內容、圖像、連結和列表的標籤。基礎的HTML標籤允許您創建易於閱讀且邏輯結構化的頁面，呈現吸引人且易於理解的信息。我們來看看一些最受歡迎的基本標籤及其用途。
標題（或 header）用於在頁面上表示不同層次的標題。HTML 提供六個層次的標題——從 <h1> 到 <h6>，其中 <h1> 是最大且最重要的標題，而 <h6> 是最小的。
<h1>主頁面的標題</h1>
<h2>第一層子標題</h2>
<h3>第二層子標題</h3>
...
<h6>最小標題</h6>
使用標題有助於結構化文字信息，還能提升SEO（搜尋引擎優化），因為搜尋引擎在分析頁面內容時會考慮標題。
2. 文本格式
HTML 提供了一些簡單但功能強大的標籤來格式化文本。
段落
現在我們已經了解了標題，接下來該注意文本內容了。HTML 中的段落使用標籤 <p> 創建。這就像你喜歡的文字編輯器中按下 "Enter" 開始新段落一樣。以下是一個範例：
<p>這是我們頁面上的第一個段落，它將讓你更深入了解我們的主題。</p>
<p>這是第二個段落，因為有時「第一個」不足以傳達所有的想法！</p>
文本區塊
別忘了 <span> 和 <div>。<span> 是用於在 HTML 中樣式化文本片段的好幫手，而 <div> 是一個用於創建區塊和容器的超強工具。
<div>這個區塊可以包含許多有趣的內容！</div>
<span>這段文字可以被設定顏色或字體樣式。</span>
粗體文本
粗體文本 — <b>：標籤 <b> 將文本加粗，常用於突顯某些文字或短語的重要性。
<p>這是 <b>重要文本</b>，引人注目。</p>
斜體文本
斜體 — <i>：標籤 <i> 使文本以斜體顯示，適合用於引用、外來詞或其他需要強調的元素。
<p>這是帶有斜體的文本：<i>斜體文本範例</i>。</p>
3. 圖片
添加圖片到頁面使用標籤 <img>。這是一個單一標籤，需用 src 屬性指定圖片路徑。同時，用 alt 屬性添加圖片描述也很重要，這對於無法看到圖片的用戶，或圖片加載出問題的情況特別有用。
<img src="image.jpg" alt="圖片描述">
其它有用的 <img> 屬性：
width— 圖片寬度（例：width="200"）。height— 圖片高度（例：height="150"）。
4. 超連結
超連結是HTML的重要元素，允許用戶跳轉至其他頁面或資源。使用標籤 <a> 創建連結，其中旗艦屬性是 href，用於指向目標URL。
<a href="https://example.com" target="_blank" title="新窗口開啟">訪問網站</a>
5. 列表
列表幫助以友好的方式組織接收的信息。HTML 支持兩種列表類型：
點點列表
無序列表 —
<ul>：列表項已點作標識。
<ul>
<li>第一項目</li>
<li>第二項目</li>
<li>第三項目</li>
</ul>
編號列表
有序列表 —
<ol>：列表項自動編號。
<ol>
<li>第一項目</li>
<li>第二項目</li>
<li>第三項目</li>
</ol>
6. 基本標籤使用範例
現在讓我們把描述的標籤都組成一個HTML片段：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>基本HTML標籤頁面範例</title>
</head>
<body>
<h1>頁面標題</h1>
<h2>子標題</h2>
<p>這是包含 <b>加粗文本</b> 和 <i>斜體文本</i> 的段落範例。</p>
<h3>圖片</h3>
<img src="image.jpg" alt="示例描述" width="200" height="150">
<h3>連結</h3>
<p>這是 <a href="https://example.com" target="_blank" title="新窗口開啟">到其他網站的連結</a>。</p>
<h3>無序列表</h3>
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
</body>
</html>
結語
現在你已經了解如何使用基本的HTML標籤，可以開始嘗試組合它們來創建複雜的網頁。試著建立自己的HTML頁面，包含標題、多段落，以及一張圖像作為連結到另一個資源。
HTML 標籤的知識僅僅是起點。接下來，我們會學習 CSS，它幫助我們設計這些元素，讓它們按我們的構想到位。趕快實驗吧！
讓我們結束這堂充實的小講座。HTML 是網頁的核心，現在你已了解如何編寫瀏覽器理解的代碼啦！
GO TO FULL VERSION