鏈接元素的常用屬性

我們平時(shí)見到的a標(biāo)簽中最為常見的就是href和target這兩個(gè)屬性了，其次還有type和download，下面我們來依次分析一下它們各自都有著什么樣的用途：

• href屬性介紹

  通俗點(diǎn)講，這個(gè)屬性是目標(biāo)指向的意思，最常用的是頁面鏈接的地址，當(dāng)然不僅限于鏈接地址，也可以是撥打電話的鏈接、打開郵件工具發(fā)郵件的鏈接都可以通過href屬性來實(shí)現(xiàn)；下面簡單的寫下上面提到的各種代碼示例：

  • 點(diǎn)擊打開網(wǎng)頁目標(biāo)示例： <a href="http://ipnx.cn">PHP中文網(wǎng)</a>

  • 點(diǎn)擊撥打電話示例：<a href="tel:13888888888">聯(lián)系客服</a>

  • 點(diǎn)擊發(fā)送郵件示例： <a href="mailto:admin@admin.com">發(fā)送郵件</a>

  • 點(diǎn)擊下載示例： <a href="http://ipnx.cn/kejian.zip">下載課件</a>

• target 屬性介紹

  target屬性是設(shè)置我們上面href的指向目標(biāo)打開源，我們平時(shí)點(diǎn)擊網(wǎng)頁中鏈接的時(shí)候會(huì)發(fā)現(xiàn)有的點(diǎn)擊是直接在當(dāng)前頁面跳轉(zhuǎn)到新頁面的，還有的是點(diǎn)擊之后會(huì)在一個(gè)新的窗口打開新頁面同時(shí)我們點(diǎn)擊的這個(gè)頁面也還保留著的，還有的是左邊點(diǎn)擊，右邊會(huì)隨之變動(dòng)等等一些情況，那么這些都是通過配合target屬性來實(shí)現(xiàn)的，我們直接上示例代碼：

  • 在新窗口打開示例： <a href="http://ipnx.cn" target="_blank">PHP中文網(wǎng)</a>

  • 在當(dāng)前窗口打開示例： <a href="http://ipnx.cn" target="_self">PHP中文網(wǎng)</a>

  • 在父窗口打開示例： <a href="http://ipnx.cn" target="_parent">PHP中文網(wǎng)</a>

  • 在頂層窗口打開示例： <a href="http://ipnx.cn" target="_top">PHP中文網(wǎng)</a>

  • 指定窗口打開示例： <a href="http://ipnx.cn" target="窗口名稱">PHP中文網(wǎng)</a>，此用法需要搭配<iframe>元素一起使用

• download屬性介紹

  這個(gè)屬性是用來自定義下載文件名的，我們雖然不是很常見，但是非常的好用，比如在服務(wù)器上我們需要下載的一張圖片文件名是“img.jpg”，我們通過設(shè)置download屬性可以使用戶點(diǎn)擊下載這個(gè)圖片的文件名是另一個(gè)，看代碼寫法：

  • 自定義下載文件名示例： <a href="http://ipnx.cn/img.jpg" download="test.jpg">下載圖片</a>

• type屬性介紹

  type屬性是設(shè)定href鏈接中文檔的 MIME 類型，且只能在href屬性存在時(shí)使用才有效?？聪旅媸纠a：

  • 設(shè)定鏈接中的MIME類型為超文本標(biāo)記語言文本類型：<a href="http://ipnx.cn" type="text/html">走你</a>

附：常見的MIME類型表：

錨點(diǎn)的功能與用途

• 錨點(diǎn)是什么：

  錨點(diǎn)是超鏈接的一種，又叫命名錨記

• 錨點(diǎn)有什么作用：

  錨點(diǎn)能夠迅速定位到當(dāng)前頁面內(nèi)標(biāo)記的指定位置

• 錨點(diǎn)的用途：

  常見的錨點(diǎn)功能有“回到頂部”、“到底部”、單頁面中點(diǎn)擊跳轉(zhuǎn)到指定內(nèi)容位置等等

• 錨點(diǎn)的用法寫法

  錨點(diǎn)的使用需要配合頁面中某元素加入id值作為錨點(diǎn)標(biāo)記，然后通過href超鏈接跳轉(zhuǎn)至標(biāo)記處，請(qǐng)看下方示例代碼：

  • 創(chuàng)建錨點(diǎn)標(biāo)記：<header id="top">頂部頁頭內(nèi)容區(qū)</header>

  • 錨點(diǎn)跳轉(zhuǎn)實(shí)現(xiàn)：<a href="#top">回到頂部</a>

    這樣就創(chuàng)建好了一個(gè)錨點(diǎn)。

結(jié)語

通過學(xué)習(xí)本節(jié)《鏈接元素》，我們對(duì)網(wǎng)頁中常見的鏈接有了新的理解與認(rèn)識(shí)，從常見的鏈接屬性到陌生偶爾見到的鏈接屬性，對(duì)今后的開發(fā)道路都有很大的幫助。

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：鏈接元素, 以后可能只會(huì)用到錨點(diǎn)和鏈接功能,其它的功能并不常用的