html锚点跳转-锚链接的具体使用场景

bendan520 html

2023-08-29 0 4,218 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

HTML 锚链接

什么是锚链接：锚链接是超链接的一种html锚点跳转，其方法与超链接不同。使用锚链接的主要目的是为了更方便的跳转到页面中的某个位置。使用的场景是方便用户在过长的页面中跳转到自己想要去的相应位置

锚链接的具体使用场景：

我是大脑

<a href="#" name="top"></a>

1.跳转到当前页面指定位置

<a href="#miao">去找锚点一</a>

2. 将锚点设置在页面上所需的位置。我是锚点一；（注意：a标签中必须写一个name属性，属性值必须与[1]中的href属性值相同，不带#）在标签中按要求填写相应的文字，一般不写内容。

<a href="#" name="miao">我是锚点一</a>

<a href="#miao">去找锚点二</a>；

2.设置锚点的位置我是锚点 2.在要跳转的位置的标签上添加id属性。属性值与①中的href属性值相同，不带#

<h4 id="miao">我是锚点二</h4>

2、跳转到其他页面指定位置

使用锚链接html锚点跳转，还可以跳转到其他页面的指定位置。与跳转到当前页面的指定位置相比，需要在#之前添加要跳转到的页面的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index页面</title>
</head>
<body>
    <p>index页面</p>
    <h2 id="index">这是h2标题</h2>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点链接</title>
</head>
<body>
    <a href="./index.html#index">跳转到index页面</a>
</body>
</html>