慕少3449830 ·HTML 鏈接
本章節(jié)介紹 HTML 頁面與頁面，文檔與文檔之間的媒介-鏈接，鏈接為客戶和服務(wù)器提供了主要的交互的手段。這是一個(gè)比較常見的標(biāo)簽類型，幾乎在所有的網(wǎng)站中都能看到它的身影。
1. 樣式
使用標(biāo)簽<a>設(shè)置超文本鏈接，鏈接可以是圖形或者文字，當(dāng)鼠標(biāo)移動(dòng)到鏈接上時(shí)，會(huì)出現(xiàn)一個(gè)小手的形狀。
- 未訪問的鏈接顯示藍(lán)色，帶有下劃線；
- 訪問過的鏈接顯示紫色，帶有下劃線；
- 點(diǎn)擊時(shí)，鏈接顯示紅色，帶有下劃線。
以上是瀏覽器的鏈接的默認(rèn)的樣式，在實(shí)際的項(xiàng)目開發(fā)中，通常網(wǎng)頁的風(fēng)格需要重新設(shè)計(jì)，那么鏈接的默認(rèn)樣式也會(huì)隨網(wǎng)頁的風(fēng)格而改變，要改變鏈接的樣式需要用到 css 偽類，偽類是 css 的一種定義方式，可以和 css 的類搭配使用，以下是幾種偽類的使用實(shí)例：
<style>
.divcss:link{ color:#F00}/* 鏈接默認(rèn)是紅色 */
.divcss:hover{ color:#000}/* 鼠標(biāo)懸停變黑色 */
.divcss:active{ color:#03F}/* 鼠標(biāo)點(diǎn)擊時(shí)藍(lán)色 */
.divcss:visited{ color:#F0F}/* 訪問過為粉紅 */
</style>
<a class="divcss" href="http://www.baidu.com">百度</a>
從上面代碼可以看到，偽類包括鏈接默認(rèn)（:link）、鼠標(biāo)懸停（:hover）、鼠標(biāo)點(diǎn)擊時(shí)（:active）、鏈接訪問后（:visited）這幾種樣式定義方式，這些都是專門針對(duì)于鏈接。
2. 語法
a 標(biāo)簽的語法如下：
鏈接 a 是一種閉合標(biāo)簽，一個(gè)最基礎(chǔ)的鏈接定義包括鏈接標(biāo)簽 a 標(biāo)簽、標(biāo)簽內(nèi)容、鏈接地址 href 屬性，其中 href 是鏈接中最重要的一個(gè)屬性，如果未定義 href 瀏覽器也不會(huì)報(bào)錯(cuò)，但是這就失去了標(biāo)簽的意義，變得跟普通文本標(biāo)簽沒有區(qū)別了。
2.1 target 屬性
由于鏈接是 HTML 中重要的交互介質(zhì)，當(dāng)用戶點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)的目標(biāo)界面并非是當(dāng)前的界面，這時(shí)候就需要一個(gè)重要的屬性 target 來定義所要跳轉(zhuǎn)的目標(biāo)界面。
target 屬性的可選值有以下幾個(gè)：
- _blank： 在新窗口打開鏈接；
- _self ： 默認(rèn)方式，在當(dāng)前窗口載入鏈接內(nèi)容；
- _top： 在包含當(dāng)前文檔的最頂層的窗口載入鏈接內(nèi)容。（一般用在有 frame 框架標(biāo)簽的頁面中。）
- _parent： 在當(dāng)前文檔的父窗口載入鏈接內(nèi)容。（一般用在有 frame 框架標(biāo)簽的頁面中。）
其中_top 和 _parent 不太好理解，看下面一個(gè)例子：
<iframe name="baidu"></iframe><!-- 定義一個(gè)iframe -->
<a href="http://www.baidu.com" target="baidu">搜一搜</a><!-- 定義一個(gè)鏈接 -->
以上代碼實(shí)現(xiàn)：點(diǎn)擊鏈接（搜一搜）后，在當(dāng)前頁面的 iframe 中嵌入搜索框頁面。
Tips： 該功能在 IE10 版本以下不兼容。
其中頂層窗口和父窗口針對(duì)在網(wǎng)頁中嵌套 iframe 或者 frameset 有效，當(dāng)嵌套框架時(shí)被嵌套框架是嵌套框架的 _parent，最外層的 HTML 稱為 _top。
新的 HTML 標(biāo)準(zhǔn)中關(guān)于 target 屬性的存在有一定的爭(zhēng)議，主要是因?yàn)榭梢允褂?JavaScript 的方式替代 target，例如：
<a href="javascript:window.open('https://www.baidu.com')" target="_blank">點(diǎn)擊在新窗口打開</a>
<a href="javascript:location.href='https://www.baidu.com'">點(diǎn)擊在當(dāng)前窗口打開</a>
<a href="javascript:top.location.href='https://www.baidu.com'">點(diǎn)擊在頂層窗口打開</a>
<a href="javascript:parent.location.href='https://www.baidu.com'">點(diǎn)擊在父窗口打開</a>
以上代碼使用 JavaScript 函數(shù)的方式實(shí)現(xiàn)各種打開鏈接的方式。
2.1 id 屬性
id 屬性是 html 的通用屬性，主要是用于給元素設(shè)置事件或者設(shè)置樣式時(shí)用到，以下代碼實(shí)現(xiàn)點(diǎn)擊鏈接跳轉(zhuǎn)之前彈框提示：
<a href='https://www.baidu.com' id='test'>百度</a> <!-- 定義一個(gè)鏈接 -->
<script>
document.getElementById("test").onclick = function(){ //點(diǎn)擊鏈接跳轉(zhuǎn)前彈框提示
alert("即將跳轉(zhuǎn)到百度");
}
</script>
2.2 charset 屬性
設(shè)置編碼，在 HTML5 不支持：
<a charset="gb2312" href="http://www.baidu.com">百度</a>
此屬性在主流瀏覽器中幾乎不支持，所以定義了沒有什么作用。
2.3 coords 屬性
定義鏈接的坐標(biāo)，HTML5 不支持。
2.4 download 屬性
有時(shí)用戶點(diǎn)擊一個(gè)鏈接的時(shí)候，這個(gè)鏈接的內(nèi)容有可能包含 word、pdf、png、jpg 或者 MP4，zip 等內(nèi)容，用戶需要的僅僅是下載而不是跳轉(zhuǎn)鏈接，那么這時(shí)候我們只需要定義一個(gè) download 屬性，這個(gè)屬性包含下載時(shí)的文件名稱。
<a href="https://img01.sogoucdn.com/app/a/07/57d9e1c69332c8da692c3ec5c0e1466b" download="圖片">點(diǎn)擊下載圖片</a>
以上代碼定義了一個(gè)下載圖片鏈接，download 屬性不支持 IE 瀏覽器
2.5 href 屬性
定義超鏈接的跳轉(zhuǎn)目標(biāo)，可以是：
- 絕對(duì) URL： 例如
http://www.baidu.com； - 相對(duì) URL： 例如
/index.html； - 錨點(diǎn) ： dom 的 id；
- JavaScript 表達(dá)式：例如
javascript:void(0)阻止鏈接跳轉(zhuǎn)。
<a href="https://www.baidu.com" id="test">百度</a>
<a href="/index.html">主頁</a>
<a href="javascript:void(0)">普通按鈕</a>
<!-- 請(qǐng)注意：向下滾動(dòng)頁面，可看到下面這個(gè)向上跳轉(zhuǎn)的鏈接。單擊它，會(huì)讓頁面跳到網(wǎng)頁的頂部-->
<a href="#test" style="margin-top:2000px;display:block">跳轉(zhuǎn)到首部</a>
以上代碼定義了幾種鏈接的方式，其中錨點(diǎn)主要應(yīng)用于當(dāng)頁面滾動(dòng)條比較長時(shí)，用戶可以點(diǎn)擊跳轉(zhuǎn)到首部。
2.6 hreflang 屬性
定義被鏈接的文檔的語言：
<a href="http://www.baidu.com" hreflang="zh">百度</a>
主流的瀏覽器暫不支持該屬性。
2.7 name 屬性
通用屬性，HTML5 不支持。
2.8 rel 屬性
定義當(dāng)前文檔，主要用于搜索引擎搜集網(wǎng)頁內(nèi)鏈接的集合以及鏈接與鏈接之間的關(guān)系，沒有實(shí)際功能用途。
rel 是英文單詞 relationship 的縮寫，意味著雖然這個(gè)屬性本身對(duì)網(wǎng)頁視覺效果而言沒有什么本質(zhì)性的用途，但是它是串聯(lián)網(wǎng)頁與搜索引擎的橋梁，搜索引擎通過這個(gè)屬性可以獲取到鏈接的一些簡(jiǎn)介，從而了解到該網(wǎng)頁的用途，進(jìn)而對(duì)網(wǎng)頁進(jìn)行歸類，方便用戶搜索。
2.9 rev 屬性
定義鏈接文檔與當(dāng)前文檔的關(guān)系，HTML5 不支持。
2.10 shape 屬性
定義鏈接的形狀，HTML5 不支持。
2.11 type 屬性
定義鏈接文檔的 mime 類型，mime 是指描述內(nèi)容類型的因特網(wǎng)標(biāo)準(zhǔn)，以下羅列最新的標(biāo)準(zhǔn)項(xiàng)：
| 擴(kuò)展名 | 類型/子類型 |
|---|---|
| application/octet-stream | |
| 323 | text/h323 |
| acx | application/internet-property-stream |
| ai | application/postscript |
| aif | audio/x-aiff |
| aifc | audio/x-aiff |
| aiff | audio/x-aiff |
| asf | video/x-ms-asf |
| asr | video/x-ms-asf |
| asx | video/x-ms-asf |
| au | audio/basic |
| avi | video/x-msvideo |
| axs | application/olescript |
| bas | text/plain |
| bcpio | application/x-bcpio |
| bin | application/octet-stream |
| bmp | image/bmp |
| c | text/plain |
| cat | application/vnd.ms-pkiseccat |
| cdf | application/x-cdf |
| cer | application/x-x509-ca-cert |
| class | application/octet-stream |
| clp | application/x-msclip |
| cmx | image/x-cmx |
| cod | image/cis-cod |
| cpio | application/x-cpio |
| crd | application/x-mscardfile |
| crl | application/pkix-crl |
| crt | application/x-x509-ca-cert |
| csh | application/x-csh |
| css | text/css |
| dcr | application/x-director |
| der | application/x-x509-ca-cert |
| dir | application/x-director |
| dll | application/x-msdownload |
| dms | application/octet-stream |
| doc | application/msword |
| dot | application/msword |
| dvi | application/x-dvi |
| dxr | application/x-director |
| eps | application/postscript |
| etx | text/x-setext |
| evy | application/envoy |
| exe | application/octet-stream |
| fif | application/fractals |
| flr | x-world/x-vrml |
| gif | image/gif |
| gtar | application/x-gtar |
| gz | application/x-gzip |
| h | text/plain |
| hdf | application/x-hdf |
| hlp | application/winhlp |
| hqx | application/mac-binhex40 |
| hta | application/hta |
| htc | text/x-component |
| htm | text/html |
| html | text/html |
| htt | text/webviewhtml |
| ico | image/x-icon |
| ief | image/ief |
| iii | application/x-iphone |
| ins | application/x-internet-signup |
| isp | application/x-internet-signup |
| jfif | image/pipeg |
| jpe | image/jpeg |
| jpeg | image/jpeg |
| jpg | image/jpeg |
| js | application/x-javascript |
| latex | application/x-latex |
| lha | application/octet-stream |
| lsf | video/x-la-asf |
| lsx | video/x-la-asf |
| lzh | application/octet-stream |
| m13 | application/x-msmediaview |
| m14 | application/x-msmediaview |
| m3u | audio/x-mpegurl |
| man | application/x-troff-man |
| mdb | application/x-msaccess |
| me | application/x-troff-me |
| mht | message/rfc822 |
| mhtml | message/rfc822 |
| mid | audio/mid |
| mny | application/x-msmoney |
| mov | video/quicktime |
| movie | video/x-sgi-movie |
| mp2 | video/mpeg |
| mp3 | audio/mpeg |
| mpa | video/mpeg |
| mpe | video/mpeg |
| mpeg | video/mpeg |
| mpg | video/mpeg |
| mpp | application/vnd.ms-project |
| mpv2 | video/mpeg |
| ms | application/x-troff-ms |
| mvb | application/x-msmediaview |
| nws | message/rfc822 |
| oda | application/oda |
| p10 | application/pkcs10 |
| p12 | application/x-pkcs12 |
| p7b | application/x-pkcs7-certificates |
| p7c | application/x-pkcs7-mime |
| p7m | application/x-pkcs7-mime |
| p7r | application/x-pkcs7-certreqresp |
| p7s | application/x-pkcs7-signature |
| pbm | image/x-portable-bitmap |
| application/pdf | |
| pfx | application/x-pkcs12 |
| pgm | image/x-portable-graymap |
| pko | application/ynd.ms-pkipko |
| pma | application/x-perfmon |
| pmc | application/x-perfmon |
| pml | application/x-perfmon |
| pmr | application/x-perfmon |
| pmw | application/x-perfmon |
| pnm | image/x-portable-anymap |
| pot, | application/vnd.ms-powerpoint |
| ppm | image/x-portable-pixmap |
| pps | application/vnd.ms-powerpoint |
| ppt | application/vnd.ms-powerpoint |
| prf | application/pics-rules |
| ps | application/postscript |
| pub | application/x-mspublisher |
| qt | video/quicktime |
| ra | audio/x-pn-realaudio |
| ram | audio/x-pn-realaudio |
| ras | image/x-cmu-raster |
| rgb | image/x-rgb |
| rmi | audio/mid |
| roff | application/x-troff |
| rtf | application/rtf |
| rtx | text/richtext |
| scd | application/x-msschedule |
| sct | text/scriptlet |
| setpay | application/set-payment-initiation |
| setreg | application/set-registration-initiation |
| sh | application/x-sh |
| shar | application/x-shar |
| sit | application/x-stuffit |
| snd | audio/basic |
| spc | application/x-pkcs7-certificates |
| spl | application/futuresplash |
| src | application/x-wais-source |
| sst | application/vnd.ms-pkicertstore |
| stl | application/vnd.ms-pkistl |
| stm | text/html |
| svg | image/svg+xml |
| sv4cpio | application/x-sv4cpio |
| sv4crc | application/x-sv4crc |
| swf | application/x-shockwave-flash |
| t | application/x-troff |
| tar | application/x-tar |
| tcl | application/x-tcl |
| tex | application/x-tex |
| texi | application/x-texinfo |
| texinfo | application/x-texinfo |
| tgz | application/x-compressed |
| tif | image/tiff |
| tiff | image/tiff |
| tr | application/x-troff |
| trm | application/x-msterminal |
| tsv | text/tab-separated-values |
| txt | text/plain |
| uls | text/iuls |
| ustar | application/x-ustar |
| vcf | text/x-vcard |
| vrml | x-world/x-vrml |
| wav | audio/x-wav |
| wcm | application/vnd.ms-works |
| wdb | application/vnd.ms-works |
| wks | application/vnd.ms-works |
| wmf | application/x-msmetafile |
| wps | application/vnd.ms-works |
| wri | application/x-mswrite |
| wrl | x-world/x-vrml |
| wrz | x-world/x-vrml |
| xaf | x-world/x-vrml |
| xbm | image/x-xbitmap |
| xla | application/vnd.ms-excel |
| xlc | application/vnd.ms-excel |
| xlm | application/vnd.ms-excel |
| xls | application/vnd.ms-excel |
| xlt | application/vnd.ms-excel |
| xlw | application/vnd.ms-excel |
| xof | x-world/x-vrml |
| xpm | image/x-xpixmap |
| xwd | image/x-xwindowdump |
| z | application/x-compress |
| zip | application/zip |
3. 其他鏈接因特網(wǎng)標(biāo)準(zhǔn)
除了通過<a>鏈接標(biāo)簽的方式，還可以通過下面三種方式：
- JavaScript
- iframe 標(biāo)簽
- script 標(biāo)簽
等方式與服務(wù)器交互。
3. 小結(jié)
本章節(jié)介紹了 <a> 標(biāo)簽的用途，以及各個(gè)屬性的功能，其中有些已經(jīng)在 HTML5 廢棄了，例如，控制樣式的屬性。<a> 標(biāo)簽是 HTML 中用途非常廣泛的標(biāo)簽，需要掌握。
2025 imooc.com All Rights Reserved |