連結與圖片

超連結（<a>）

<!-- 基本連結 -->
<a href="https://google.com">前往 Google</a>

<!-- 新分頁開啟 -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
    在新分頁開啟 Google
</a>

逐行解析：

href="https://google.com"    -- 連結目標 URL
target="_blank"              -- 在新分頁開啟（不加就是同分頁）
rel="noopener noreferrer"    -- 安全性：防止新頁面存取原頁面的 window 物件

連結類型

<!-- 外部連結 -->
<a href="https://example.com">外部網站</a>

<!-- 相對連結 -->
<a href="/about">關於我們</a>          <!-- 從根目錄開始 -->
<a href="./contact.html">聯絡我們</a>  <!-- 同一層 -->
<a href="../index.html">回首頁</a>     <!-- 上一層 -->

<!-- 頁內錨點 -->
<a href="#section2">跳到第二段</a>
<h2 id="section2">第二段</h2>          <!-- 目標元素 -->

<!-- Email 連結 -->
<a href="mailto:hello@example.com">寄信給我</a>

<!-- 電話連結（手機可直接撥號） -->
<a href="tel:+886912345678">打電話</a>

<!-- 下載連結 -->
<a href="/files/doc.pdf" download>下載 PDF</a>
<a href="/files/doc.pdf" download="自訂檔名.pdf">下載</a>

圖片（<img>）

<img src="photo.jpg"              <!-- ← 圖片來源 -->
     alt="一隻可愛的貓"           <!-- ← 替代文字（很重要！） -->
     width="400"                  <!-- ← 寬度（像素） -->
     height="300"                 <!-- ← 高度（像素） -->
     loading="lazy"               <!-- ← 懶載入（進入畫面才載入） -->
>

alt 屬性的重要性

<!-- ✅ 好的 alt -->
<img src="chart.png" alt="2024年營收成長圖表，Q4 成長 15%">
<img src="logo.png" alt="DevLearn Logo">

<!-- ✅ 裝飾性圖片用空 alt -->
<img src="divider.png" alt="">

<!-- ❌ 壞的 alt -->
<img src="chart.png" alt="圖片">          <!-- 太模糊 -->
<img src="chart.png">                      <!-- 沒有 alt！ -->

alt 的用途：

1. 螢幕閱讀器會唸出 alt（無障礙）
2. 圖片載入失敗時顯示 alt
3. 搜尋引擎用 alt 理解圖片（SEO）

響應式圖片

<!-- srcset — 根據裝置解析度選擇圖片 -->
<img src="photo-400.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     alt="風景照">

<!-- picture — 根據條件選擇不同圖片 -->
<picture>
    <source media="(max-width: 600px)" srcset="photo-mobile.jpg">
    <source media="(max-width: 1000px)" srcset="photo-tablet.jpg">
    <img src="photo-desktop.jpg" alt="風景照">  <!-- 後備 -->
</picture>

<!-- WebP 格式（更小、更快）+ 後備 -->
<picture>
    <source type="image/webp" srcset="photo.webp">
    <source type="image/jpeg" srcset="photo.jpg">
    <img src="photo.jpg" alt="風景照">
</picture>

圖片與連結結合

<!-- 可點擊的圖片連結 -->
<a href="/products/1">
    <img src="product.jpg" alt="iPhone 15">
</a>

<!-- Figure — 圖片 + 標題 -->
<figure>
    <img src="chart.png" alt="銷售圖表">
    <figcaption>圖 1：2024 年第四季銷售數據</figcaption>
</figure>