整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML之a标签的使用

到a标签,大家第一时间想到的一定是a标签的链接作用,除了链接,我们还能想到什么呢?

下面的篇幅我们一起来讨论html中a标签的用途。(针对html5讨论,html5中不支持的功能

不在此篇文章的讨论范围内)

1. 链接作用

这个大家都很熟悉,就是点击跳转到我们设定的链接上,具体语法为:

<a href="xxx(链接地址)">跳转</a>

平常我们在点击链接的时候有时候会在当前页面加载,有时候会在新标签页加载,还有的甚至会新建窗口加载,为什么会这样呢?这里我们就需要引进a标签的一个属性target(仅在href属性存在时才能使用)。根据w3c的文档说明我们会看到target属性有多个值,对应的说明如下:

_blank -->总在一个新打开、未命名的新标签页中载入目标文档。
_self -->在当前标签页中载入目标文档(默认选项,无需特别声明)
_parent -->在当前框架(frame)的父框架(父级frame)中载入目标文档
_top -->在当前框架(frame)的顶部框架(顶级frame)中载入目标文档
framename -->在指定的框架中载入目标文档

注意:以上属性只能在新标签或者当前标签载入目标文档,那么如何能够在新窗口载入目标文档呢?我们需要用到js中的window.open()方法,具体代码如下:

<script type="text/javascript">
 function openNewWindow(url, title)
 {
 window.open(url, title);
 }
</script>
<a href='javascript:openNewWindow("xxx(链接地址)", "标题")'>跳转</a>

2. 锚点定位

除了链接到新地址,a标签还可以用来做页面内导航,即锚点定位,具体代码如下:

<div id="test">test</div>
<a href="#test">跳转</a>

点击跳转即可定位到id为test的div所在的位置。

3. 打电话/发短信/发邮件

<a href="tel:电话号码">打电话</a>
<a href="sms:电话号码">发短信</a>
<a href="mailto:邮箱地址">发邮件</a>

4. 下载

<a href="xxx(下载地址)" download="文件名">下载</a>

注意:以上下载地址要与原页面同源,否则无法下载。download的值可以缺省,如果缺省则按文件默认名命名。

天我们来看下html中<a></a>的特点与功能

一 .a标签是超链接标签,首先我们说一下它的特点:

1.在网页中默认会有下划线

2.不会继承父级的颜色样式

效果图

详细代码

其中,自带的下划线不美观,但我们可以用以下代码解决,ctrl+s保存后,下划线就没有了

去掉下划线

二 .下面我们来看看a标签的几个功能:

1.跳转页面

href 属性要跳转页面的地址(没地址的情况下可以写一个#),即可以给网络的地址也可以给本地的地址

target 属性

值:_blank在新页面打开

_self 在本页面打开(默认的)

跳转页面功能

2.锚点

作用:网页太长时,通过点击页面某一个导航,页面直接到达该内容,网页还是该网页,只是向下自己滑动。

实现方法:在 href 的值里写上#name,name对应id的值

下面是一个简单例子,点击颜色就会跳转到相应颜色区域

锚点例子

3.下载

作用:实现网页的下载功能

实现方法:在 href 里写上文件的地址就可以了

注意:如果你要下载的文件浏览器能够读出来,那它就不会被下载,而是会被直接打开。如果就想让浏览器下载所有文件,那就在a标签里添加一个属性download( h5 新增属性,不兼容IE低版本),它的值写上文件的名字加后缀名

下载功能

三.此外,介绍一下a标签的颜色,给a标签换颜色也是会经常用到的,但是怎么改呢?

这里用到了“伪类”,伪类:针对元素的某种状态添加的不同样式

a :link 未访问链接的(颜色)状态

:visited访问过的链接的(颜色)状态

:hover鼠标移入(悬停)(颜色)状态

:active鼠标按下不动时候的(颜色)状态

改变a标签颜色

今天的a标签就介绍到这里,你学到了吗?

览器支持

所有主流浏览器都支持 <a> 标签。

标签定义及使用说明

<a> 标签定义超链接,用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性,它指定链接的目标。

在所有浏览器中,链接的默认外观如下:

  • 未被访问的链接带有下划线而且是蓝色的

  • 已被访问的链接带有下划线而且是紫色的

  • 活动链接带有下划线而且是红色的

提示和注释

提示:如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 type 属性。

提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target。

提示:请使用 CSS 来改变链接的样式。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中,<a> 标签既可以是超链接,也可以是锚。在 HTML5 中,<a> 标签是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。

HTML5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。

属性

New :HTML5 中的新属性。

属性描述
charsetchar_encodingHTML5 不支持。规定目标 URL 的字符编码。
coordscoordinatesHTML5 不支持。规定链接的坐标。
downloadNewfilename指定下载链接
hrefURL规定链接的目标 URL。
hreflanglanguage_code规定目标 URL 的基准语言。仅在 href 属性存在时使用。
mediaNewmedia_query规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用。
namesection_nameHTML5 不支持。规定锚的名称。
relalternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
revtextHTML5 不支持。规定目标 URL 与当前文档之间的关系。
shapedefaultrectcirclepolyHTML5 不支持。规定链接的形状。
target_blank_parent_self_topframename规定在何处打开目标 URL。仅在 href 属性存在时使用。
typeNewMIME_type规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注:MIME = Multipurpose Internet Mail Extensions。

全局属性

<a> 标签支持 HTML 的全局属性。

事件属性

<a> 标签支持 HTML 的事件属性。

创建超级链接

本例演示如何在 HTML 文档中创建链接。

将图像作为链接

本例演示如何使用图像作为链接。

在新的浏览器窗口打开链接

本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开您的站点了。

创建电子邮件链接

本例演示如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)

创建电子邮件链接 2

本例演示更加复杂的邮件链接。

使用锚跳转到同一个页面的不同位置

本例演示如何使用锚的 id 属性跳转到页面的不同位置( HTML5 不支持 name 属性)

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!