html5中常用的链接元素说明及功能用途介绍

链接元素的常用属性

我们平时见到的a标签中最为常见的就是href和target这两个属性了，其次还有type和download，下面我们来依次分析一下它们各自都有着什么样的用途：

• href属性介绍

  通俗点讲，这个属性是目标指向的意思，最常用的是页面链接的地址，当然不仅限于链接地址，也可以是拨打电话的链接、打开邮件工具发邮件的链接都可以通过href属性来实现；下面简单的写下上面提到的各种代码示例：

  • 点击打开网页目标示例： <a href="http://www.php.cn">PHP中文网</a>

  • 点击拨打电话示例：<a href="tel:13888888888">联系客服</a>

  • 点击发送邮件示例： <a href="mailto:admin@admin.com">发送邮件</a>

  • 点击下载示例： <a href="http://www.php.cn/kejian.zip">下载课件</a>

• target 属性介绍

  target属性是设置我们上面href的指向目标打开源，我们平时点击网页中链接的时候会发现有的点击是直接在当前页面跳转到新页面的，还有的是点击之后会在一个新的窗口打开新页面同时我们点击的这个页面也还保留着的，还有的是左边点击，右边会随之变动等等一些情况，那么这些都是通过配合target属性来实现的，我们直接上示例代码：

  • 在新窗口打开示例： <a href="http://www.php.cn" target="_blank">PHP中文网</a>

  • 在当前窗口打开示例： <a href="http://www.php.cn" target="_self">PHP中文网</a>

  • 在父窗口打开示例： <a href="http://www.php.cn" target="_parent">PHP中文网</a>

  • 在顶层窗口打开示例： <a href="http://www.php.cn" target="_top">PHP中文网</a>

  • 指定窗口打开示例： <a href="http://www.php.cn" target="窗口名称">PHP中文网</a>，此用法需要搭配<iframe>元素一起使用

• download属性介绍

  这个属性是用来自定义下载文件名的，我们虽然不是很常见，但是非常的好用，比如在服务器上我们需要下载的一张图片文件名是“img.jpg”，我们通过设置download属性可以使用户点击下载这个图片的文件名是另一个，看代码写法：

  • 自定义下载文件名示例： <a href="https://www.php.cn/img.jpg" download="test.jpg">下载图片</a>

• type属性介绍

  type属性是设定href链接中文档的 MIME 类型，且只能在href属性存在时使用才有效。看下面示例代码：

  • 设定链接中的MIME类型为超文本标记语言文本类型：<a href="http://www.php.cn" type="text/html">走你</a>

附：常见的MIME类型表：

中文名称	文件后缀	MIME类型
超文本标记语言文本	.htm,.html	text/html
普通文本	.txt	text/plain
RTF文本	.rtf	application/rtf
GIF图形	.gif	image/gif
JPEG图形	.jpeg,.jpg	image/jpeg
au声音文件	.au	audio/basic
MIDI音乐文件	mid,.midi	audio/midi,audio/x-midi
RealAudio音乐文件	.ra, .ram	audio/x-pn-realaudio
MPEG文件	.mpg,.mpeg	video/mpeg
AVI文件	.avi	video/x-msvideo
GZIP文件	.gz	application/x-gzip
TAR文件	.tar	application/x-tar

锚点的功能与用途

• 锚点是什么：

  锚点是超链接的一种，又叫命名锚记

• 锚点有什么作用：

  锚点能够迅速定位到当前页面内标记的指定位置

• 锚点的用途：

  常见的锚点功能有“回到顶部”、“到底部”、单页面中点击跳转到指定内容位置等等

• 锚点的用法写法

  锚点的使用需要配合页面中某元素加入id值作为锚点标记，然后通过href超链接跳转至标记处，请看下方示例代码：

  • 创建锚点标记：<header id="top">顶部页头内容区</header>

  • 锚点跳转实现：<a href="#top">回到顶部</a>

    这样就创建好了一个锚点。

结语

通过学习本节《链接元素》，我们对网页中常见的链接有了新的理解与认识，从常见的链接属性到陌生偶尔见到的链接属性，对今后的开发道路都有很大的帮助。