首页>教程>HTML5教程>HTML5 链接

此组别内的文章

需要支持？

如果通过文档没办法解决您的问题，请提交工单获取我们的支持！

HTML5 链接

更新于：2023-06-20 20:04:41

本章节学习 HTML5的页面与页面，文档与文档之间的媒介-链接，链接为客户和服务器提供了主要的交互的手段。这是一个比较常见的标签类型，几乎在所有的网站中都能看到它的身影。

1. 样式

使用标签<a>设置超文本链接，链接可以是图形或者文字，当鼠标移动到链接上时，会出现一个小手的形状。

  • 未访问的链接显示蓝色，带有下划线；
  • 访问过的链接显示紫色，带有下划线；
  • 点击时，链接显示红色，带有下划线。

以上是浏览器的链接的默认的样式，在实际的项目开发中，通常网页的风格需要重新设计，那么链接的默认样式也会随网页的风格而改变，要改变链接的样式需要用到 css 伪类，伪类是 css 的一种定义方式，可以和 css 的类搭配使用，以下是几种伪类的使用实例：

<style>.divcss:link{ color:#F00}/* 链接默认是红色 */
.divcss:hover{ color:#000}/* 鼠标悬停变黑色 */
.divcss:active{ color:#03F}/* 鼠标点击时蓝色 */
.divcss:visited{ color:#F0F}/* 访问过为粉红 */</style>
<a class="divcss" href="http://www.baidu.com">百度</a>

从上面代码可以看到，伪类包括链接默认（:link）、鼠标悬停（:hover）、鼠标点击时（:active）、链接访问后（:visited）这几种样式定义方式，这些都是专门针对于链接。

2. 语法

a 标签的语法如下：

<a href="url">内容</a>

链接 a 是一种闭合标签，一个最基础的链接定义包括链接标签 a 标签、标签内容、链接地址 href 属性，其中 href 是链接中最重要的一个属性，如果未定义 href 浏览器也不会报错，但是这就失去了标签的意义，变得跟普通文本标签没有区别了。

2.1 target 属性

由于链接是 HTML 中重要的交互介质，当用户点击一个链接跳转的目标界面并非是当前的界面，这时候就需要一个重要的属性 target 来定义所要跳转的目标界面。

target 属性的可选值有以下几个：

  • _blank： 在新窗口打开链接；
  • _self ： 默认方式，在当前窗口载入链接内容；
  • _top： 在包含当前文档的最顶层的窗口载入链接内容。（一般用在有 frame 框架标签的页面中。）
  • _parent： 在当前文档的父窗口载入链接内容。（一般用在有 frame 框架标签的页面中。）

其中_top 和 _parent 不太好理解，看下面一个例子：

<iframe name="baidu"></iframe><!-- 定义一个iframe -->
<a href="http://www.baidu.com" target="baidu">搜一搜</a><!-- 定义一个链接 -->

以上代码实现：点击链接（搜一搜）后，在当前页面的 iframe 中嵌入搜索框页面。

Tips： 该功能在 IE10 版本以下不兼容。

其中顶层窗口和父窗口针对在网页中嵌套 iframe 或者 frameset 有效，当嵌套框架时被嵌套框架是嵌套框架的 _parent，最外层的 HTML 称为 _top。

新的 HTML 标准中关于 target 属性的存在有一定的争议，主要是因为可以使用 JavaScript 的方式替代 target，例如：

<a href="javascript:window.open('https://www.baidu.com')" target="_blank">点击在新窗口打开</a>
<a href="javascript:location.href='https://www.baidu.com'">点击在当前窗口打开</a>
<a href="javascript:top.location.href='https://www.baidu.com'">点击在顶层窗口打开</a>
<a href="javascript:parent.location.href='https://www.baidu.com'">点击在父窗口打开</a>

以上代码使用 JavaScript 函数的方式实现各种打开链接的方式。

2.1 id 属性

id 属性是 html 的通用属性，主要是用于给元素设置事件或者设置样式时用到，以下代码实现点击链接跳转之前弹框提示：

<a href='https://www.baidu.com' id='test'>百度</a> <!-- 定义一个链接 -->
<script>document.getElementById("test").onclick = function(){  //点击链接跳转前弹框提示
    alert("即将跳转到百度");
}</script>

2.2 charset 属性

设置编码，在 HTML5 不支持：

<a charset="gb2312" href="http://www.baidu.com">百度</a>

此属性在主流浏览器中几乎不支持，所以定义了没有什么作用。

2.3 coords 属性

定义链接的坐标，HTML5 不支持。

2.4 download 属性

有时用户点击一个链接的时候，这个链接的内容有可能包含 word、pdf、png、jpg 或者 MP4，zip 等内容，用户需要的仅仅是下载而不是跳转链接，那么这时候我们只需要定义一个 download 属性，这个属性包含下载时的文件名称。

<a href="https://img01.sogoucdn.com/app/a/07/57d9e1c69332c8da692c3ec5c0e1466b" download="图片">点击下载图片</a>

以上代码定义了一个下载图片链接，download 属性不支持 IE 浏览器

2.5 href 属性

定义超链接的跳转目标，可以是：

  • 绝对 URL： 例如 ；
  • 相对 URL： 例如 /index.html；
  • 锚点 ： dom 的 id；
  • JavaScript 表达式：例如 javascript:void(0) 阻止链接跳转。
<a href="https://www.baidu.com" id="test">百度</a>
<a href="/index.html">主页</a>
<a href="#test" style="margin-top:2000px;display:block">跳转到首部</a>
<a href="javascript:void(0)">普通按钮</a>

以上代码定义了几种链接的方式，其中锚点主要应用于当页面滚动条比较长时，用户可以点击跳转到首部。

2.6 hreflang 属性

定义被链接的文档的语言：

<a href="http://www.baidu.com" hreflang="zh">百度</a>

主流的浏览器暂不支持该属性。

2.7 name 属性

通用属性，HTML5 不支持。

2.8 rel 属性

定义当前文档，主要用于搜索引擎搜集网页内链接的集合以及链接与链接之间的关系，没有实际功能用途。

rel 是英文单词 relationship 的缩写，意味着虽然这个属性本身对网页视觉效果而言没有什么本质性的用途，但是它是串联网页与搜索引擎的桥梁，搜索引擎通过这个属性可以获取到链接的一些简介，从而了解到该网页的用途，进而对网页进行归类，方便用户搜索。

2.9 rev 属性

定义链接文档与当前文档的关系，HTML5 不支持。

2.10 shape 属性

定义链接的形状，HTML5 不支持。

2.11 type 属性

定义链接文档的 mime 类型，mime 是指描述内容类型的因特网标准，以下罗列最新的标准项：

扩展名类型/子类型
application/octet-stream
323text/h323
acxapplication/internet-property-stream
aiapplication/postscript
aifaudio/x-aiff
aifcaudio/x-aiff
aiffaudio/x-aiff
asfvideo/x-ms-asf
asrvideo/x-ms-asf
asxvideo/x-ms-asf
auaudio/basic
avivideo/x-msvideo
axsapplication/olescript
bastext/plain
bcpioapplication/x-bcpio
binapplication/octet-stream
bmpimage/bmp
ctext/plain
catapplication/vnd.ms-pkiseccat
cdfapplication/x-cdf
cerapplication/x-x509-ca-cert
classapplication/octet-stream
clpapplication/x-msclip
cmximage/x-cmx
codimage/cis-cod
cpioapplication/x-cpio
crdapplication/x-mscardfile
crlapplication/pkix-crl
crtapplication/x-x509-ca-cert
cshapplication/x-csh
csstext/css
dcrapplication/x-director
derapplication/x-x509-ca-cert
dirapplication/x-director
dllapplication/x-msdownload
dmsapplication/octet-stream
docapplication/msword
dotapplication/msword
dviapplication/x-dvi
dxrapplication/x-director
epsapplication/postscript
etxtext/x-setext
evyapplication/envoy
exeapplication/octet-stream
fifapplication/fractals
flrx-world/x-vrml
gifimage/gif
gtarapplication/x-gtar
gzapplication/x-gzip
htext/plain
hdfapplication/x-hdf
hlpapplication/winhlp
hqxapplication/mac-binhex40
htaapplication/hta
htctext/x-component
htmtext/html
htmltext/html
htttext/webviewhtml
icoimage/x-icon
iefimage/ief
iiiapplication/x-iphone
insapplication/x-internet-signup
ispapplication/x-internet-signup
jfifimage/pipeg
jpeimage/jpeg
jpegimage/jpeg
jpgimage/jpeg
jsapplication/x-javascript
latexapplication/x-latex
lhaapplication/octet-stream
lsfvideo/x-la-asf
lsxvideo/x-la-asf
lzhapplication/octet-stream
m13application/x-msmediaview
m14application/x-msmediaview
m3uaudio/x-mpegurl
manapplication/x-troff-man
mdbapplication/x-msaccess
meapplication/x-troff-me
mhtmessage/rfc822
mhtmlmessage/rfc822
midaudio/mid
mnyapplication/x-msmoney
movvideo/quicktime
movievideo/x-sgi-movie
mp2video/mpeg
mp3audio/mpeg
mpavideo/mpeg
mpevideo/mpeg
mpegvideo/mpeg
mpgvideo/mpeg
mppapplication/vnd.ms-project
mpv2video/mpeg
msapplication/x-troff-ms
mvbapplication/x-msmediaview
nwsmessage/rfc822
odaapplication/oda
p10application/pkcs10
p12application/x-pkcs12
p7bapplication/x-pkcs7-certificates
p7capplication/x-pkcs7-mime
p7mapplication/x-pkcs7-mime
p7rapplication/x-pkcs7-certreqresp
p7sapplication/x-pkcs7-signature
pbmimage/x-portable-bitmap
pdfapplication/pdf
pfxapplication/x-pkcs12
pgmimage/x-portable-graymap
pkoapplication/ynd.ms-pkipko
pmaapplication/x-perfmon
pmcapplication/x-perfmon
pmlapplication/x-perfmon
pmrapplication/x-perfmon
pmwapplication/x-perfmon
pnmimage/x-portable-anymap
pot,application/vnd.ms-powerpoint
ppmimage/x-portable-pixmap
ppsapplication/vnd.ms-powerpoint
pptapplication/vnd.ms-powerpoint
prfapplication/pics-rules
psapplication/postscript
pubapplication/x-mspublisher
qtvideo/quicktime
raaudio/x-pn-realaudio
ramaudio/x-pn-realaudio
rasimage/x-cmu-raster
rgbimage/x-rgb
rmiaudio/mid
roffapplication/x-troff
rtfapplication/rtf
rtxtext/richtext
scdapplication/x-msschedule
scttext/scriptlet
setpayapplication/set-payment-initiation
setregapplication/set-registration-initiation
shapplication/x-sh
sharapplication/x-shar
sitapplication/x-stuffit
sndaudio/basic
spcapplication/x-pkcs7-certificates
splapplication/futuresplash
srcapplication/x-wais-source
sstapplication/vnd.ms-pkicertstore
stlapplication/vnd.ms-pkistl
stmtext/html
svgimage/svg+xml
sv4cpioapplication/x-sv4cpio
sv4crcapplication/x-sv4crc
swfapplication/x-shockwave-flash
tapplication/x-troff
tarapplication/x-tar
tclapplication/x-tcl
texapplication/x-tex
texiapplication/x-texinfo
texinfoapplication/x-texinfo
tgzapplication/x-compressed
tifimage/tiff
tiffimage/tiff
trapplication/x-troff
trmapplication/x-msterminal
tsvtext/tab-separated-values
txttext/plain
ulstext/iuls
ustarapplication/x-ustar
vcftext/x-vcard
vrmlx-world/x-vrml
wavaudio/x-wav
wcmapplication/vnd.ms-works
wdbapplication/vnd.ms-works
wksapplication/vnd.ms-works
wmfapplication/x-msmetafile
wpsapplication/vnd.ms-works
wriapplication/x-mswrite
wrlx-world/x-vrml
wrzx-world/x-vrml
xafx-world/x-vrml
xbmimage/x-xbitmap
xlaapplication/vnd.ms-excel
xlcapplication/vnd.ms-excel
xlmapplication/vnd.ms-excel
xlsapplication/vnd.ms-excel
xltapplication/vnd.ms-excel
xlwapplication/vnd.ms-excel
xofx-world/x-vrml
xpmimage/x-xpixmap
xwdimage/x-xwindowdump
zapplication/x-compress
zipapplication/zip

3. 其他链接因特网标准

除了通过<a>链接标签的方式，还可以通过下面三种方式：

  • JavaScript
  • iframe 标签
  • script 标签

等方式与服务器交互。

3. 小结

本章节介绍了 <a> 标签的用途，以及各个属性的功能，其中有些已经在 HTML5 废弃了，例如，控制样式的属性。<a> 标签是 HTML 中用途非常广泛的标签，需要掌握。

这篇文章对你有帮助吗？
人中人觉得有帮助