HTMLl中的锚点

2024-03-27 07:18

文章标签 html frontend 锚点

本文主要是介绍HTMLl中的锚点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、页面内跳转的锚点设置

页面内的跳转需要两步：

方法一：

1、设置一个锚点链接。注意：href属性的属性值最前面要加#

<a href="#miaodian1">点击跳转</a>

2、在页面中需要的位置设置锚点。注意：a标签中要写一个name属性，属性值要与上面的的href的属性值一样，不加#号。标签中按需填写必要的文字，一般不写内容

/*点击第1步设置的<a>标签就会跳到本标签这个页面位置*/
<a name="miaodian1"></a>

方法二：

1、同方法一的1

<a href="#miaodian2">点击跳转</a>

2、设置锚点的位置；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#号。

 <h3 id="miaodian2">跳转到这里</h3>

方法二不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个id即可。

小案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>锚点案例</title>
</head>
<body><a href="#bottom" name="top">去底部</a><a href="#miaodian1">跳转描点一</a><a href="#miaodian2">跳转描点二</a><div style="height: 5000px; width: 300px; background-color: #123"></div><a name="miaodian1">描点一</a><h3 id="miaodian2">描点二</h3><a href="#top" name="bottom">回到顶部</a>
</body>
</html>

二、跨页面跳转

1、设置锚点链接，在href中的路径后面追加：#+锚点名，即可

<a href="b.html#other_page">跳转另一个页面</a>

2、要跳转到的页面中要设置锚点，方法见第一种方法的步骤2，两个方法任选其一。

 <input type="text"><div style="height: 5000px; width: 300px; background-color: #123"></div><!--描点：其他页面通过点击直接跳到本页面本描点位置--><a name="other_page">我在这里</a>

案例：
文件： a.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="b.html#other_page">跳转到另一个页面</a>
</body>
</html>

文件： b.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text"><div style="height: 5000px; width: 300px; background-color: #123"></div><!--描点：其他页面通过点击直接跳到本页面本描点位置--><a name="other_page">我在这里</a>
</body>
</html>