HTML常用基礎標簽：圖片與超鏈接標簽全解！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

無論種子散落在何處

都會長出一棵樹

向著天空，掙扎生長

- 2024.03.15 -

HTML圖片標簽和超鏈接標簽是網頁開發中常用的兩種標簽，它們分別用于在網頁中插入圖片和創建超鏈接。

我們每天都在互聯網世界中與各種形式的信息打交道。你是否好奇過，當你點擊一篇文章中的圖片或鏈接時，是什么神奇的力量讓你瞬間跳轉到另一個頁面？

今天，就讓我們一起揭開HTML圖片標簽和超鏈接標簽的神秘面紗。

一、HTML圖片標簽

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

1、語法結構

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

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

HTML 鏈接

如何在HTML文檔中創建鏈接。

(可以在本頁底端找到更多實例)

HTML 超鏈接（鏈接）

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

HTML 鏈接語法

鏈接的 HTML 代碼很簡單。它類似這樣：:

href 屬性描述了鏈接的目標。.

實例

<a >訪問菜鳥教程</a>

上面這行代碼顯示為：: 訪問菜鳥教程

點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。

提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

實例

<a>訪問菜鳥教程!</a>

HTML 鏈接- id 屬性

id屬性可用于創建在一個HTML文檔書簽標記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

實例

在HTML文檔中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips"）"：

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個頁面創建一個鏈接到"有用的提示部分(id="tips"）"：

<a >

訪問有用的提示部分</a>

基本的注意事項 - 有用的提示

注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。

圖片鏈接

如何使用圖片鏈接。

在當前頁面鏈接到指定位置

如何使用書簽

跳出框架

本例演示如何跳出框架，假如你的頁面被固定在框架之內。

創建電子郵件鏈接

本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

建電子郵件鏈接 2

本例演示更加復雜的郵件鏈接。

HTML 鏈接標簽

標簽	描述
<a>	定義一個超級鏈接

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

1）定義n初始值0,

<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: "#app",
        data: {
            "n": 0
        },
        methods: {},
        computed: {},

    })
</script>

（2）定義自加按鈕，展示n的值，和判斷結果

<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3>

1、v-show

<h1 style="color: red">使用v-show進行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進行條件渲染</h3>

2、v-if

<h1 style="color: red">使用v-if進行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進行條件渲染</h3>

3、v-if v-else-if v-else

<h1 style="color: red">使用if else-if else進行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進行條件渲染 if else-if - v-else</h3>

4、template

<h1 style="color: red">使用template v-if進行條件渲染 </h1>
<template v-if="n == 1">
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
    <h3>使用v-if進行條件渲染 - template v-if="n == 1"</h3>
</template>

執行結果

筆記分享

<pre v-show="true">
    條件渲染：
    1、v-if
        寫法：
            （1）v-if = "表達式"
            （2）v-else-if = "表達式"
            （3）v-else = "表達式"
        適用于：切換頻率較低的場景
        特點：不展示的DOM元素將被直接刪除
        注意：v-if和v-else-if、v-else一起使用的時候，要求結構不可以被打斷
    2、v-show
        寫法：v-show = "表達式"
        適用于：切換頻率較高的場景
        特點：不展示的DOM元素未被移除，使用樣式進行隱藏
    3、備注
        使用v-if時，元素可能無法獲取到，使用v-show是可獲取到的
    4、使用template v-if
        寫的時候template對內容進行了包裹，
        等最終頁面渲染的時候，將把template標簽刪掉，
        這也就是說不破壞原來的樣式。
        但是template只能配合v-if進行使用。
</pre>

源碼截圖

在線咨詢

上一篇：html提示信息框淡入淡出效果
下一篇：HTML5學習筆記

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商