在網頁設計中，圖片和超連結是不可或缺的元素。它們不僅豐富了網頁的視覺效果，還提供了便捷的導航和資訊傳遞方式。本文將深入淺出地介紹 HTML 中用於處理圖片和超連結的 <img> 和 <a> 標籤，幫助你輕鬆掌握網頁設計的基礎。
1. <img> 標籤：讓網頁生動起來
<img> 標籤用於在網頁中嵌入圖片，使網頁內容更加豐富多彩。
基本語法：
<img src="圖片路徑" alt="圖片替代文字">
常用屬性：
src：指定圖片的來源路徑，可以是相對路徑或絕對路徑。alt：提供圖片的替代文字，當圖片無法顯示時，會顯示替代文字，這對於網頁易用性和 SEO 非常重要。width和height：設定圖片的寬度和高度，單位為像素。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>
