HTML圖片標籤和超連結標籤是網頁開發中常用的兩種標籤，它們分別用於在網頁中插入圖片和建立超連結。
我們每天都在網際網路世界中與各種形式的資訊打交道。你是否好奇過，當你點選一篇文章中的圖片或連結時，是什麼神奇的力量讓你瞬間跳轉到另一個頁面？
今天，就讓我們一起揭開HTML圖片標籤和超連結標籤的神秘面紗。
一、HTML圖片標籤
HTML圖片標籤是一種特殊的標記，它可以讓網頁顯示影像。透過使用圖片標籤，我們可以在網頁上展示各種圖片，從而讓網頁更加生動有趣。
1、語法結構
HTML圖片標籤的語法結構非常簡單，只需要使用標籤，並在其中新增src屬性，指定圖片的路徑即可。例如：
<img src="image.jpg" alt="描述圖片的文字">
2、圖片格式
HTML支援多種圖片格式，包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點，可以根據需要選擇合適的格式。
3、圖片屬性
除了src屬性外，HTML圖片標籤還有其他一些常用的屬性，如：
- alt屬性用於描述圖片的內容，當圖片無法顯示時，會顯示該屬性的值；
- width和height屬性用於設定圖片的寬度和高度；
- title屬性用於設定滑鼠懸停在圖片上時顯示的提示資訊。
4、網路圖片的插入
當需要插入網路上的圖片時，可以將圖片的URL地址作為src屬性的值。例如：
<img src="https://www.example.com/images/pic.jpg" alt="示例圖片">
5、本地圖片的插入
當需要插入本地圖片時，可以將圖片的相對路徑或絕對路徑作為src屬性的值。
6、相對路徑與絕對路徑
在這裡再給大家介紹兩個概念，相對路徑與絕對路徑，搞懂它們，我們在插入本地圖片時也能得心應手。
相對路徑：
相對於當前HTML檔案所在目錄的路徑，包含Web的相對路徑（HTML中的相對目錄）。例如，如果圖片檔案位於與HTML檔案相同的目錄中，可以直接使用檔名作為路徑：
<img src="pic.jpg" alt="本地圖片">
絕對路徑：
圖片檔案在計算機上的完整路徑（URL和物理路徑）。例如：
<img src="C:/Users/username/Pictures/pic.jpg" alt="本地圖片">
二、HTML超連結標籤
超連結標籤是HTML中另一個重要的元素，它可以實現網頁之間的跳轉。透過使用超連結標籤，我們可以將文字、圖片等內容設定為可點選的連結，方便使用者在不同頁面之間自由切換。
1、語法結構
超連結標籤使用<a>標籤表示，需要在href屬性中指定連結的目標地址。
<a href="目標地址" title="標題">文字內容</a>
例如：
<a href="https://www.ydcode.cn/">點選訪問示例網站</a>
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網站</title>
</head>
<body>
<h1>歡迎來到雲端源想！</h1>
<p>這是一個簡單的HTML頁面，用於展示一個網站的結構和內容。</p>
<a href="https://www.ydcode.cn/">點選訪問示例網站</a>
</body>
</html>
2、連結目標
超連結可以連結到不同的目標，包括其他網頁、電子郵件地址、檔案下載等。透過設定href屬性的值，可以實現不同的連結目標。
3、連結屬性
超連結標籤還有一些其他常用的屬性，如：
- target屬性用於設定連結開啟的方式，可以選擇在新視窗或當前視窗開啟連結；
- title屬性用於設定滑鼠懸停在連結上時顯示的提示資訊；
- rel屬性用於設定連結的關係，例如設定nofollow值可以告訴搜尋引擎不要跟蹤該連結。
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！
4、錨點連結標籤
錨點標籤用於在網頁中建立一個可以點選的錨點，以便使用者可以透過點選錨點跳轉到頁面中的其他部分。如下圖中電子書的章節切換。
錨點標籤的語法為：
<a name="錨點名稱"></a>
例如，可以在頁面中的一個段落前新增一個錨點：
<a name="section1"></a>
<p>這是一個段落。</p>
然後，可以在頁面的其他位置建立一個指向該錨點的超連結：
<a href="#section1">跳轉到第一節</a>
當使用者點選“跳轉到第一節”連結時，頁面將滾動到名為“section1”的錨點所在的位置。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網站</title>
</head>
<body>
<h1>歡迎來到雲端源想！</h1>
<p><a href="#section1">跳轉到第一節</a></p>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<p>這是第三個段落。</p>
<a name="section1"></a>
<p>這是第一節的內容。</p>
</body>
</html>
三、總結
HTML圖片標籤和超連結標籤是構建網頁的兩個重要元素，它們不僅豐富了網頁的內容，還為網頁新增了動態和互動性。
透過學習和掌握這兩個標籤的使用方法，我們可以建立更加豐富和互動的網頁，為使用者提供更好的瀏覽體驗。無論是展示精美的圖片，還是實現頁面之間的跳轉，HTML圖片標籤和超連結標籤都能幫助我們實現更多的創意和功能。
讓我們一起探索HTML的奇妙世界，創造出更加精彩的網頁吧！