HyperLink and Image(超鏈結和圖片) | HTML

探討了 HTML 的 <a> 和 <img> 標籤的基礎知識，揭示了它們的簡單性和重要性

學會如何創建可點擊的超鏈接，以及如何在網站嵌入圖像，使你的網站在視覺上更具吸引力。無論你是初學者還是希望提生前端技能，掌握這些基礎的 HTML 的 <a> 和 <img> 標籤將使你能夠創建動態、互動和引人入勝的網頁體驗。

See the Pen HyperLink and Image(超鏈結和圖片)-HTML by lenrich (@lenrich) on CodePen.

範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超鏈結和圖片</title>
  </head>
  <body>
    <!-- 外部鏈接 -->
    <p>
      <a href="https://google.com">超鏈結到google網址</a>
    </p>
    <p>
      <a href="https://google.com" target="_blank"
        >超鏈結到google網址(開啟新分頁)</a
      >
    </p>

    <!-- 內部鏈接 -->
    <p>
      <a href="/01-basic-layout.html">第一頁</a>
    </p>
    <p>
      <a href="/02-liver-server.html">第二頁</a>
    </p>
    <p>
      <a href="/03-meta-tags.html">第三頁</a>
    </p>

    <!-- 本地圖片 -->
    <img src="./images/view.jpeg" alt="" />
    <!-- 外部引用圖片 https://pexels.com https://source.unsplash.com -->
    <img
      src="https://images.dog.ceo/breeds/hound-basset/n02088238_2574.jpg"
      alt="狗狗圖片"
      width="200"
    />
  </body>
</html>