DAY6 超連結、圖片、form表單

2026 iThome 鐵人賽

DAY 6

Modern Web

從結構到互動：現代前端HTML、CSS 、JS 的 30 天修練系列第 6 篇

18th鐵人賽

yelloworange0319

團隊nutc imac

2026-09-20 15:44:21

31 瀏覽

分享至

連結、多媒體與資料傳遞

這幾天我們學會了如何在網頁中塞入靜態文字，也認識了按鈕和輸入框等互動元件，但真正的網路世界之所以稱為「網」，是因為每個網頁之間可以互聯，並且充滿了豐富的圖片，甚至能把我們填寫的資料「打包送出」。

今天我們來學習HTML中讓網頁動起來的三大標籤：超連結<a>、圖片<img>，以及把所有互動元件用在一起的表單<form>。

1.超連結`<a>`

<a>全名叫Anchor（錨點），它是讓網頁能夠跳轉到其他網站、或是同一個網頁不同位置的關鍵，而它必須搭配href屬性來指定目的地的網址。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://google.com">點我前往 Google</a>
    <a href="https://google.com" target="_blank">在新分頁開啟 Google</a>
</body>
</html>

將滑鼠移到字上面，點擊後就會根據上面所寫的進行動作，在同個分頁跳轉，或是新增一個分頁並跳轉到指定網址。

href：填入想要導向的 URL 網址。
target="_blank"：非常重要的屬性，加上它後，使用者點擊連結時會彈出新分頁，而不會直接在你原本的網頁跳轉。

2.圖片`<img>`

一個好的網頁不能沒有圖片，<img>代表 Image（圖片），它是一個單一標籤（不需要寫 </img>），核心屬性是src（圖片來源）與alt（替代文字）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <img src="ChatGPT Image 2026年8月30日 下午11_42_49.png" alt="貓咪" width="200" />
</body>
</html>

src（Source）：填入圖片的網址路徑（可以是網路圖片連結，也可以是專案資料夾內的相對路徑）。
alt（Alternative text）：替代文字。當使用者網路太慢、圖片死圖讀不出來時，畫面上就會顯示這段文字；它同時也是搜尋引擎（SEO）看懂這張圖片在畫什麼的依據，更是盲人螢幕閱讀器會朗讀出來的內容，非常有價值。

3.表單容器`<form>`

在昨天的文章中，我們寫了<input>和<button>，但它們其實只是零散的兵馬，如果想要把這些欄位裡填寫的資料正式「打包、傳送」給後端伺服器，我們就必須用一個外殼把它們全部包起來，這個大容器就是<form>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/submit-subpage" method="POST">
    <input type="text" placeholder="輸入使用者名稱">
    <input type="password" placeholder="請輸入密碼">
    <input type="date"></br>
    <label>請問您住哪個縣市？</label>
    <select>
        <option value="taipei">台北市</option>
        <option value="taichung">台中市</option>
        <option value="kaohsiung">高雄市</option>
    </select></br>
    <button type="submit">確認送出表單</button>
</form>
</body>
</html>

action：指定這份表單資料要送去後端的哪一個「目的地網址」。
method：傳送資料的方式，最常見的是 GET（把資料帶在網址列後面）與 POST（把資料隱藏在封包裡傳送，適合傳送密碼等敏感資訊）。

總結

今天我們學會了如何使用<a>建立超連結、用<img>豐富網頁視覺，並用<form>將所有零散的輸入欄位打包成一個功能完整的傳送體。到今天為止，我們已經掌握了網頁中絕大多數最常見的物件了！
簡單做一個今天學的網頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="Image" alt="貓咪" width="200" />
    <h1>Day6：填寫您的個人資料</h1>
    <p>請完成下方表單，或閱讀我們的 <a href="https://example.com" target="_blank">隱私權政策</a>。</p>
    <form>
        <p>
            <label for="name">姓名：</label>
            <input type="text" id="name" placeholder="請輸入真實姓名">
        </p>
        <p>
            <select id="country" name="country">
                <option value="taiwan">台灣</option>
                <option value="japan">日本</option>
                <option value="usa">美國</option>
            </select>
        </p>
        <p>
            <button type="submit">提交資料</button>
        </p>
</form>
</body>
</html>