更新時(shí)間:2021-03-23 19:02:51 來源:動力節(jié)點(diǎn) 瀏覽1510次
超鏈接是互聯(lián)網(wǎng)提供的最令人興奮的創(chuàng)新之一,它們從一開始就一直是互聯(lián)網(wǎng)的一個(gè)特性,使互聯(lián)網(wǎng)成為互聯(lián)的網(wǎng)絡(luò)。HTML超鏈接也是各個(gè)網(wǎng)站網(wǎng)頁之間實(shí)現(xiàn)相互連接的一個(gè)手段之一,被廣泛應(yīng)用在各大網(wǎng)站。
HTML超鏈接使我們能夠?qū)⑽覀兊奈臋n鏈接到任何其他文檔(或其他資源),也可以鏈接到文檔的指定部分,我們可以在一個(gè)簡單的網(wǎng)址上提供應(yīng)用程序(與必須先安裝的本地應(yīng)用程序或其他東西相比)。幾乎任何網(wǎng)絡(luò)內(nèi)容都可以轉(zhuǎn)換為鏈接,點(diǎn)擊(或激活)超鏈接將使網(wǎng)絡(luò)瀏覽器轉(zhuǎn)到另一個(gè)網(wǎng)址(URL)。URL 可以指向 HTML 文件、文本文件、圖像、文本文檔、視頻和音頻文件以及可以在網(wǎng)絡(luò)上保存的任何其他內(nèi)容。 如果瀏覽器不知道如何顯示或處理文件,它會詢問您是否要打開文件(需要選擇合適的本地應(yīng)用來打開或處理文件)或下載文件(以后處理它)。
HTML超鏈接大致分為以下7類:
1、簡單鏈接
<a href="這里寫鏈接地址" title="前端一萬小時(shí)">知乎:itsOli</a>
<!-- 注釋:這里的 title 屬性,作用是:當(dāng)我們把鼠標(biāo)停在 itsOli 上時(shí),會彈出一個(gè)文本框:
前端一萬小時(shí)。 -->復(fù)制代碼
2、外部鏈接
將 target 設(shè)置成 _blank 時(shí),點(diǎn)擊這個(gè)鏈接,瀏覽器會新開一個(gè)窗口打開該網(wǎng)頁:
<a href="這里寫鏈接地址" title="前端一萬小時(shí)" target="_blank">知乎:itsOli</a>
<!-- 注釋:當(dāng)然這里的 target 屬性還可以設(shè)置成其他值。-->復(fù)制代碼
3、 返回頁面頂部鏈接
<a href="#">返回頁面頂部</a>
<!-- 注釋:這里的 # 后邊是可以加?xùn)|西的,可以是文檔中某個(gè)元素的 ID,也可以是某個(gè)標(biāo)題等等(但前
提是這些東西要唯一,不然沒辦法定位到具體位置)。 -->復(fù)制代碼
4、 圖片鏈接
用圖片來作為鏈接可點(diǎn)擊的對象。
5、下載鏈接
<a href="https://……這里放下載的鏈接" download>下載</a>
<!-- 注釋:當(dāng)我們點(diǎn)擊“下載”二字時(shí),就會自動下載這個(gè)鏈接的東西。 -->復(fù)制代碼
6、電話鏈接
<a href="tel:+86177******">打電話給 Oli</a>
<!-- 注釋:當(dāng)用戶是手機(jī)瀏覽頁面時(shí),點(diǎn)擊“打電話給 Oli”,手機(jī)就會自動撥號到這個(gè)號碼。 -->
7、 Email 鏈接
<a href="mailto:olizhao@qq.com">發(fā)郵件給 Oli</a>
<!-- 注釋:當(dāng)點(diǎn)擊“發(fā)郵件給 Oli ”時(shí),則自動打開郵箱跳轉(zhuǎn)到寫信頁面; -->
<a href="mailto:olizhao@qq.com" cc="seema.qdywxs@gmail.com">發(fā)郵件給 Oli 并抄送給 Seema</a>
<!-- 注釋:當(dāng)點(diǎn)擊“發(fā)郵件給 Oli 并抄送給 Seema”,則自動打開郵箱跳轉(zhuǎn)到寫信頁面并填好抄送人。 -->
HTML超鏈接是HTML技術(shù)中非常重要的一個(gè)知識點(diǎn),幾乎所有的網(wǎng)站多多少少都有上述的幾種超鏈接存在,也是互聯(lián)網(wǎng)的特性之一。在本站的HTML教程中涉及了各種各樣的超鏈接的實(shí)例教程,感興趣的小伙伴快去學(xué)習(xí)吧,爭取學(xué)成之后獨(dú)立完成一個(gè)屬于自己的前端頁面。

初級 202925

初級 203221

初級 202629

初級 203743