WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

html锚点链接创建的方法及用法

更新时间:2021-02-10 13:34 作者:刘代码点击:

在html代码中创建锚点连接需要用到<a>标签,那么,<a>标签如何创建锚点链接、创建步骤怎么做以及使用方法详解都会在下文中介绍。

什么是锚点链接?

锚点链接,也叫锚点定位,或叫书签链接,是指可以直接跳转到当前页面或其他页面中对应的某个位置的超链接。 

锚点链接的作用

设置锚点链接有以下两个作用:

1、单页面内跳转:通过锚点链接,可以跳转到当前页面中的其他位置,通常用于单个页面中的跳转定位,比如,在文章开头建立一个目录,设置锚点链接,就可以通过目录直达相应的位置,这样就不需要使用鼠标滚动到指定的位置,而是直接一步到位跳转到指定位置。。

2、跳转到其他页面内:通过锚点链接,可以跳转到其他页面的位置,通常用于从当前页面跳转定位到其他页面中的某个位置;

锚点链接创建步骤

锚点链接的创建步骤,分两步完成,第一步,定义一个锚点位置,第二步,创建指向锚点的链接,下面分别对这两步做出详细的介绍。

第一步:定义锚点位置

定义锚点位置有两种方法,无论使用哪一种方法,都是可以的。

方法1、<a>标签定义法

用<a>标签在页面中“第一章”的位置使用id属性定义一个锚点,比如说,我们将锚点名称设置为add,代码如下:

Markup
<a id="add">第一章</a>

定义锚点的<a>标签是不需要href属性的。

在html5之前,我们也可以用name代替id定义锚点,但在html5中不支持 name 属性,所以,推荐大家使用id定义锚点!

方法2、其他标签定义法

在<a>标签中定义锚点,可以使用name和id,但在其他的html标签中,则只能使用id来定义锚点;

比如,我们在段落P标签中定义锚点,就应该像这样:

Markup
<p id="add">第一章</a>

温馨提示:

一个页面中,可以定义多个锚点,<a>标签内,可以用name和id定义锚点名称,而在其他html标签中,只能用id定义锚点名称;

第二步:创建锚点链接

当我们在页面中已经定义了一个锚点位置之后,再只需要用<a>标签创建一个指向该锚点位置的链接即可。

1、单页面内跳转

当我们只想在一个页面的位置跳转到该页面中的其他锚点位置的时候,称之为“单页面跳转”,说白了,就是在同一个页面的一个地方跳转到该页面的另一个地方而已。

比如,我们创建一个指向“第一章”锚点位置的超链接,代码如下:

Markup
<a href="#add">点击后跳转到第一章的位置</a>

我们要跳转到“第一章”的锚点位置,而这个锚点位置的锚点名称是add,但在使用href属性指向add的时候,就需要加上符号# ,所以,正确的写法就是href="#add",别忘记带上#就行了。

2、跳转到另一个页面内的指定位置

比如,我们在a.html的页面中定义了一个锚点,锚点名称为add,想要从另一个页面的链接跳转到该锚点位置,代码如下:

Markup
<a href="a.html#add">跳转到a.html页面中add锚点位置</a>

其中,href="url#锚点名称",表示指向其他页面的锚点位置,url是其他页面的地址,可以是相对链接,也可以是绝对链接。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容