HTML 圖片與超連結教學

HTML 圖片與超連結教學:輕鬆掌握網頁設計基礎

在網頁設計中,圖片和超連結是不可或缺的元素。它們不僅豐富了網頁的視覺效果,還提供了便捷的導航和資訊傳遞方式。本文將深入淺出地介紹 HTML 中用於處理圖片和超連結的 <img><a> 標籤,幫助你輕鬆掌握網頁設計的基礎。

1. <img> 標籤:讓網頁生動起來

<img> 標籤用於在網頁中嵌入圖片,使網頁內容更加豐富多彩。

基本語法:

<img src="圖片路徑" alt="圖片替代文字">

常用屬性:

  • src:指定圖片的來源路徑,可以是相對路徑或絕對路徑。
  • alt:提供圖片的替代文字,當圖片無法顯示時,會顯示替代文字,這對於網頁易用性和 SEO 非常重要。
  • widthheight:設定圖片的寬度和高度,單位為像素。
  • title:設定圖片的標題,當滑鼠懸停在圖片上時顯示。
  • loading:使用延遲載入,可以提升網站的效能,當圖片出現在可視範圍,才會進行載入。
  • class:給予圖片class名稱,在CSS檔案中,可以使用此名稱設定圖片樣式。

圖片美化與長寬比控制:

  • 保持長寬比:

    使用 CSS 的 object-fit: cover; 屬性,可以確保圖片在縮放時保持原始長寬比,並裁剪多餘部分以填滿容器。

    範例 CSS:

    .responsive-img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    }
  • 圖片依百分比放置:

    範例 CSS:

    .percent-img {
    width: 80%;
    display: block;
    margin: 0 auto;
    }
  • 其他美化:

    使用 CSS 的 border 屬性設定外框樣式。

    使用 CSS 的 border-radius 屬性設定圓角效果。

    使用 CSS 的 box-shadow 屬性添加陰影效果。

2. <a> 標籤:連接網路世界

<a> 標籤用於創建超連結,使用戶可以點擊連結跳轉到其他網頁或網站。

基本語法:

<a href="連結目標網址">連結文字</a>

常用屬性:

  • href:指定連結的目標網址。
  • target:設定連結的打開方式,例如 _blank 表示在新視窗中打開。
  • title:設定連結的標題,當滑鼠懸停在連結上時顯示。
  • class:給予超連結class名稱,在CSS檔案中,可以使用此名稱設定超連結樣式。
  • download:強制瀏覽器下載 href 屬性指定的資源。

超連結範例:

<a href="https://www.example.com" target="_blank" title="前往範例網站" class="external-link">範例網站</a>

3. 圖片與超連結的結合

<img><a> 標籤可以結合使用,創建點擊圖片跳轉連結的效果。

範例:

<a href="https://www.example.com">
<img src="image.jpg" alt="連結到 example.com" class="link-img">
</a>

範例完整 HTML+CSS:

<!DOCTYPE html>
<html>
<head>
<title>圖片與超連結範例</title>
<style>
.responsive-img {
max-width: 100%;
height: auto;
object-fit: cover;
}
.percent-img {
width: 80%;
display: block;
margin: 0 auto;
}
.external-link {
color: blue;
}
</style>
</head>
<body>
<a href="https://www.example.com">
<img src="your-image.jpg" alt="連結到 example.com" class="responsive-img">
</a>
<img src="your-image2.jpg" class="percent-img">
<br>
<a href="https://www.google.com" target="_blank" title="前往google網站" class="external-link">google網站</a>
</body>
</html>

張貼留言

較新的 較舊