在網頁設計中,圖片和超連結是不可或缺的元素。它們不僅豐富了網頁的視覺效果,還提供了便捷的導航和資訊傳遞方式。本文將深入淺出地介紹 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>