整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過(guò)得還好嗎？
無(wú)論種子散落在何處
都會(huì)長(zhǎng)出一棵樹
向著天空，掙扎生長(zhǎng)
- 2024.03.15 -
HTML圖片標(biāo)簽和超鏈接標(biāo)簽是網(wǎng)頁(yè)開發(fā)中常用的兩種標(biāo)簽，它們分別用于在網(wǎng)頁(yè)中插入圖片和創(chuàng)建超鏈接。
我們每天都在互聯(lián)網(wǎng)世界中與各種形式的信息打交道。你是否好奇過(guò)，當(dāng)你點(diǎn)擊一篇文章中的圖片或鏈接時(shí)，是什么神奇的力量讓你瞬間跳轉(zhuǎn)到另一個(gè)頁(yè)面？
今天，就讓我們一起揭開HTML圖片標(biāo)簽和超鏈接標(biāo)簽的神秘面紗。
HTML圖片標(biāo)簽是一種特殊的標(biāo)記，它可以讓網(wǎng)頁(yè)顯示圖像。通過(guò)使用圖片標(biāo)簽，我們可以在網(wǎng)頁(yè)上展示各種圖片，從而讓網(wǎng)頁(yè)更加生動(dòng)有趣。
1、語(yǔ)法結(jié)構(gòu)
HTML圖片標(biāo)簽的語(yǔ)法結(jié)構(gòu)非常簡(jiǎn)單，只需要使用<img>標(biāo)簽，并在其中添加src屬性，指定圖片的路徑即可。
例如：
<img src="image.jpg" alt="描述圖片的文字">2、圖片格式
HTML支持多種圖片格式，包括JPEG、PNG、GIF等。不同的圖片格式具有不同的特點(diǎn)，可以根據(jù)需要選擇合適的格式。
3、圖片屬性
除了src屬性外，HTML圖片標(biāo)簽還有其他一些常用的屬性，如：
4、網(wǎng)絡(luò)圖片的插入
當(dāng)需要插入網(wǎng)絡(luò)上的圖片時(shí)，可以將圖片的URL地址作為src屬性的值。例如：
<img src="https://www.example.com/images/pic.jpg" alt="示例圖片">5、本地圖片的插入
當(dāng)需要插入本地圖片時(shí)，可以將圖片的相對(duì)路徑或絕對(duì)路徑作為src屬性的值。
6、相對(duì)路徑與絕對(duì)路徑
在這里再給大家介紹兩個(gè)概念，相對(duì)路徑與絕對(duì)路徑，搞懂它們，我們?cè)诓迦氡镜貓D片時(shí)也能得心應(yīng)手。
相對(duì)路徑：
相對(duì)于當(dāng)前HTML文件所在目錄的路徑，包含Web的相對(duì)路徑（HTML中的相對(duì)目錄）。例如，如果圖片文件位于與HTML文件相同的目錄中，可以直接使用文件名作為路徑：
<img src="pic.jpg" alt="本地圖片">絕對(duì)路徑：
圖片文件在計(jì)算機(jī)上的完整路徑（URL和物理路徑）。例如：
<img src="C:/Users/username/Pictures/pic.jpg" alt="本地圖片">超鏈接標(biāo)簽是HTML中另一個(gè)重要的元素，它可以實(shí)現(xiàn)網(wǎng)頁(yè)之間的跳轉(zhuǎn)。通過(guò)使用超鏈接標(biāo)簽，我們可以將文本、圖片等內(nèi)容設(shè)置為可點(diǎn)擊的鏈接，方便用戶在不同頁(yè)面之間自由切換。
1、語(yǔ)法結(jié)構(gòu)
超鏈接標(biāo)簽使用<a>標(biāo)簽表示，需要在href屬性中指定鏈接的目標(biāo)地址。
<a href="目標(biāo)地址" title="標(biāo)題">文本內(nèi)容</a>例如：
<a href="https://www.ydcode.cn/">點(diǎn)擊訪問示例網(wǎng)站</a>示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網(wǎng)站</title>
</head>
<body>
<h1>歡迎來(lái)到云端源想！</h1>
<p>這是一個(gè)簡(jiǎn)單的HTML頁(yè)面，用于展示一個(gè)網(wǎng)站的結(jié)構(gòu)和內(nèi)容。</p>
<a href="https://www.ydcode.cn/">點(diǎn)擊訪問示例網(wǎng)站</a>
</body>
</html>2、鏈接目標(biāo)
超鏈接可以鏈接到不同的目標(biāo)，包括其他網(wǎng)頁(yè)、電子郵件地址、文件下載等。通過(guò)設(shè)置href屬性的值，可以實(shí)現(xiàn)不同的鏈接目標(biāo)。
3、鏈接屬性
超鏈接標(biāo)簽還有一些其他常用的屬性，如：
想要快速入門前端開發(fā)嗎？推薦一個(gè)前端開發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無(wú)壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想
4、錨點(diǎn)鏈接標(biāo)簽
錨點(diǎn)標(biāo)簽用于在網(wǎng)頁(yè)中創(chuàng)建一個(gè)可以點(diǎn)擊的錨點(diǎn)，以便用戶可以通過(guò)點(diǎn)擊錨點(diǎn)跳轉(zhuǎn)到頁(yè)面中的其他部分。
錨點(diǎn)標(biāo)簽的語(yǔ)法為：
<a name="錨點(diǎn)名稱"></a>例如，可以在頁(yè)面中的一個(gè)段落前添加一個(gè)錨點(diǎn)：
<a name="section1"></a>
<p>這是一個(gè)段落。</p>然后，可以在頁(yè)面的其他位置創(chuàng)建一個(gè)指向該錨點(diǎn)的超鏈接：
<a href="#section1">跳轉(zhuǎn)到第一節(jié)</a>當(dāng)用戶點(diǎn)擊“跳轉(zhuǎn)到第一節(jié)”鏈接時(shí)，頁(yè)面將滾動(dòng)到名為“section1”的錨點(diǎn)所在的位置。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例網(wǎng)站</title>
</head>
<body>
<h1>歡迎來(lái)到云端源想！</h1>
<p><a href="#section1">跳轉(zhuǎn)到第一節(jié)</a></p>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
<p>這是第三個(gè)段落。</p>
<a name="section1"></a>
<p>這是第一節(jié)的內(nèi)容。</p>
</body>
</html>HTML圖片標(biāo)簽和超鏈接標(biāo)簽是構(gòu)建網(wǎng)頁(yè)的兩個(gè)重要元素，它們不僅豐富了網(wǎng)頁(yè)的內(nèi)容，還為網(wǎng)頁(yè)添加了動(dòng)態(tài)和互動(dòng)性。
通過(guò)學(xué)習(xí)和掌握這兩個(gè)標(biāo)簽的使用方法，我們可以創(chuàng)建更加豐富和互動(dòng)的網(wǎng)頁(yè)，為用戶提供更好的瀏覽體驗(yàn)。無(wú)論是展示精美的圖片，還是實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)，HTML圖片標(biāo)簽和超鏈接標(biāo)簽都能幫助我們實(shí)現(xiàn)更多的創(chuàng)意和功能。
讓我們一起探索HTML的奇妙世界，創(chuàng)造出更加精彩的網(wǎng)頁(yè)吧！
我們下期再見！
END
文案編輯|云端學(xué)長(zhǎng)
文案配圖|云端學(xué)長(zhǎng)
內(nèi)容由：云端源想分享
HTML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。幾乎可以在所有的網(wǎng)頁(yè)中找到鏈接。點(diǎn)擊鏈接可以從一張頁(yè)面跳轉(zhuǎn)到另一張頁(yè)面。
HTML 鏈接
如何在HTML文檔中創(chuàng)建鏈接。
(可以在本頁(yè)底端找到更多實(shí)例)
HTML 超鏈接（鏈接）
HTML使用標(biāo)簽 <a>來(lái)設(shè)置超文本鏈接。
超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
在標(biāo)簽<a> 中使用了href屬性來(lái)描述鏈接的地址。
默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
一個(gè)未訪問過(guò)的鏈接顯示為藍(lán)色字體并帶有下劃線。
訪問過(guò)的鏈接顯示為紫色并帶有下劃線。
點(diǎn)擊鏈接時(shí)，鏈接顯示為紅色并帶有下劃線。
注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會(huì)根據(jù) CSS 的設(shè)定而顯示。
HTML 鏈接語(yǔ)法
鏈接的 HTML 代碼很簡(jiǎn)單。它類似這樣：:
<a href="url">鏈接文本</a>
href 屬性描述了鏈接的目標(biāo)。.
實(shí)例
<a >訪問菜鳥教程</a>
上面這行代碼顯示為：: 訪問菜鳥教程
點(diǎn)擊這個(gè)超鏈接會(huì)把用戶帶到菜鳥教程的首頁(yè)。
提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會(huì)在新窗口打開文檔：
實(shí)例
<a>訪問菜鳥教程!</a>
HTML 鏈接- id 屬性
id屬性可用于創(chuàng)建在一個(gè)HTML文檔書簽標(biāo)記。
提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對(duì)于讀者來(lái)說(shuō)是隱藏的。
實(shí)例
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文檔中創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：
<a href="#tips">訪問有用的提示部分</a>
或者，從另一個(gè)頁(yè)面創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：
<a >
訪問有用的提示部分</a>
基本的注意事項(xiàng) - 有用的提示
注釋： 請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：。
圖片鏈接
如何使用圖片鏈接。
在當(dāng)前頁(yè)面鏈接到指定位置
如何使用書簽
跳出框架
本例演示如何跳出框架，假如你的頁(yè)面被固定在框架之內(nèi)。
創(chuàng)建電子郵件鏈接
本例演示如何如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶端程序后才能工作。）
建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。
HTML 鏈接標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <a> | 定義一個(gè)超級(jí)鏈接 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
1）定義n初始值0,
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: "#app",
data: {
"n": 0
},
methods: {},
computed: {},
})
</script>（2）定義自加按鈕，展示n的值，和判斷結(jié)果
<p><a class="btn btn-block btn-primary" @click="n++">自加</a></p>
<h2>n == {{n}}</h2>
<h3 v-text="n == 1"></h3><h1 style="color: red">使用v-show進(jìn)行條件渲染</h1>
<h3 v-show="n == 1">使用v-show進(jìn)行條件渲染</h3><h1 style="color: red">使用v-if進(jìn)行條件渲染</h1>
<h3 v-if="n == 1">使用v-if進(jìn)行條件渲染</h3><h1 style="color: red">使用if else-if else進(jìn)行條件渲染 </h1>
<h3 v-if="n === 1">使用v-if進(jìn)行條件渲染 if else-if - v-if="n === 1"</h3>
<h3 v-else-if="n == 2">使用v-if進(jìn)行條件渲染 if else-if - v-else-if="n == 2"</h3>
<h3 v-else-if="n == 3">使用v-if進(jìn)行條件渲染 if else-if - v-else-if="n == 3"</h3>
<h3 v-else>使用v-if進(jìn)行條件渲染 if else-if - v-else</h3><h1 style="color: red">使用template v-if進(jìn)行條件渲染 </h1>
<template v-if="n == 1">
<h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
<h3>使用v-if進(jìn)行條件渲染 - template v-if="n == 1"</h3>
</template>執(zhí)行結(jié)果
筆記分享
<pre v-show="true">
條件渲染：
1、v-if
寫法：
（1）v-if = "表達(dá)式"
（2）v-else-if = "表達(dá)式"
（3）v-else = "表達(dá)式"
適用于：切換頻率較低的場(chǎng)景
特點(diǎn)：不展示的DOM元素將被直接刪除
注意：v-if和v-else-if、v-else一起使用的時(shí)候，要求結(jié)構(gòu)不可以被打斷
2、v-show
寫法：v-show = "表達(dá)式"
適用于：切換頻率較高的場(chǎng)景
特點(diǎn)：不展示的DOM元素未被移除，使用樣式進(jìn)行隱藏
3、備注
使用v-if時(shí)，元素可能無(wú)法獲取到，使用v-show是可獲取到的
4、使用template v-if
寫的時(shí)候template對(duì)內(nèi)容進(jìn)行了包裹，
等最終頁(yè)面渲染的時(shí)候，將把template標(biāo)簽刪掉，
這也就是說(shuō)不破壞原來(lái)的樣式。
但是template只能配合v-if進(jìn)行使用。
</pre>源碼截圖
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
