HTML的假链接、锚点

一、假链接

1、含义：点击之后不会跳转的链接我们称为假链接

2、作用：在企业开发前期，要跳转的链接界面内容还没有写出来时，会使用假链接替代；当项目和后期界面内容写出来了，再用真链接替代假链接

3、格式：有2种

1）#

2）javascript

两者的区别：

# 假链接会自动跳回到网页的顶部，javascript 只会在当前位置，不会有任何跳转

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>假链接使用</title>
</head>
<body>
    <p>我是顶部</p>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <a href="#">点我试试，我要跳到顶部</a>
    <a href="javascript">点我我也不跳转</a>
</body>
</html>

二、锚点

1、要求通过a标签跳转到当前页面的指定位置，则需要给a标签要跳转位置的标签的 id属性，这样a标签才能跳转到指定位置

2、在 html中，每一个标签都有一个名称叫做id属性，这个属性用来给标签指定一个独一无二的身份

3、通过a标签跳转到指定位置分为两步：

3.1 给目标位置的标签添加一个id属性，然后指定一个独一无二的值

3.2 告诉a标签你需要跳转到的目标标签对应的id值

4、格式：

跳转到当前页的某个指定位置： <a href="#center">点我，我要跳到本页的中部</a>

跳转到其他页面的某个指定位置：<a href="04_锚点.html#bottom" target="_blank">点我，我要跳去锚点网页的底部</a>

5、注意点：

5.1 通过a标签跳转到指定的位置，是没有过度动画，是直接一下子跳到指定位置

5.2 a标签除了可以跳转到当前界面的指定位置以外，还可以再跳转到其他界面的某个指定位置

举例1：跳转到本页的某个指定位置

     <a href="#center">点我，我要跳到本页的中部</a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>假链接使用</title>
</head>
<body>
    <h2 id="top">我是顶部</h2>
    <a href="#center">点我，我要跳到本页的中部</a>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h2 id="center">我是中部</h2>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h2 id="bottom">我是底部</h2>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

举例2：下面代码演示从假连接.html跳转到锚点.html的底部文字位置

假连接.html 代码（运行本文件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>假链接使用</title>
</head>
<body>
    <p>我是顶部</p>
    <a href="04_锚点.html#bottom" target="_blank">点我，我要跳去锚点网页的底部</a>

</body>
</html>

锚点.html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点测试</title>
</head>
<body>
    <h2 id="top">我是锚点顶部</h2>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h2 id="center">我是锚点中部</h2>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h2 id="bottom">我是锚点底部</h2>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>