当前位置: 洪哥笔记 > DHTML > HTML超链接<A>标签

 

HTML超链接<A>标签


关键词

HTML超链接 A标签

摘要

介绍超级链接<A>标签的使用,包括链接地址href属性,目标窗口target属性,还有当<A>标签作为一个锚的使用方式。

HTML超链接A标签

<a>标签,即超链接标签,它可以实现从一个网页到另一个网页的跳转,或者从页面的一个位置跳转到另一个位置,还可以从一个网站跳转到另外一个网站。
先上例子,这样比较好讲:
<html>
<head>
<title>洪哥的超链接</title>
</head>
<body>
<a href="honge1.html" target="_blank">洪哥的第一个网页</a>
</body>
</html>
把这段代码保存为honge2.html。

打开honge2.html,页面上会有一个链接,把鼠标放上去会变成手形。点击它,将会在将窗口打开honge1.html页面。
可能这个还不是很刺激,把“href="honge1.html"”换成“href="http://www.splaybow.com"”试试。

现在来解释一下这个例子。

href属性
href属性表示链接的目标地址,可以是一个网页,也可以是一个URL地址。这两个我们都演示过了。如果链接地址是 http://www.splaybow.com/test.mp3,那点击它就可以下载这个test.mp3文件。呵呵,凡事有果必有因,要想真下载到 test.mp3,那还得洪哥在www.spalybow.com网站的根目录下放一个test.mp3文件才行。

target属性
这个target属性,表示打开目标地址的目标窗口。这话有点难懂,还是拿上面的例子说话。我们点链接打开honge1.html是在一个新窗口,那是因为target值为“_blank”,如果值为“_self”就表示在本身窗口打开。

下面说点题外话,为什么链接标签要用字母“a”来表示呢?洪哥没有在哪本书上有看到类似的讨论,但洪哥猜,它是取的英文单词anchor的首字母。这个单 词什么意思呢?锚!是喵星人吗?不是,是抛锚掉链子的那个锚!船上的锚像不像一个超链接,把另外一个网页钩住?呵呵,忽悠到此打住。

来说说<a>标签的锚!<a name="pos1">位置1</a>,这里我定义了一个锚,名字叫“pos1”。然后我在另外一个地方定义一个超级链接来指向它& lt;a href="#pos1">链接到位置1</a>,完整代码如下。
<html>
<head>
<title>洪哥的超链接</title>
</head>
<body>
<a href="#pos1">链接到位置1</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<a name="pos1">位置1</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
把它保存为honge3.html,打开它,点击“链接到位置1”,看看效果。是不是浏览器将网页定位到“位置1”的位置了?
这种锚在网页很长、主题很多的时候经常被使用。比如一个FAQ页面,里面有10个帮助主题,整个网页有三四个屏幕那么长,那我们可以先在页面顶部做一个目录,每个目录链接到下面的对应主题。这样浏览网站的朋友就轻松多了,不用大海捞针一般的去寻找感兴趣的内容。

当然,如果有人想问“<p>&nbsp;</p>”是干嘛的,洪哥简单的回答你:<p>表示段落,&nbsp;表示空格。

 

要饭二维码

洪哥写文章很苦逼,如果本文对您略有帮助,可以扫描下方二维码支持洪哥!金额随意,先行谢过!大家的支持是我前进的动力!

文章的版权

本文属于“洪哥笔记”原创文章,转载请注明来源地址:HTML超链接<A>标签:http://www.splaybow.com/post/html-a-link.html

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D

« HTML基本语法 HTML字体样式 »