HTML常用基礎標籤：圖片與超連結標籤全解！

云端源想發表於2024-03-16
HTML

HTML圖片標籤和超連結標籤是網頁開發中常用的兩種標籤，它們分別用於在網頁中插入圖片和建立超連結。

我們每天都在網際網路世界中與各種形式的資訊打交道。你是否好奇過，當你點選一篇文章中的圖片或連結時，是什麼神奇的力量讓你瞬間跳轉到另一個頁面？

今天，就讓我們一起揭開HTML圖片標籤和超連結標籤的神秘面紗。

一、HTML圖片標籤

HTML圖片標籤是一種特殊的標記，它可以讓網頁顯示影像。透過使用圖片標籤，我們可以在網頁上展示各種圖片，從而讓網頁更加生動有趣。

1、語法結構

HTML圖片標籤的語法結構非常簡單，只需要使用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的奇妙世界，創造出更加精彩的網頁吧！

相關文章